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

開始するには、終了後に次のコードスニペットを貼り付けます </div> タグを付けて閉じる前に </body> 鬼ごっこ：

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

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

エレメント 。

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

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

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

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

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

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