例
この記事の最初の図から始めて、HTML 内で CSS スタイル設定の「順序」プロパティを使用する方法を示します。 HTML コードを追加して実行するには、「html」タイプのファイルが必要です。 そのため、「Articles」フォルダー内に新しいファイル「test.html」を作成し、Visual Studio コードで開きました。 HTML コードは、「
この例では、基本的な「head」タグから説明を始めます。 このタグ内では、「style」タグを介して、この HTML ファイルで定義された特定の HTML 要素に対してさまざまな CSS プロパティを使用しています。 最初に、HTML ページの「body」で使用されるメインの「div」タグを、指定された ID、つまり「main」を介してスタイリングしています。 「div」タグは常に、ページをセクションまたは部分に分割して、HTML ページの要素とコンテンツの一部を他の要素から分離するために使用されます。 プロパティ width と height を使用して、HTML ページ内のこの「div」要素の幅と長さをピクセルで定義しています。つまり、幅 400px、高さ 70px です。
この「くぼみ」領域には、周囲に 5 ピクセルの黒の境界線の塗りつぶされた境界線が含まれます。 この境界は、メインの「div」領域の境界を定義します。 次に、メインの div タグのメイン ID を使用して、子の「div」タグに CSS を適用しました。 5 つの内側の「div」要素タグすべてについて、幅を 100 ピクセル、高さを 70 ピクセルに設定しました。これは、この HTML タグのメインの「div」セクション内にあります。 内側と外側の div 要素のこれらの高さと幅は、外側のタグ内の 5 つの div タグに均等に収まるように指定されています。 その後、5 つの div タグ ID を 5 つの行で個別に使用して、5 つの「div」セクションすべてを適切に異なるスタイルにしました。 CSS スタイルの「order」プロパティを使用して、5 つの div タグを番号順に並べます。 茶色の「div」が 3 に表示されます。rd、5 の青番目、2 上に緑色nd、1に紫st、および 4 のオレンジ番目. ここで style と head タグがクローズになりました。
ブラウザのウェブページの基本的な要素を定義して表すために使用される基本的な「body」タグについて説明しましょう。 このタグ内では、サイズ 1 のメインの見出しタグ、メインの「div」タグ、および次々にリストされた 5 つの子の「div」タグを使用しました。 メインの「div」タグは ID「main」で指定されており、head タグ内でスタイルを設定しているため、簡単に区別できます。 内側の 5 つの「div」タグは、いくつかのスタイルと個別の ID (茶、青、緑、紫、オレンジ) で指定されています。
これらの ID は、スタイル タグでこれらの「div」タグを個別にスタイルするために使用されます。 CSSインラインスタイリングメソッドを使用して、5つのdivタグすべての開始内で「style」要素を使用して、5つのタグすべてをスタイリングしています。 background-color プロパティを使用して、5 つの div タグすべての色 (茶、青、緑、紫、オレンジ) を個別に指定しています。 これらの 5 色は、Web ページの「div」要素によって作成されたボックスに塗りつぶされ、画面上で見栄えがします。 メインの「div」タグとメインの「body」タグはここで閉じています。 さらに、「html」メイン タグ クロージングをここで使用して、HTML コードを終了し、スムーズに実行できるようにします。
まず、このコードを保存しましょう Ctrl+S. 次に、Visual Studio コード ツールのタスクバーから[実行]メニューをタップします。 表示された「デバッグなしで実行」オプションをタップし、ブラウザを選択して続行します。 Google Chrome ブラウザーを使用して実行します。
Chrome ブラウザの出力タブには、黒い実線の境界線の 1 つのメイン「div」内に 5 つの div パーツがある次の画像が表示されます。 子の「div」ボックスのシーケンスは、コードの説明で説明したものと同じです。つまり、紫色の 1st、緑 2nd、茶色 3rd、オレンジ 4番目、および青 5番目. CSS スタイルで「div」要素のランダム シーケンスを定義しましたが、出力には影響せず、スタイルで定義されたとおりに表示されます。
前のコード図とその Web ページ出力は、「order」プロパティ内で乱数を使用して「div」タグをランダムな位置に設定することを示しています。 「順序」プロパティのこれらの値は、単純な正の整数でした。 したがって、それらを使用しても問題はありません。 ユーザーが style タグで負の値を使用して order プロパティを設定しようとするとどうなりますか? これを試して結果を見てみましょう。 そのため、そのためにコードを更新しています。 style タグ内では、内側の「div」タグごとに「order」プロパティの値を更新しています。 茶色の場合は 3、青色の場合は -1 です。 緑の場合は 2 です。紫の場合は -2 です。 最後に、オレンジの場合は 0 です。これらの値は、メインの「div」要素のインデックスを定義します。 このコードを保存して見てみましょう。
この更新されたコードを Chrome ブラウザーで実行すると、以下に示す更新された出力結果が得られます。 「オレンジ」の div の order プロパティに 0 を定義したため、メインの div の中央に表示されています。 緑と茶色の「div」タグは、オレンジ色の「div」の右側に表示されます。 紫の div に -2 を使用し、青のタグに -1 を使用すると、負の整数のシーケンスに従って内側の「div」タグが表示されます。
結論
この記事では、HTML コードで「order」CSS プロパティを使用する方法について簡単に説明します。 このために、簡単な HTML コードの例を説明しました。 この例では、CSS プロパティの「順序」の概念を適切に説明するために「div」要素を使用しています。 order プロパティに正の整数値を使用する詳細な分析について説明し、同じプロパティに負の整数値を使用する場合と比較しました。
The post CSS オーダー appeared first on Gamingsym Japan.