CSSを使用してWebサイトの自己紹介セクションを作成する方法（セクション2）

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

序章

このチュートリアルでは、CSSを使用してデモンストレーションWebサイトの2番目のセクションを再作成します。サイズをパーソナライズしたい場合は、サミーの情報を自分の情報に自由に切り替えてください。ここで学習する方法は、他のCSS /HTMLWebサイトプロジェクトに適用できます。

サイトの2番目のセクションには、2つのコンテンツボックスが含まれています。1つはテキストを含み、もう1つは大きなプロフィール写真を含みます。

Screenshot of the second section of the website

前提条件

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

右側のコンテンツボックスに配置するには、プロフィール画像が必要です。プロフィール画像がない場合は、この画像をデモ用に使用できます。

注：大きなプロフィール画像をダウンロードするには、このリンクにアクセスし、画像のCTRL + Left Click（Macの場合）またはRight Click（Windowsの場合）をクリックします「名前を付けて画像を保存」を選択し、large-profile.jpegとしてimagesフォルダに保存します。

先に進む前に、選択した画像がimagesフォルダにlarge-profile.jpegとして保存されていることを確認してください。

テキストおよび画像コンテンツボックスのスタイルルールの作成

これらの2つのコンテンツボックスを作成するには、最初にstyles.cssファイルで、この目的のためにボックスのスタイルを設定する列クラスを定義します。次に、テキストと画像のコンテンツをHTMLドキュメントに追加します。

styles.cssファイルに戻り、次のルールセットをコピーしてファイルの下部に貼り付けます。

styles.css

. . .
/* Include padding and border in total box size*/
* {
  box-sizing: border-box;
}

/* Create two equal columns that float next to each other */
.column-2 {
  float: left;
  width: 45%;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  height: 475px;
  margin:30px;
  margin-right:30px;
  margin-bottom: 70px;
  background-color: #FEDE00;
  line-height:2;
}

先に進む前に、追加した各ルールセットを理解するために一時停止しましょう。

最初のルールセットは、「*」セレクターを使用して、ルールセットを allHTML要素およびクラスに適用する必要があることを示します。このルールセットは、box-sizingプロパティの値をborder-boxとして宣言します。これにより、CSS要素の計算された幅と高さの合計がincludeのパディングと境界線のサイズに調整されます。デフォルトでは、要素の幅と高さのサイズは、要素のcontentのみを参照します。 box-sizingプロパティをborder-boxに設定すると、要素の幅と高さの合計を簡単に調整でき、ページにコンテンツをレイアウトするときに役立ちます。 CSSボックスモデルの詳細については、チュートリアル CSSを使用してHTML要素のコンテンツ、パディング、境界線、およびマージンを調整する方法を参照してください。

2番目のルールセットは、「column-2」という名前の class を定義し、ページ上に2つの列を並べて表示できるサイズ指定を備えています。このクラスの名前はcolumn-2で、チュートリアルの後半でクラスを作成する他のサイズの列と区別されます。

このルールセットの値とプロパティの一部は、このチュートリアルシリーズではまだカバーされていません。

float:left;宣言は、要素が内部のコンテナ（この場合はビューポート自体）の左側に float するように指示し、周囲のコンテンツが右側に流れるようにします。 floatプロパティ値をrightまたはnoneに設定することもできますが、このチュートリアルではleft値を使用してデモWebサイトを再作成します。
width: 45%;宣言は、要素の幅をそのコンテナの幅（この場合はビューポート自体）の45% ofに設定します。サイズ（幅など）をピクセルではなくパーセンテージで設定すると、要素が配置されているコンテナのサイズに応じて要素のサイズを変更する場合に便利です。ただし、動的なサイズ設定は難しいプロセスになる可能性があることに注意してください。CSSで基盤を確立した後に実装できるレスポンシブ要素を作成するには、複数の方法があります。
background-color: #FEDE00;は、要素の背景色をHTMLカラーコード「＃FEDE00」に設定します。
line-height:2;は、行間の間隔を広げます。
他の宣言について詳しく知りたい場合は、コンテンツ、パディング、およびマージンのサイズの設定に関するこのチュートリアルシリーズの前のセクションを確認してください。

「自己紹介」コンテンツボックスの追加

次に、作成したcolumn-2クラスを使用して、「自己紹介」コンテンツボックスをWebページに追加します。 styles.cssファイルを保存して、index.htmlファイルに戻ります。次のコードafterを終了</div>タグをヘッダーセクションに追加し、before終了</body>タグを追加します。

