CSSを使用してタイルレイアウトを作成する方法（セクション3）

投稿日: 2022-04-20 2022-10-13
タグ: css, Spin Up

序章

このチュートリアルでは、8つのHTMLをスタイリングして、デモンストレーションWebサイトの「プロジェクト」セクションのタイルレイアウトを再作成します。 <div> CSSクラスを持つコンテナー。また、を追加します hover これらの要素に疑似クラスを設定して、ユーザーが要素にカーソルを合わせたときに色が変わるようにします。サイズをパーソナライズしたい場合は、サミーの情報を自分の情報に自由に切り替えてください。ここで使用するメソッドは、他のCSS /HTMLWebサイトプロジェクトに適用できます。

前提条件

このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。

ヘッダータイトルの追加とスタイリング

開始するには、前のチュートリアルから追加したコンテンツを削除しないように注意しながら、見出しタイトル「プロジェクト」をWebページの新しいセクションに追加します。最後のクロージングの後に次のコードスニペットを追加します </div> のタグ index.html ファイル：

index.html

. . .
<!--Section 3: Projects-->

  <h2 >Projects</h2>
. . .

このコードスニペットの最初の行は、Webサイトの3番目のセクションを作成するために追加するコードにラベルを付けるためのコメントです。コメントは、後で参照できるようにコードの説明文を保存するために使用され、サイトの訪問者にはブラウザによって表示されません（Webページのソースコードを表示しない限り）。 2行目は、タイトルテキスト「Projects」を追加し、それに見出し要素を割り当てます <h2>.

次に、見出しのタイトルを作成してスタイルを設定します section-heading クラス。に戻る styles.css ファイルを作成し、次のコードスニペットをコピーしてファイルの下部に貼り付けます。

styles.css

. . .

/*  Section 3  */

.section-heading {
  text-align:center;
  color:#102C4E;
  margin-top: 150px;
  margin-bottom:70px;
  font-size: 35px;
}

このコードスニペットは、 section-heading クラス。コンテンツ、パディング、およびマージンのサイズの設定については、このチュートリアルシリーズの前のセクションを確認してください。

次に、HTMLファイルのヘッダータイトル「Projects」に「section-heading」クラスを追加します。に戻る index.html 次のようにファイルを作成し、クラスをHTML要素に追加します。

index.html

<!--Section 3: Projects—>

  <h2 class="section-heading">Projects</h2>

両方のファイルを保存し、ブラウザにWebページをロードします。 HTMLファイルをロードする手順については、チュートリアルステップブラウザでオフラインHTMLファイルを表示する方法にアクセスしてください。これで、ヘッダーがページの中央に配置され、次の画像のようにサイズ、位置、色が調整されます。

タイルプロジェクトボックスの追加とスタイリング

次に、セクションヘッダーの下に8つのプロジェクトボックスを追加します。開始するには、スタイルを設定できるCSSクラスを作成します <div> それらの4つがWebページに並べて収まるようにする方法でコンテナ。

に戻る styles.css ファイルを作成し、ドキュメントの下部に次のコードスニペットを追加します。

styles.css

. . .
/* Sizing for Project Containers  */

.column-4 {
  float: left;
  width: 21%;
  padding: 10px;
  margin:20px;
  height: 250px;
}

このコードスニペットでは、クラスを定義しました column-4 ページ上に4つの列を並べて表示できるようにする指定値：

The float: left; 宣言は、要素が内部のコンテナ（この場合はWebページ）の左側に float するように指示し、周囲のコンテンツ（この場合は他のプロジェクトボックス）を右側に置きます。
The width: 21%; 宣言は、要素の幅をそのコンテナ（この場合はWebページ）の幅の21% ofに設定します。ピクセルではなくパーセンテージでサイズ（幅など）を設定すると、要素が内部のコンテナーのサイズに応じてサイズ変更される場合に役立ちます。ただし、動的なサイズ設定は難しいプロセスになる可能性があることに注意してください。CSSで基盤を確立した後に実装できる、応答性の高い要素を作成する方法は複数あります。
他の宣言について詳しく知りたい場合は、コンテンツ、パディング、およびマージンのサイズの設定に関するこのチュートリアルシリーズの前のセクションを確認してください。

次に、8つのボックスの各のクラスを作成して、スタイルを変えたり、デモサイトに合わせて最初と最後のボックスに注目の画像を追加したりします。開始するには、画像フォルダに注目の画像として使用する1つまたは2つの画像を保存します。画像がない場合は、デモサイトで使用した右向きロボットと左向きロボットの画像をダウンロードできます。

注：ロボット画像をダウンロードするには、リンクにアクセスしてクリックします CTRL + Left Click （Macの場合）または Right Click （Windowsの場合）画像上で[名前を付けて画像を保存]を選択し、名前を付けて保存します project-left.jpeg および「project-right.jpeg」を画像フォルダに追加します。

プロジェクトボックスごとにクラスを作成するには、次のコードスニペットをプロジェクトボックスの下部に追加します。 styles.css ファイル：

styles.css

. . .

/* Color and Images for Project Containers  */

.project-1 {
  background: url('../images/project-left.jpeg');
  background-size: cover;
}

.project-2 {
  background-color:white;
}

.project-3 {
  background-color:#209BFF;
}

.project-4 {
  background-color:#112d4e;
}

.project-5 {
  background-color:#F9F7F7;
}

