HTMLとCSSを使用して静的フッターを作成する方法（セクション7）

序章

CSSシリーズの最後のチュートリアルでは、訪問者がページを下にスクロールしても、ビューポートの下部の固定位置にとどまる静的フッターを作成します。このチュートリアルでは、デモンストレーションWebサイトでフッターを再作成しますが、これらの方法を他のWebサイトプロジェクトにも使用できます。

前提条件

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

このチュートリアルでは、フッターのコンテンツとしていくつかのソーシャルメディアアイコンを使用します。これらのアイコンを使用する場合は、デモサイトから今すぐダウンロードして、次のように画像フォルダに保存してください。

「twitter.jpeg」
「github.jpeg」
「email.jpeg。」

これらの画像をダウンロードするには、上のリンクされたファイル名をクリックし、画像にカーソルを合わせてCTRL + Left Click（Macの場合）またはRight Click（Windowsの場合）をクリックし、[名前を付けて画像を保存]を選択します。指示されたファイル名の画像をimagesフォルダーに保存します。

アイコンを保存したら、次のセクションに進むことができます。

フッターのスタイルを設定するクラスの追加

まず、styles.cssファイルの下部に次のコードスニペットを追加して、「フッター」クラスを定義します。

styles.css

. . .

/* Footer */

.footer {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height: 90px;
  background-color: #D0DAEE;
}

styles.cssファイルを保存します。このコードスニペットでは、フッターセクションのCSSコードにラベルを付けるコメントを追加しました。次に、footerという名前のクラスを定義し、いくつかのスタイルルールを宣言しました。最初のルールは、positionをfixed,として宣言します。これは、ユーザーがページを下にスクロールしても、要素が指定した場所から移動しないことを意味します。この場所は、次の2つの宣言bottom:0とleft:0で指定されます。これは、左から0ピクセル、下から0ピクセルの場所を指定します[X179X ]ブラウザのビューポートの。

これらの値を変更することにより、ページ上の要素の位置を変更できます。ただし、ゼロ以外の値には、数値の後にpxサフィックスを含める必要があることに注意してください。ルールセットは、footerクラスの幅、高さ、および背景色も指定しました。

これで、このチュートリアルの次のセクションでフッターコンテンツを追加する準備が整いました。

フッタークラスでスタイル設定されたフッターを追加する

フッターコンテンツを追加するには、<div>コンテナーをWebページに追加し、作成したフッタークラスを割り当てます。 index.htmlファイルに戻り、最後に閉じた</div>タグの終わりの後に次のコードスニペットを貼り付けます。

index.html

. . .

<!--Section 7: Footer-->

<div class="footer">
</div>

index.htmlファイルを保存し、ブラウザにリロードします。（HTMLファイルをロードする手順については、チュートリアルステップブラウザでオフラインHTMLファイルを表示する方法を参照してください）。これで、Webページの下部に空のフッターセクションが表示され、ページを上下にスクロールしてもその場所に留まります。

次に、新しく作成したフッターにコンテンツを追加します。

フッターにメニュー項目を追加してスタイルを設定する方法

このステップでは、フッターの左側にメニュー項目を追加してスタイルを設定します。これらのメニュー項目は、サイトの他のページにリンクするために使用できます。現在、サイトにはWebページが1つしかないため、デモ用に提供されているリンクを使用できます。後で、Webサイトにページを追加する場合は、ここでメニュー項目を作成し、正しいリンクを追加できます。 HTMLを使用してWebサイトを構築する方法のこのチュートリアルで、新しいWebページを作成してリンクする方法を学ぶことができます。

styles.cssファイルに戻り、ファイルの最後に次のコードスニペットを追加します。

styles.css

. . .

.footer-text-left {
  font-size:25px;
  padding-left:40px;
  float:left;
  word-spacing:20px;
}

a.menu:hover {
  background-color:yellow;
  font-size:20px;
}

少し間を置いて、作成した各ルールセットを確認しましょう。

最初のルールセットは、メニュー項目のテキストのスタイル設定に使用されるfooter-text-leftという名前のクラスを定義します。 floatプロパティをleftに設定していることに注意してください。これにより、このクラスに割り当てられたテキストがページの左側に表示されます。また、word-spacingプロパティを使用して、メニュー項目の間に余分なスペースを与えています。メニュー項目のいずれかが複数の単語である場合は、（単語の間隔の値を変更するだけでなく）メニュー項目のスタイルを設定するためのクラスを作成する必要があります。
2番目のルールセットは、hover疑似クラスを使用して、ユーザーがテキストの上にカーソルを置くと、テキストに黄色の背景色を追加します。

