CSSを使用してWebサイトのヘッダーセクションを構築する方法（セクション1）

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

序章

このチュートリアルでは、HTMLとCSSを使用して、デモンストレーションWebサイトの上部ヘッダーセクションを再作成します。サイズを実験したり、パーソナライズしたい場合は、サミーの情報を自分の情報に切り替えることができます。ここで使用するメソッドは、他のCSS /HTMLWebサイトプロジェクトに適用できます。

Screenshot of header section of demonstration website

前提条件

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

Webページのヘッダーにタイトルとサブタイトルを追加する

当社のウェブサイトのヘッダーには、タイトル（“ Sammy the Shark”）、サブタイトル（“ SENIOR SELACHIMORPHA AT DIGITALOCEAN”）、および小さなプロフィール画像が含まれています。これらの要素は、CSSスタイルシートで定義されたクラスでスタイル設定された<div>コンテナー内にラップされます。このセクションを再作成するには、テキストと画像のコンテンツを追加し、<div>コンテナのクラスを作成してから、新しく作成されたコンテナに割り当てられた<div>コンテナにテキストと画像のコンテンツをラップします。クラス。

サイトにタイトルとサブタイトルを追加するには、index.htmlファイルの開始タグと終了タグの間に次の強調表示されたコードスニペットを追加します。サイトをパーソナライズしたい場合は、サミーの情報を自分の情報に切り替えてください。

index.html

. . .

<body>

<!--Header content-->
   <h1>Sammy the Shark<h1>
   <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
</body>

このコードスニペットでは、タイトルSammy the Sharkを追加し、このWebページの最も重要な見出しである<h1>見出しタグを割り当てています。また、サブタイトルSENIOR SELACHIMORPHA AT DIGITALOCEANを追加し、<h5>見出しタグを割り当てました。これは、それほど重要ではない見出しだからです。

タイトルの直前にコメントも追加していることに注意してください。コメントは、後で参照できるようにコードの説明文を保存するために使用され、サイトの訪問者にはブラウザによって表示されません（Webページのソースコードを表示しない限り）。 HTMLでは、上記のコードスニペットに示されているように、コメントはの間に書き込まれます。コメントは必ず終了コメントタグ（-->）で閉じてください。そうしないと、すべてのコンテンツがコメント化されます。

Webページヘッダーへの小さなプロファイル画像の追加とスタイリング

次に、ヘッダーセクションに小さなプロフィール画像を追加します。サイトに含めるプロフィール写真を選択します。プロフィール写真がない場合は、別の画像（ Sammy のプロフィール画像など）を使用するか、Getavataaars.comなどのサイトからアバターを作成できます。

画像を選択したら、imagesフォルダにsmall-profile.jpegとして保存します。

次に、<img>タグと、プロファイル画像のファイルパスに割り当てられたsrc属性を使用して、プロファイル画像をWebページに追加します。次の強調表示されたコードスニペットをindex.htmlファイルの行の直後、<h1>Sammy the Shark<h1>行の前に追加します。

index.html

. . .

  <body>
  
  <!--Header content-->
       <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
       <h1>Sammy the Shark<h1>
       <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
   </body>
</html>

ファイルを保存してブラウザにロードします。これで、Webページにタイトル、サブタイトル、プロフィール画像、背景画像が表示されます。

Webpage with profile image, title, and subtitle

この画像は、デモサイトのプロフィール画像と同じスタイルではないことに注意してください。デモンストレーションサイトでプロフィール画像の形状、サイズ、境界線を再作成するには、styles.cssファイルに次のルールセットを追加します。

styles.css

. . .
/*Top header profile image*/
.profile-small {
   height:150px;
   border-radius: 50%;
   border: 10px solid #FEDE00;
}

先に進む前に、追加したコードの各行を確認しましょう。

/*Top header profile image*/は、コードにラベルを付けるためのCSSコメントです。
テキスト.profile-smallは、ルールセットで定義しているクラスの名前を示しています。このクラスは、次のステップでプロファイル画像に適用されます。
宣言height:150px;は、画像の高さを150ピクセルに設定し、画像サイズの比率を維持するために幅を自動的に調整します。
宣言border-radius: 50%;は、画像のエッジを円形に丸めます。
宣言border: 10px solid #FEDE00;は、画像に幅10ピクセル、HTMLカラーコード#FEDE00の実線の境界線を与えます。

ファイルを保存してindex.htmlファイルに戻り、profile-smallクラスを<img>タグに次のように追加します。

index.html

. . .
       <img src="images/small-profile.jpeg" class="profile-small" alt="Sammy the Shark, DigitalOcean’s mascot">
. . .

ファイルを保存して、ブラウザにリロードします。これで、プロフィール画像の高さが150ピクセル、円形、黄色の境界線になります。

次のステップでは、タイトル、サブタイトル、プロフィール画像全体に追加のスタイルを適用します。

CSSを使用したヘッダーコンテンツのスタイリングと配置

次に、CSSを使用して class を定義し、ヘッダーコンテンツのスタイルと位置を設定します。 styles.cssファイルに戻り、次のCSSルールセットを追加してheaderクラスを作成します。

styles.css

. . .
/* Header Title */
.header {
  padding: 40px;
  text-align: center;
  background: #f9f7f7;
  margin:30px;
  font-size:20px;
}

追加したコードの各行を理解するために、少し一時停止してみましょう。

/* Header Title */はコメントであり、ブラウザには表示されません。
テキスト.headerは、このルールセットを使用して作成および定義しているクラスセレクターの名前です。
padding: 40px;宣言は、コンテンツと要素の境界線の間に40ピクセルのパディングを作成します。
text-align: center;宣言は、コンテンツを要素の中央に移動します。値をleftまたはrightに調整して、それに応じてテキストを揃えることもできます。
background: #f9f7f7;宣言は、デモWebサイトで使用されている特定のHTMLカラーコードに色を設定します。このチュートリアルでは、このチュートリアルシリーズのHTMLカラーコードについては説明しませんが、HTMLカラー名（black、white、gray、silver、 purple、red、fuchsia、lime、olive、green、yellow、[ X238X]

getdocs

13036