HTMLを使用してWebページにフッターを追加する方法
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>
ファイルを保存して、ブラウザにリロードします。 これで、このチュートリアルの上部に示されているデモサイトと同じ方法でフッターのスタイルが設定されているはずです。
このチュートリアルでは、フッターを作成してスタイルを設定する方法を学びました。 このチュートリアルシリーズの要素を使用して、さまざまな種類のコンテンツとスタイルをフッターに追加する方法を検討できます。