ヘッダーとフッターの位置を決めよう!

はじめに

皆様、お疲れ様です。
プログラミングスクールADVANCEの福島です。

Scratchが小学校の授業にも導入されるようになり、Scratchでのゲームクリエイターが増えてきました。
そして、来年以降は中学校・高等学校でもプログラミングの授業を追加することが予定されています。

ということで、僕の担当回ではScratchより難しい、文字で作成する本格派プログラミングを担当させていただきますので、よろしくお願いしますね♪

※当校の授業・ブログでは「VSCode」を使った説明をさせていただくことになりますので、インストールをお勧めします。
インストール手順はこちらをご覧ください。

※当ページに関係のある過去記事は以下の通りですので、先にご覧いただくことをお勧めします。
HTMLの基礎  CSSの基礎  名前の指定  ショートカットキー  ヘッダー   フッター

今回の内容

今回は、ヘッダーとフッターの位置を指定する方法を学んでいきましょう。

ヘッダーとフッターの位置について

今まで続けて読んでくださっている方は、これまでにヘッダーフッターがどういうものかを学んできましたよね。
今回は、それらを表示する位置を決めたいと思います。

結論から言うと、一般的にヘッダーはページ上部に設置しフッターはページ下部に設置します。
これは、それぞれの由来がHead(頭)とFoot(足)となっているからです。

また、ヘッダーとフッターの間に本文が挟まるわけですが、今回はそちらの位置も調整していきます。

実際にコーディング!

位置の指定には、positionを使用します。
実際の動作は以下の動画をご覧ください。

以下のコードをコピペしてもOKです♪

header {
  background-color: lime;
  /* 絶対位置にする */
  position: absolute;
}

.contents {
  border: 1px solid;
  /* 相対位置にして、上から50px分ずらす */
  position: relative;
  top: 50px;
}

h1{
  background-color: aquamarine;
}

p {
  background-color: tomato;
}

footer {
  background-color: plum;
  /* 絶対位置にして、ページの一番下で固定する */
  position: fixed;
  bottom: 0px;
}

以下のzipファイルにhtmlファイルや解説等の必要データをまとめていますので、ダウンロードして同じ様に動かしてみましょう。

今回は《style.html》というファイルを用意していますので、動画と同じ様に動かしていただければ大丈夫です。

※動画内ではショートカットキーを使用しています。ショートカットキーについてはこちらをご覧ください。

手順は「記述→保存→表示の確認」となります。
表示の確認は『文字を表示してみよう!』の記事をご覧ください。

さいごに

今回は位置の指定についてお話をさせていただきました。
ヘッダーやフッターの位置を固定して、操作性や見栄えが良いホームページ作りを心がけましょう♪

それでは、ご覧いただきありがとうございました!

ADVANCEでは

ゲーム制作をメインとして小学生・中学生・高校生に向けてのプログラミング教室を運営しております。

無料のイベント(アクティビティ)も開催しているのでご覧くださいね☆

↓↓↓

アクティビティ詳細

また、解説ブログは随時更新!
更新日時は公式ホームページでご確認ください☆