. . .
<!--Section 2: About me-->

        <div class="column-2">
            <h1>About me</h1>
            <p>Hi! I'm Sammy the Shark, Senior Selachimorpha at DigitalOcean by day, dabbler in all things dev by night. This site is a demonstration website for the tutorial series "<a href="../how-to-build-a-website-with-css">How To Build a Website With CSS</a>," which walks you through building and customizing this website from start to finish.</p>
            <p>If you're following this tutorial series, you can replace this text with your own "About Me" content.</p>    
        </div>

. . .

ファイルを保存してブラウザにロードします。 HTMLファイルをロードする手順については、チュートリアルステップブラウザでオフラインHTMLファイルを表示する方法にアクセスしてください。

これで、テキストを含むWebページの左側に黄色のボックスが表示されます。

Webpage with yellow div box with un-styled text

このシリーズの前のチュートリアルCSSを使用してWebサイトのヘッダーセクションを構築する方法で追加したヘッダーコンテンツがWebページに含まれている必要があることに注意してください。

このHTMLコードがどのように機能しているかを簡単に確認しましょう。

このコードスニペットの最初の行（）は、HTMLコンテンツの整理に役立つコメントです。ブラウザには表示されず、後で参照できるようにここに含まれています。
次のコード行（<div class="column-2" style="background-color:#FEDE00;">）は、<div>コンテナーを作成し、styles.cssファイルで定義したcolumn-2クラスのスタイルを割り当て、 HTMLインラインstyle属性を使用して、背景色#FEDE00を割り当てます。
次の<h1>および<p>タグには、[自己紹介]テキストボックスに挿入するテキストが含まれています。このテキストの最後にある<div>コンテナを閉じていることに注意してください。 Webサイトをパーソナライズする予定がある場合は、Sammyのテキストを独自のテキストに切り替えることができます。

プロフィール画像コンテンツボックスの追加

次に、大きなプロフィール画像を含む2番目のコンテンツボックスを追加します。画像ボックスを追加する方法はいくつかありますが、このチュートリアルでは、column-2が割り当てられた別の<div>コンテナの背景画像にすることで、大きなプロフィール画像を追加します。クラス。

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

styles.css

. . .
/* Large profile image */
.large-profile {
  background: url('../images/large-profile.jpeg');
  background-size: cover;
  background-position: center;
}

このコードスニペットでは、CSSルールを整理するためのコメントを追加し、大きなプロファイル画像を保持するボックスのスタイルを設定するために使用する新しいクラスlarge-profileを作成および定義しました。このルールセットでは、background: url('images/large-profile.jpeg');宣言は、指定されたファイルパスで見つかった画像を要素の背景画像として使用するようにブラウザに指示します。 background-size: cover宣言は、画像が配置されているコンテナのスペースをカバーするように画像に適合します。background-position:center宣言は、画像をコンテナ内の中央に配置します。

次に、column-2クラスとlarge-profileクラスの両方が割り当てられた<div>コンテナを追加して、大きなプロファイル画像でボックスを再作成します。

styles.cssファイルを保存して、index.htmlファイルに戻ります。次のコードスニペットを、最初の列の終了</div>タグの下、および終了</body>タグの上に追加します。

. . .
  <div class="column-2 large-profile">
  </div>

このコードスニペットは、column-2クラスおよびprofile-pictureクラスで宣言されたルールに従ってスタイル設定された<div>コンテナーを作成します。

両方のファイルを保存し、ブラウザにindex.htmlをリロードします。これで、WebページにデモWebサイトでスタイル設定されたテキストボックスと画像ボックスが表示されます（このチュートリアルの最初の画像に示されています）。 Webページには、前のチュートリアルで作成したヘッダーコンテンツも含まれている必要があることに注意してください。 column-2およびprofile-largeクラスで宣言された値の実験を続けて、さまざまな設計の可能性を探ることができます。

結論

これで、CSSを使用してテキストと画像のコンテンツボックスを作成し、スタイルを設定しました。次のチュートリアルでは、Webサイトの3番目のセクションを再作成します。このプロセスでは、コンテンツを4つのボックスの2行に配置し、疑似クラスを適用して、ユーザーがカーソルでボックスにカーソルを合わせたときにボックスの色を変更します。

getdocs

13036