.project-6 {
  background-color:#209BFF;
}

.project-7 {
    background-color:#ffffff00;
}

.project-8 {
  background: url('../images/project-right.jpeg');
  background-size: cover;
}

独自の画像を使用している場合は、画像を画像フォルダに保存し、クラスのルールセットの強調表示された領域に正しいファイルパスを指定していることを確認してください。 project-1 とクラス project-8.

少し間を置いて、今書いたコードを確認しましょう。クラスのルールセット project-1 と project-8、背景画像を追加し、そのファイルパスの場所を指定し、要素全体を「カバー」するために背景画像を合わせる必要があることを宣言しました。

のルールセットで project-2 終えた project-7、HTMLカラーコードを使用してさまざまな背景色を指定しました。の背景色を透明にしたことに注意してください project-7 デザインの選択としてですが、必要に応じてこれを変更できます。また、これらのクラスの値を試して、これらのクラスごとに異なる背景画像と色を調べることもできます。

次に、これらのプロジェクトボックスに追加されるテキストのフォントサイズと位置を変更するルールセットを追加します。次のルールセットをの下部に追加します styles.css ファイル：

styles.css

. . .
.project-text {
  text-align:center;
  font-size:50px;
}

あなたの styles.css ファイル。今、あなたは追加します <div> コンテナをHTMLドキュメントに追加し、定義したCSSクラスでスタイルを設定します。に戻る index.html ファイルを作成し、この行の下に次のコードスニペットを追加します。 <h2 class="section-heading">Projects</h2>:

index.html

. . .
<div class="column-4 project-1">
</div>

<div class="column-4 project-2">
  <h2 class="project-text">WEB <br>DESIGN</h2>
</div>

<div class="column-4 project-3">
  <h2 class="project-text">CHAT <br>BOTS</h2>
</div>

<div class="column-4 project-4">
  <h2 class="project-text">GAME <br> DESIGN</h2>
</div>

<div class="column-4 project-5">
  <h2 class="project-text">TEXT <br> ANALYSIS</h2>
</div>

<div class="column-4 project-6">
  <h2 class="project-text">JAVA <br> SCRIPT</h2>
</div>

<div class="column-4 project-7">
  <h2 class="project-text">DATA <br> PRIVACY</h2>
</div>

<div class="column-4 project-8">
</div>

あなたの index.html ファイルを作成し、ブラウザにリロードします。次の画像のような出力を受け取るはずです。

4つのボックスが2行あり、それぞれが次のようにスタイル設定されている必要があります。 column-4 と project-x class属性で割り当てられたクラス。 HTMLコードでは、テキストコンテンツ（「チャットボット」など）も追加し、すべてのテキストコンテンツにクラスを割り当てています。 project-text.

HTMLの改行要素も追加しました（<br>）各ボックスの2つの単語の間に改行を作成します。 Webサイトをパーソナライズしたい場合は、このテキストを今すぐまたは後で自由に変更してください。 HTMLハイパーリンク要素を使用することもできます <a> このテキストをWebサイト用に作成した新しいページにリンクします。このオプションについては、チュートリアルシリーズの最後で詳しく説明します。

次に、疑似クラスを追加して、ユーザーがボックスの上にカーソルを置いたときにボックスの色を変更します。

ユーザーインタラクションによるコンテンツの色の変更

デモンストレーションWebサイトに戻り、[プロジェクト]セクションのボックスにカーソルを合わせると、色が変わることがわかります。この色の変化は、 hover 各プロジェクトクラスへの疑似クラス。

このシリーズの前半で疑似クラスのチュートリアルに従ったことを思い出すかもしれませんが、疑似クラスは、変更しようとしているクラスの名前にコロンと疑似クラス名を追加することによって作成されます。追加するには :hover プロジェクトクラスに疑似クラスを追加し、下部に次のルールセットを追加します styles.css ファイル：

styles.css

. . .

/* Hover classes for individual project boxes */

.project-2:hover {
  background-color:#FEDE00;
}

.project-3:hover {
   background-color: #FEDE00;
}

.project-4:hover {
   background-color: #FEDE00;
}

.project-5:hover {
   background-color: #FEDE00;
}

.project-6:hover {
   background-color: #FEDE00;
}

.project-7:hover {
   background-color: #FEDE00;
}

このコードスニペットで作成した hover 8つのプロジェクトクラスのうち6つのクラス。これ hover classは、要素の色をHTMLカラーコードに変更するように要素に指示します #FEDE00 ユーザーがボックスの上にカーソルを置いたとき。テキストを含むプロジェクトボックスにのみホバークラスを追加したことに注意してください（背景画像を含むプロジェクトボックスには追加していません）。

を助けて styles.css ファイルとリロード index.html ブラウザで。確認してください hover 疑似クラスは、プロジェクトボックスにカーソルを合わせると機能します。カーソルがそれらの上を通過すると、色が変わるはずです。

結論

これで、CSSクラスを使用してHTMLコンテンツをボックスにレイアウトし、 hover 疑似クラス。ユーザーのカーソルがそれらの上にあるときに外観を変更します。これらのクラスのスタイル宣言を変更するか、ページのレイアウトを整理するために使用するボックスのサイズと数量を変更することで、これらのメソッドを引き続き試すことができます。

次のチュートリアルでは、HTMLテーブルを使用して「雇用」セクションをWebサイトに追加します。

getdocs

13036