次に、メニュー項目をWebページに追加します。 index.htmlファイルに戻り、作成済みのフッターコンテナ内に次の強調表示されたコードスニペットを追加します。

index.html

. . .

<div class="footer">
  <p class="footer-text-left">
    <a href="index.html" class="menu">home</a>
    <a href="https://css.sammy-codes.com/about.html" class="menu">about</a> 
    <a href="https://css.sammy-codes.com/credits.html" class="menu">credits</a>
  </p>
</div>

このコードスニペットは、2つのメニュー項目（「about」と「credits」）を追加し、これらのメニュー項目をリンクし、作成したfooter-text-leftおよびa.menuクラスでテキストのスタイルを設定します。

両方のファイルを保存し、ブラウザでWebページをリロードします。次のようなものを受け取るはずです。

ソーシャルメディアアイコンの追加

次に、ソーシャルアイコンをフッターに追加します。これを使用して、ソーシャルメディアアカウントにリンクできます。さまざまなソーシャルメディアプラットフォームでアイコンを使用する場合は、Webで無料のアイコンを検索し、imagesフォルダーにダウンロードできます。 styles.cssファイルに戻り、ファイルの最後に次の3つのルールセットを追加します。

styles.css

. . .

.footer-content-right {
  padding-right:40px;
  margin-top:20px;
  float:right;
}

.icon-style {
  height:40px;
  margin-left:20px;
  margin-top:5px;
}

.icon-style:hover {
  background-color:yellow;
  padding:5px;
}

各ルールセットを確認するために一時停止しましょう。

最初のルールセットは、クラスfooter-content-rightを定義し、それに特定のパディング、マージン、およびフロート値を割り当てます。このルールセットを使用して、ソーシャルメディアアイコンを保持する<div>要素のスタイルを設定します。
2番目のルールセットは、ソーシャルメディアアイコンのサイズと位置に高さとマージンの値を提供するクラスicon-styleを作成します。
3番目のルールセットは、hover疑似クラスを使用して、ユーザーがテキストの上にカーソルを置くと、アイコンに黄色の背景を追加します。

styles.cssファイルを保存します。次に、ソーシャルメディアアイコンをフッターに追加します。 index.htmlファイルに戻り、メニュー項目の</a>タグを最後に閉じた後に次のコードスニペットを追加します。

index.html

. . .

...
<div class="footer-content-right">
  <a href="https://github.com/digitalocean"><img src="images/github.jpeg" class="icon-style" alt="Github icon"></a>
  <a href="https://www.twitter.com/DigitalOcean"><img src="images/twitter.jpeg" class="icon-style" alt="Twitter icon"></a>
  <a href="https://www.twitter.com"><img src="images/email.jpeg" class="icon-style" alt="Emailicon"></a>
</div>

ファイルパスとリンクを自分のソーシャルメディア情報に変更してください。

このコードスニペットは、<div>コンテナを作成し、footer-content-rightクラスのスタイルが割り当てられます。このdivコンテナ内に、HTML <img>タグを使用して3つのソーシャルメディアアイコンを追加し、HTML<a>タグを使用して各画像をリンクしました。

alt属性を使用して、各アイコンを説明する代替テキストも追加しました。 Webサイトを作成するときは、スクリーンリーダーを使用する個人がサイトにアクセスできるように、すべての画像に代替テキストを追加する必要があります。 HTMLで代替テキストを使用する方法の詳細については、ガイドHTMLを使用してWebページに画像を追加する方法の代替テキストのセクションを参照してください。

index.htmlファイルを保存し、ブラウザにリロードします。これで、アカウントにリンクする3つのソーシャルメディアアイコンが右側にある固定フッターが作成されます。ユーザーがリンクにカーソルを合わせると、リンクの色が変わるはずです。結果を確認するために、このチュートリアルの冒頭にあるgifと比較することができます。

結論

これで、訪問者がページを下にスクロールしても、ビューポートの下部の固定位置にとどまる静的フッターが作成されました。作成したCSSクラスの値を変更するか、index.htmlファイルにさまざまな種類のコンテンツを追加することで、フッターのデザインとコンテンツの可能性を引き続き検討できます。ウェブサイトのデザインとレイアウトの可能性を探るアイデアについては、このチュートリアルシリーズの結論に、コンテンツセクションの再配置、他のページへのリンクの追加、ボックスを使用したレイアウトスタイルの変更などのヒントがあります。モデル。