ホームページ » コーディング - ページ 8

    コーディング - ページ 8

    CSSグリッドレイアウトモジュールの紹介
    一度だった テーブル, それから マージンとフロート, それから フレックスボックス そしていま グリッド:CSSは常に古くからの仕事を楽にするための新しくてより良い方法を目指していました Webレイアウトのコーディング. の CSSグリッドレイアウトモデル レイアウトを作成および更新できます 2つの軸に沿って:縦横, 幅と高さの両方に影響 要素の. グリッドレイアウトはマークアップ内の要素の位置には依存しません。 要素の配置をシャッフルする レイアウトを変更せずにマークアップで。グリッドモデルでは、グリッドコンテナ要素は グリッドの列と行に分割 (総称して グリッドトラックによって グリッド線. それでは、方法を見てみましょう サンプルグリッドを作成する. ブラウザサポート この記事を書いている時点では、CSSグリッドモジュールは最新のIEブラウザとEdgeでしかサポートされていません。 CSSグリッドは 実験段階で あなたがしなければならない他の主要なブラウザで 手動でサポートを有効にする:...
    JavaScriptでの共有メモリの紹介
    共有メモリ JavaScriptの高度な機能であり、スレッド(プロセスの同時実行部分)が活用できることです。記憶手段を共有する 更新されたデータをスレッド間で受け渡すという問題がない すべてのスレッドが共有メモリ内の同じデータにアクセスして更新できる. それは素敵ではありませんか?よくほとんど。この記事では、私たちは見るでしょう JavaScriptで共有メモリを使用する方法 そしてこれがあなたが本当にやりたいことであるかどうかを決める方法. 共有メモリの長所と短所 を使用しております ウェブワーカー に JavaScriptでスレッドを作成する. Web Workers APIを使用すると、次のことに使用できるワーカースレッドを作成できます。 バックグラウンドでコードを実行する メインスレッドが自由に実行を継続できるように、おそらくUIイベントを処理し、UIがフリーズしないようにします。. ワーカースレッド メインスレッドと同時に実行します。. タスクの異なる部分をこのように同時に実行すると、時間が節約されます。あなたはより早く終えるが、それはまたそれ自身の問題のセットを持っている. 各スレッドを確認する 必要なリソースを取得し、タイムリーに互いに通信する それ自体がタスクであり、そこでの誤操作は驚くべき結果をもたらす可能性があります。または、 1つのスレッドがデータを変更しており、別のスレッドがそれを読み取っています 同時に, あなたは他のスレッドが何を見ると思いますか?更新または古いデータ? しかし、Webワーカーはめちゃくちゃに簡単ではありません。メッセージを使用して通信している間、お互いに送信するデータは オリジナルではなくコピー, そうではないという意味 シェア...
    MathML入門 - 数学のためのマークアップ言語
    MathMLは、に使用できるマークアップ言語です。 数学表記を表示する. HTML5から直接MathMLタグを使うことができます。 Webページに単純なMathの表記法よりも多くの表記法を表示したい場合に便利です。 単純さとHTMLの類似性. MathMLには2種類のマークアップがあります。プレゼンテーション(レイアウト用)とコンテンツ(意味用)。プレゼンテーションマークアップのみがブラウザでサポートされているので、それがHTMLで使用できる唯一のマークアップタイプです。 HTMLと同じように、CSSとJavaScriptを使用することもできます。. MathMLを見てみましょう. MathMLを理解する 現在のMathML要素のリストはMozilla DeveloperのWebサイトにあります。早見のために、この記事の最後にある例で使用されている要素もリストしました。. MathMLのトップレベルの要素は 要素、あなたがHTMLでMathMLコードを書くとき、それらの中にそれらを置くことを忘れないでください タグ. ,,, はそれぞれ識別子、演算子、数値、文字列を表す基本要素です。以下のすべてのMathML要素は文字 'm'で始まることに注意してください. ここにいくつかの簡単な例があります. 上付き文字と下付き文字を表示する方法 の 要素は上付き文字を表示するためのものです。あります 下付き文字用. n 7 分数を表示する方法 7 26 ルート整数を表示する方法 これは、ルート整数を表示するためのもう1つの簡単な例です。. -678...
    CSSフィルタ効果による画像調整
    画像を調整する 輝度 そして コントラスト, または画像をに変える グレースケール または セフィア これは、画像編集アプリケーションによく見られる機能です。 フォトショップ. しかし、CSSを使用してWeb画像に同じ効果を追加することが可能になりました. この機能は、実際にはまだ草案段階にあるフィルタ効果から来ています。しかし、Webkitブラウザは、この機能を実装する上でのステップの一歩のようです. それでは、試してみましょう。効果を示すためにMehdi Khのこの画像を使用します。. 効果 効果を適用するのはとても簡単です。下のスニペットを見てください。 グレースケール; img -webkit-filter:グレースケール(100%); …そしてこれは セピア ala Instagramの. img -webkit-filter:sepia(100%); 両方 セピア そしてその グレースケール 値はパーセンテージで示されています...
    HTML5フォームのHTML5チュートリアルログインページ
    HTML5は多くの機能と改良をもたらします。 Webフォーム, 導入された新しい属性と入力タイプがあります 主にWeb開発者の生活を楽にし、Webユーザーにより良い経験を提供するため. そのため、この記事では、次のようにしてログインページを作成します。 HTML5フォーム 新しく追加された機能がどのように機能するかを確認する. デモ ソースをダウンロード HTML5の入力 次のマークアップを見てみましょう. Eメール パスワード HTMLフォームを以前に使用したことがあれば、これはおなじみのことでしょう。しかし、違いもあります。入力は プレースホルダー そして 必須 attributes、HTML 5の新しい属性. プレースホルダー の プレースホルダー 属性を使用すると、入力に最初のテキストを入力できます。 フォーカス 以前は、JavaScriptを使用していましたが、この新しい属性を使用するとはるかに簡単になります。. 必須属性 の 必須 attributeはフィールドを必須に設定するため、フォームが送信される前に空白のままにしないでください。したがって、ユーザーがフィールドに入力していない場合は、次のエラーが表示されます。. 新しいセレクタはCSS3でも導入されました,...
    HTML5チュートリアル単一の製品ページを作成する方法
    この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. この記事では、架空のプロジェクトに取り組み、iPhone 4Sを提供する単一の製品ページを作成します。このプロジェクトでは、以前の記事で説明した方法も実装します。の 要素と否定セレクタ. 始めましょう. HTML5マークアップ まず、作成する必要があります html 次のマークアップで文書化します。 アップルiPhone 4 - 16GB まだ最も素晴らしいiPhone. 高速デュアルコアA5チップまったく新しい光学系を搭載した8MPカメラも1080p HDビデオを撮影します。そしてシリを紹介します。それはまだ最も素晴らしいiPhoneです. 製品の特徴 フル1080pビデオ録画付き8メガピクセルカメラ シリ声助手 iCloud エアプリント...
    HTML5
    およびタグの使い方
    この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. HTML5で利用可能ないくつかの新しいタグの中で、仕様(例: 図, figcaption, そして さておき), 細部 そして 概要 私の意見では、タグが最も便利です。これらの新しいタグを使用すると、長いコンテンツの一部を非表示にして概要のみを表示できます. 私たちは実際にこの効果をよく目にすることがありますが、それらのほとんどは依然としてJavaScriptまたはその兄弟であるjQueryに基づいて構築されています。さて、これらの新しい要素を使って - 詳細 そして 概要 - 物事は簡単になります. それでは、実際のシナリオでタグがどのように機能するかを見てみましょう。. このデモでは、製品の説明をまとめます。最初に「details」タグを作成してから、次の例のように、その中に「summary」タグとともにすべてのコンテンツを配置しましょう。 MacBook Proの仕様...
    HTML5コンテンツ属性フロントエンドでのWebコンテンツの編集
    の新機能の1つ HTML5 私を魅了したのはネイティブのフロントエンドエディタです。この機能は一般にブラウザから直接コンテンツを編集するためにコンテンツ管理システムに適用され、通常JavaScriptとAJAXで完全に構築されています。 HTML 5を使用すると、プロセスが少し簡単になります。 満足できる 属性. それは何ですか 任意の要素に適用されたとき、この属性は私たちを可能にします 編集する その内容は、下の例を見てみましょう。 クッキーマフィンクロワッサン。 Faworkiデンマークビスケット。ナツメパウダークッキーケーキビスケットhalvah halvah。ビスケットグミゼリービスケット. 甘いロールティラミスチョコレートバーシュガープラムキャラメルトゥーツロールキャラメル。チョコレートケーキと綿菓子のアイシング。 Applicakeゴマスナップ甘草菓子クロワッサンキャラメルフルーツケーキジンジャーブレッドビスケット。ドーナツタフィーキャンディー. この例では、追加しました 満足できる 属性と設定 本当の そのため、コンテンツは編集可能になります。この属性に追加できる値は他に2つあります。 偽 これは逆になります。コンテンツは編集できなくなります。 受け継ぐ;次の場合はコンテンツが編集可能になります。 直接の親 編集可能です. デモを見る 上記のデモをチェックアウトした場合は、コンテンツをブラウザから直接編集できることがわかります。ただし、この要素は変更内容の保存をカバーしていないため、変更後にページを更新すると、コンテンツは元に戻ります。. 変更を保存する方法 変更を保存するかどうかは、データをどこに保存するかによって異なります。通常、データベースに保存されます。しかし、このチュートリアルではデータベースにアクセスできないので、変更を保存する方法を説明します。...