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

序章

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

前提条件

このチュートリアルに従うには、このシリーズの前のチュートリアル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ページにタイトル、サブタイトル、プロフィール画像、背景画像が表示されます。

この画像は、デモサイトのプロフィール画像と同じスタイルではないことに注意してください。デモンストレーションサイトでプロフィール画像の形状、サイズ、境界線を再現するには、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] 、navy、blue、maroon、およびaqua）を使用して、このプロパティの色の値を変更します。
margin:30px;宣言は、要素の周囲とビューポートまたは周囲の要素の周囲との間に30ピクセルのマージンを作成します。
font-size:20px;宣言は、タイトルとサブタイトルの両方のサイズを大きくします。

styles.cssファイルを保存します。次に、このheaderクラスをヘッダーコンテンツに適用します。 index.htmlページに戻り、headerクラスが割り当てられた<div>タグでヘッダーコンテンツ（既にファイルに追加したもの）をラップします。

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

index.htmlファイルを保存し、ブラウザにリロードします。これで、タイトル、サブタイトル、プロフィール画像は、headerクラスで宣言したルールに従って、<div>コンテナ内でスタイル設定されます。

結論

これで、HTMLとCSSを使用して、WebページにデモWebサイトのヘッダーセクションが再作成されました。 <div>コンテナとCSSクラスを使用して、タイトル、サブタイトル、プロフィール画像を追加してスタイルを設定しました。興味がある場合は、ヘッダーコンテンツのCSSルールを変更することで、デザインの可能性を引き続き検討できます。

準備ができたら、次のチュートリアルに進み、デモサイトの2番目のセクションを再作成します。