HTMLを使用してWebページにフッターを追加する方法

Webサイトのフッターは、Webページの下部にあるコンテンツの最後のブロックです。 フッターには、テキスト、画像、リンクなど、あらゆる種類のHTMLコンテンツを含めることができます。 このシリーズの最後のチュートリアルでは、<footer>要素を使用して、Webページ用に次の基本的なフッターを作成します。

開始するには、</div>タグを閉じた後、</body>タグを閉じる前に次のコードスニペットを貼り付けます。

. . .
<!--Footer--> 
<footer style="height:auto; background-color:#F7C201;">
  <h1><Made with 🤍 at DigitalOcean</h1>
</footer>
. . .

このスニペットでは、<!--Footer-->は、ブラウザによって読み取られないコメントであり、人間が読みやすいようにhtmlファイルを整理するために使用されます。 このコメントの下に、<footer>要素を追加し、その背景色を指定し、style属性を使用して高さを設定し、内部のコンテンツに自動的に調整しました。 <footer>要素は、 semantic 要素であり、その名前が開発者にコンテンツの目的を示します。 これは、開発者だけでなく、スクリーンリーダーを使用するサイト訪問者にも役立ちます。 それ以外の場合は、<footer> 要素は同じように機能しますhow-to-use-a-div-the-html-content-division-element

エレメント 。 <h1>要素内にテキストコンテンツと絵文字も追加しました。 このテキストの内容は、お好みのメッセージと絵文字で自由に変更してください。

ファイルを保存し、ブラウザにリロードして結果を確認します。 次のようなものを受け取るはずです。

フッターのコンテンツは、デモサイトのものとはまったく異なることに注意してください。 フッターのコンテンツには白い下余白があり、テキストのスタイルは異なります。 下余白を削除してテキストのスタイルを設定するには、次のように、強調表示された属性を<h1>要素に追加します。

<h1 style="color:white; padding:40px; margin:0; text-align:center;"Made with 🤍 at DigitalOcean</h1>

ファイルを保存して、ブラウザにリロードします。 これで、このチュートリアルの上部に示されているデモサイトと同じ方法でフッターのスタイルが設定されているはずです。

このチュートリアルでは、フッターを作成してスタイルを設定する方法を学びました。 このチュートリアルシリーズの要素を使用して、さまざまな種類のコンテンツとスタイルをフッターに追加する方法を検討できます。