本講座は、HP制作講座ということで、プログラミングを初めて学ぶ方たちに最終的に案件を受注して納品できるようになるまでのスキルを身に着けられるように手助けをする目的で作成しました。
初めてプログラミングというものに触るという人も多いと思うのでそういった人たちにもわかりやすく解説するよう心がけております。
前回はヘッダーをマークアップしていきました。
まだ前回の講座を見ていないよという方は先にそちらから学習を進めるようにお願いいたします。
-
-
【第6回】ヘッダーを作ろう(HTML編)
本講座は、HP制作講座ということで、プログラミングを初めて学ぶ方たちに最終的に案件を受注して納品できるようになるまでのスキルを身に着けられるように手助けをする目的で作成しました。 初めてプログラミング ...
続きを見る
今回学ぶこと
- ヘッダーをスタイリングしていく
- ヘッダーに使われているCSSプロパティ
目次
今回の講座で作成するHPのおさらい
本講座で作成するのはHPの中でも下の画像の赤枠で囲われた部分です。
前回の講座でヘッダーに必要なHTML要素をマークアップしていきましたので、
今回はそれらをCSSでコーディングしていくことがゴールになります。
ヘッダーに取り入れられているCSSプロパティ
それでは今回新たに使用するプロパティを紹介します。
- text-decoration
- max-width
- height
- padding
- margin
- text-align
一つ一つ確認していきましょう。
text-decoration
1 a {
2 text-decoration: none;
3 }
その名の通り、テキストにデコレーションを施すことができるプロパティになります。
ただ、今回の使用目的はa要素にデフォルトで装飾されてしまっているアンダーラインを消すために使用します。
下記で使用例を確認しましょう。
See the Pen Untitled by kota (@kota1459) on CodePen.
上記の例では、下のテキストにのみ、text-decoration: none;を適用することによってアンダーラインを消していることが確認できます。
max-width
1 div {
2 max-width: 1200px;
3 }
HTML/CSS講座の第4回でwidthプロパティについて触れました。
おさらいをすると、widthプロパティはコンテンツの横幅を指定するのに使いました。
対して、max-widthプロパティは要素の幅の最大値を指定するのに使用されます。
なので、指定した値以上に要素が広がってほしくない場合に使えます。
max-widthとは反対にmin-widthプロパティというものもあり、こちらは要素の最低限の幅を確保する場合に使用されます。
height
1 div {
2 height: 120px;
3 }
コンテンツの高さを指定するのに使用します。
widthと同様、min-height、max-heightといった使用法もあります。
padding
1 div {
2 padding: 16px 8px 4px 8px;
3 }
要素内に余白を設けたい場合に使用します。
指定方法は3つの方法があります。
- padding: “上” “右” “下” “左”;
- padding: “上下” “左右”;
- padding: “上下左右”;
上記の例だと、要素の上側に余白を16px、右と左に8px、下に4px余白をとっています。
実際にブラウザにどのように反映されるか確認してみましょう。
See the Pen Untitled by kota (@kota1459) on CodePen.
上記の例では2つのdiv要素の下側だけにpaddingを適用させています。
paddingが適用されている方が要素が大きくなっていることが確認できます。
margin
1 div {
2 margin: 16px 8px 4px 8px;
3 }
要素の外側に余白をとりたい場合に使用します。
paddingと混合しやすいですが、ヘッダーとメインコンテンツの間に余白が欲しいなど、コンテンツ間の余白をつける時などに使用されます。
詳しい説明に関しては下記の記事で行っていますので、こちらを参照してください。
-
-
paddingとmarginの違いをわかりやすく解説
コーディングしていく中で再頻出の一つである、paddingとmargin。 どちらも同じ余白の設定をするCSSのプロパティですが、何が違うのかよくわからない。 HTML/CSSの初学者には、あるあるの ...
続きを見る
paddingと同様、指定方法は次の通りになります。
- margin: “上” “右” “下” “左”;
- margin: “上下” “左右”;
- margin: “上下左右”;
また、padding、marginともに一つの箇所だけ余白を設けたい場合には次のように指定することが可能です。
- margin-top・・・要素の上側に余白を設ける
- margin-right・・・要素の右側に余白を設ける
- margin-bottom・・・要素の下側に余白を設ける
- margin-left・・・要素の左側に余白を設ける
実際にmarginがブラウザにどのように反映されるか確認してみましょう。
See the Pen Untitled by kota (@kota1459) on CodePen.
今回div要素を3つ用意し、緑色の要素にだけ、margin:32px;を指定しています。
赤と水色の要素はくっついて表示されていますが、緑だけ要素の外側に余白があることが確認できると思います。
これは緑色の要素にのみmarginを上下左右に32pxあてているからです。
text-align
1 div {
2 text-align: center;
3 }
文字や画像の水平方向の位置を指定するのに使用します。
主に次の3つの値をとります。
- text-align: left;
- text-align: center;
- text-align: right;
それぞれ次のように動作します。
See the Pen Untitled by kota (@kota1459) on CodePen.
ヘッダーをスタイリングする
まず、前回までにマークアップした状況と完成状態を見比べてみましょう。
完成状態
現在の状態
ロゴを作成する
それではまず、ロゴを完成させていきましょう。そのためには文字色の変更と文字の下線を消去する必要があります。
必要なプロパティは何でしょうか？
正解はcolorプロパティとtext-decorationプロパティとなります。
下記のようにすることで完成状態と同じロゴを作成することができます。
See the Pen Untitled by kota (@kota1459) on CodePen.
コンテンツを中央に寄せる
続いてコンテンツ全体が左に寄っているので、それらを全て中央に揃えたいと思います。
そのために今回使用するのが、max-width、margin、paddingとなります。
まず、headerの子要素にdiv要素を作成して、wrapperというクラスを命名します。
そして、その中に前回マークアップした要素を記述するようにします。
このwrapperクラスにプロパティをあてていきます。
See the Pen Untitled by kota (@kota1459) on CodePen.
ロゴが中央に寄りました。
それぞれのプロパティについて詳しく解説します。
max-widthプロパティ
こちらは要素の横幅が240px以上にならないように指定しています。
親要素の幅が240px以下の場合はそれに合わせた横幅になります。
margin: 0 auto;
こちらは、コンテンツを中央に寄せる際に使用します。autoを使用することで左右幅を均等にしてくれます。
よくコンテンツを中央に寄せる際に使用するため、覚えておきましょう。
padding: 0 4%;
こちらは画面幅がぴったり240pxの場合、コンテンツが横幅いっぱいに広がってしまうのを防ぐために使用しています。
最初は難しいと思うので、こういう風に使うんだ。程度で問題ないです。
プロパティの値が「%」となっていますが、このようにpx以外の単位も指定することができます。
文字を中央に寄せる
最後に文字を中央に寄せていきましょう。
文字を中央に寄せるにはtext-alignプロパティを使用します。
下記の例を確認してみましょう。
See the Pen Untitled by kota (@kota1459) on CodePen.
今回はwrapperクラスにtext-align: center;と入れました。
そうすることでロゴが画面の中央に表示されたことがわかります。
今回のスタイリングはここまでとなります。
次回はナビゲーションメニューのスタイリングを行っていきます。
実践問題
VSCodeを開いて実践問題に挑戦して下さい。
前回の実践問題で使用したファイルに追加で記述してください。
そうすることで最終的に一つのHPが出来上がります。
下記プレイグラウンドに記述しても構いませんが、VSCodeを使用した方が体系的に学べるのでVSCodeの使用を推奨します。
実践問題
VSCodeを開いて実践問題に挑戦して下さい。
下記プレイグラウンド内に記載されている内容をコピペして取り組んでください。
そのままプレイグラウンドに記述しても構いません。
※CSSの1行目に記述されているものは消さずにその下に解答を記述してください。
①(HTML) header要素の子要素にdiv要素を作成し、クラス名を「wrapper」としてください。
②(CSS) a要素をセレクタとして、テキストデコレーションを無しに指定してください。
③(CSS) logoクラスをセレクタにして「color: #1F8EAB;」を記述してください。
④(CSS) wrapperクラスに次の3つを適用してください。
・要素の最大幅を1280pxにする
・要素を中央寄せにする
・paddingプロパティにて値を上下を0、左右を4％にする
⑤(CSS) wrapperクラスにてテキストを中央寄せにしてください。
See the Pen Untitled by kota (@kota1459) on CodePen.
答え合わせ
下記のように書けていれば正解です！
See the Pen Untitled by kota (@kota1459) on CodePen.
個別に答え合わせをしていきましょう。
①header要素の子要素にdiv要素を作成し、クラス名を「wrapper」としてください。
- header要素の子要素を全て<div class="wrapper"></div>で囲む
See the Pen Untitled by kota (@kota1459) on CodePen.
②CSSでa要素をセレクタとして、テキストデコレーションを無しに指定してください。
③logoクラスをセレクタにして「color: #1F8EAB;」を記述してください。
- a要素にtext-decoration: none;を適用する
- セレクタを「.logo」にし、プロパティと値を「color: #1F8EAB;」と記述する
See the Pen Untitled by kota (@kota1459) on CodePen.
④wrapperクラスに次の3つを適用してください。
・要素の最大幅を1280pxにする
・要素を中央寄せにする
・paddingプロパティにて値を上下を0、左右を4％にする
- セレクタを「.wrapper」にし、プロパティと値を「max-width: 1280px;」と記述する
- プロパティと値を「margin: 0 auto;」と記述する
- プロパティと値を「padding: 0 4%;」と記述する
See the Pen Untitled by kota (@kota1459) on CodePen.
⑤wrapperクラスにてテキストを中央寄せにしてください。
- wrapperクラスのセレクタと値を「tecxt-align: center;」と記述する
See the Pen Untitled by kota (@kota1459) on CodePen.
どうでしたか？しっかり全問正解できましたでしょうか？
もし全問正解できなかったとしても問題ありません。しっかり復習してもう一度解いてみてください！
理解したものにチェックを付けよう！
まとめ
今回はヘッダーをCSSで装飾していきました。
次回はCSSをあてていく作業の続きとなりますのでお楽しみにして下さい。
それでは、最後までご覧いただき、ありがとうございました。
当サイトではフリーランスを目指す人のためのプログラミング教材の作成を心掛けてサイト運営を努めております。
別途、動画も出す予定で、そちらでも初心者向けに一からコーディングの解説を行っておりますので、
興味があればご覧いただければと思います。
