CSSを使用してタイルレイアウトを作成する方法（セクション3）
序章
このチュートリアルでは、8つのHTML <div>コンテナをCSSクラスでスタイリングすることにより、デモンストレーションWebサイトの「プロジェクト」セクションのタイルレイアウトを再作成します。 また、これらの要素にhover疑似クラスを追加して、ユーザーが要素にカーソルを合わせたときに色が変わるようにします。 サイズをパーソナライズしたい場合は、サミーの情報を自分の情報に自由に切り替えてください。 ここで使用するメソッドは、他のCSS /HTMLWebサイトプロジェクトに適用できます。
前提条件
このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。
ヘッダータイトルの追加とスタイリング
開始するには、前のチュートリアルから追加したコンテンツを削除しないように注意しながら、見出しタイトル「プロジェクト」をWebページの新しいセクションに追加します。 index.htmlファイルの最後の終了</div>タグの後に、次のコードスニペットを追加します。
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つの列を並べて表示できるようにする値を指定しました。
float: left;宣言は、要素が内部のコンテナー（この場合はWebページ）の左側に float するように指示し、周囲のコンテンツ（この場合は他のプロジェクトボックス）を休ませます。その右側に。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ファイルを保存し、ブラウザにリロードします。 次の画像のような出力を受け取るはずです。
class属性で割り当てられたcolumn-4およびproject-xクラスに従ってそれぞれスタイルが設定された、4つのボックスの2つの行が必要です。 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;
}
このコードスニペットでは、8つのプロジェクトクラスのうち6つに対してhoverクラスを作成しました。 このhoverクラスは、ユーザーがボックスの上にカーソルを置くと、その色をHTMLカラーコード#FEDE00に変更するように要素に指示します。 テキストを含むプロジェクトボックスにのみホバークラスを追加したことに注意してください（背景画像を含むプロジェクトボックスには追加していません）。
styles.cssファイルを保存し、ブラウザにindex.htmlをリロードします。 プロジェクトボックスにカーソルを合わせて、hover疑似クラスが機能していることを確認します。 カーソルがそれらの上を通過すると、色が変わるはずです。
結論
これで、CSSクラスを使用してHTMLコンテンツをボックスにレイアウトし、hover疑似クラスを追加して、ユーザーのカーソルがそれらの上に置かれたときの外観を変更しました。 これらのクラスのスタイル宣言を変更するか、ページのレイアウトを整理するために使用するボックスのサイズと数量を変更することで、これらのメソッドを引き続き試すことができます。
次のチュートリアルでは、HTMLテーブルを使用して「雇用」セクションをWebサイトに追加します。
