第5話

まさかの主人公存在感薄し!?サンプルホームページ制作、まずはヘッダーから。

ヘッダーの作成(HTML)

うぇぶひこはまるでその場にいないかのように
黙々とサンプルとなるホームページのTOPを制作しはじめた。

まずはHTMLの基礎となるテンプレートを書き上げた…!

勢いそのままに、ヘッダーエリアのHTMLを追記していく…!

同時にHTMLを日本語に置き換えてみた…!

ヘッダーのスタイル(CSS)

よし、CSSもいくぞーー!

うぇぶひこは繊細なタッチで、CSSを書き上げていく…!

同時にCSSを日本語に置き換えてみた…!

よし、これでヘッダーは完成だな。

サンプルサイトのヘッダー完成画像

CSSのプロパティにーついて

ふぅ…今回利用したCSSについても、あらためてまとめておこうかな。

background-color
(バックグラウンドカラー)

背景色を指定するプロパティー。
background-colorに限らずCSSによる色の指定は、
16進数(HEX)による指定か、三原色(RGB)による指定が可能。

今回のヘッダーでは、#404040で16進数(HEX)で指定。
なお、「GoogleでHEX colorで検索」すると、
色と数値の確認に便利なツールが表示され、色と数値の変化が確認できる。

16進数(HEX)は#で始まり6桁の数字(0から9)と
アルファベット(aからf)で指定し、
0が最も暗く、fが最も明るい指定になる。

三原色(RGB)はrgb(255,255,255)のように指定。
こちらは0から255の数字で表現し、
0が最も暗く255が最も明るくなり。
なお、Rは赤、Gは緑、Bは青を意味している。

HEXもRGBでもそれぞれの色の濃さをかけ合わせて
最終的な色を指定してるという点は同じ。
※指定方法が異なるだけで同じ色を指定できる。

color(カラー)
文字色を指定するプロパティー。
色の指定方法はbackground-colorと同様となる。
display
(ディスプレイ)
表示形式やレイアウトに関する指定を行うプロパティー。
こちらはとても奥が深いため、物語がもう少し進んだあと、
詳細について解説予定。
今回は単純に横並びさせるためにflexという値を指定したという理解でOK。
align-items
(アラインアイテムズ)
displayをflexにした場合に指定ができるプロパティー。
垂直方向に対して中央に来るように今回はcenterを指定。
今後、詳細について解説予定。
height
(ハイト)
高さのサイズを指定するプロパティー。
width
(ウィズ)
幅のサイズを指定するプロパティー。
font-weight
(フォントウエイト)
文字の太さを指定するプロパティー。
今回は太字であるboldを指定。
font-size
(フォントサイズ)
文字の大きさを指定するプロパティー。
margin
(マージン)
HTML要素の外側の余白を指定するプロパティー。
margin: 要素の上 要素の右 要素の下 要素の左 という順で
余白のサイズを指定。
こちらも奥が深いため、今後の物語の中で詳細について解説予定。
list-style
(リストスタイル)
リスト表示の際、各リストの左側に共通のマークを指定することが可能。
今回はnone(ナン)とし、マークはなしとした。
px(ピクセル)について
デジタルの世界におけるサイズの単位。
大きさの感覚などはホームページ制作を学んでいきながら
自然と理解できるので、 サイズを指定する際に利用する
一般的な単位と捉えておく。

次回へ続く…

前後の冒険はこちら

中の人からのお知らせ