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

投稿日: 2022-10-23 2022-10-23
タグ: css, Spin Up

序章

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、ブラウザのビューポートの左からゼロピクセルおよび下からゼロピクセルの位置を指定します。

これらの値を変更することにより、ページ上の要素の位置を変更できます。ただし、ゼロ以外の値には、 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を使用して3つのソーシャルメディアアイコンを追加しました <img> タグを付け、HTMLを使用して各画像をリンクします <a> 鬼ごっこ。

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

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

結論

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

getdocs

13036

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

序章

前提条件

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

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

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

結論

getdocs

序章

前提条件

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

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

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

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

結論

getdocs