【プログラミング独学23日目】ヘッダーレイアウト
こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。
私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。
https://chanmk.tokyo/programming_1/今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。
- プログラミング案件も受注できるようになりたい
- 歯科衛生士エンジニアを目指したい
- コーディングもライティングもできる歯科衛生士
【プログラミング独学23日目】学んだこと
今日もCSSの続きをやりました。引き続きflexboxの学習で、flexbox編は全て学び終えることができました。
①ヘッダーのスタイリング／リストのスタイル変更
ヘッダーの左端にアイコン画像、右端にメニューが並んでいるようなヘッダーを作りたかったとします。まずはHTMLに以下のように記述します。
<body>
<header>
<img src="img/logo.png" width="64" height="64">
<nav>
<ul>
<li><a href="〜〜〜">MENU1</a></li>
<li><a href="〜〜〜">MENU2</a></li>
<li><a href="〜〜〜">MENU3</a></li>
</ul>
</nav>
</header>
</body>上のように記述すると、左上にimgフォルダの中に入っているアイコン画像（logo.png）が表示され、その下にMENU1〜3に縦に並んで表示されます。
<ul>／<li>で記述した箇条書きには、デフォルトで黒丸が付いています。そのためまずはMENU1〜3のスタイルをリセットしましょう。
nav ul {
list-style:none;
margin:0;
padding:0;
}セレクターは「a b」というようにスペースを空けて書くと、「aの下にあるb」という意味になります。また「list style」は一括指定プロパティで、以下を1つにまとめて書くことができます。
- list-style-type
- list-style-position
- list-style-img
いずれも以下で学んだ内容です。
②ヘッダーのスタイリング／画像とメニューを配置する
<body>
<header>
<img src="img/logo.png" width="64" height="64">
<nav>
<ul>
<li><a href="〜〜〜">MENU1</a></li>
<li><a href="〜〜〜">MENU2</a></li>
<li><a href="〜〜〜">MENU3</a></li>
</ul>
</nav>
</header>
</body><img>と<nav>を横並びにしたいので、親要素である<header>にflexboxを指定します。
header {
display:flex;
justify-content:space-between;
}「justify-content：space-between」は横並びにした要素の間を均等に表示させるためのプロパティで、以下で学んだ内容です。こうすることで<img>と<nav>の要素がそれぞれ両端に寄ります。
ただjustify-contentではなく、以下のように記述しても同じように表示されます。
margin-left:auto;これは要素の左側いっぱいに余白を設けるという意味で、右端に表示したいnavに設定すると良いでしょう。このように記述されることはよくあります。
nav {
margin-left:auto;
}
③ヘッダーのスタイリング／メニューのスタイリング
「MENU1」「MENU2」「MENU3」という表示は、それぞれのボタンの中央に位置付けたいのでtext-alignで以下のように記述します。またMENU1〜3のボタンの高さを調整するため、line-heightで以下のように記述します。
nav ul {
width:100px;
text-align:center;
line-height:64px;
}今回はヘッダー左端に表示されているアイコン画像と高さをそろえる（64px）ことで、見た目の良さを目指しました。
独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。
▼完全無料のプログラミングスクール
④ヘッダーのスタイリング／ボタンのクリック可能エリアを広げる
MENU1〜3のボタンにおいて、テキスト上だけでなくボタンとして囲われた部分にさえマウスポインタを置けばクリックできるようにした方が親切です。これは先ほど以下のように書いていた部分を操作すればOKです。
nav ul {
width:100px;
text-align:center;
line-height:30px;
}「nav ul」というセレクターを「nav a」にすればOKです。
nav a {
width:100px;
text-align:center;
line-height:30px;
}ただこのままでは上手くいかず、ボタンの幅や高さが無効になってしまったのがわかるかと思います。これは<a>がdisplayプロパティのinline要素だからです。inline要素ではwidthやheightが無効になるため、widthやheightを設定するにはdisplayプロパティをblock要素に変える必要があります。そこで以下のように追記すればOKです。
nav a {
width:100px;
text-align:center;
line-height:30px;
display:block;
}どのタグがdisplay要素のblock要素で、どのタグがinline要素かと全て覚えるのは大変なので、スタイリングが途中から上手くいかなくなったときに「display:block」を追記する癖を付けておこうかなと思いました。良いやり方ではないと思いますが・・・。
なおdisplayプロパティのblock要素やinline要素は自信が無いというかいまいち理解しきれていない部分だったので、もう一度以下を見直しました。
⑤画像とテキストの配置を交互にする
左側に画像、その右側にテキストがあるブロック、その下のブロックは逆で左側にテキスト、その右側に画像というように交互に配置したかったとします。画像とテキストをそれぞれ<div>タグで囲み<div>として操作すると楽です。<div>は要素をまとめるためのものであり、特別な意味は無いためスタイリング時マルチに使うことができます。
例えば奇数番目で画像を左側、偶数番目で画像を右側に配置させるとします。「nth-child( )」を使って偶数番目に対して、flex-directionで主軸方向を逆にします。nth-child( )は以下で学んだ内容ですね。
section:nth-child(even) {
flex-direction:row-reverse;
}また奇数番目でも偶数番目でも、画像（横幅180px）とテキストの間に均等な余白32pxを持たせるためにはcalcを使って指定します。
.text {
width:calc(100% - 180px + 32px);
}上の記述はテキストの幅を求めるためのものであり、この時点では画像の幅、余白の幅、テキストの幅がわかっているもののそれぞれの位置関係やどう配置するかは指定されていません。そこで以下のように記述すればOKです。
section {
justify-content:space-between;
}
【プログラミング独学23日目】わからなかったこと・調べてわかったこと
今日学んで疑問が残った部分は以下です。
- 画像サイズの指定で「px」はいらないのか
- line-heightはheightではいけないのか
画像サイズの指定で「px」はいらないのか
HTMLで以下のように記述するとき、画像サイズの単位「px」を付けないことに違和感を感じました。
<img src="img/logo.png" width="64" height="64">これはHTML5から、img要素のサイズ（width／height）には単位無しの整数で書かなければいけなくなったそうです。
なおサイズの指定など装飾系の記述は全てCSSに書いているため、画像サイズもCSSに記載してOKとのことです。慣習として画像サイズだけはHTMLに書いていましたが、CSSでまとめてしまった方が楽かもしれませんね。
line-heightはheightではいけないのか
メニューボタンの高さを調整するところで、heightではいけないのかと思い実際に記述してみると、ボタンの高さは正しく表示されたものの「MENU1」「MENU2」「MENU3」といったテキストは上寄りになってしまいました。
他の方も疑問に思ったようで、先生の回答をまとめると以下のようでした。
line-heightはボックス全体の高さを指定するためのもの。そのためここを伸ばさないと、navの高さだけheightで伸ばしたところで、テキストが付いてこない。テキストの中央揃えを維持しながらボタンの高さを伸ばすためには、line-heightで行ボックス全体の高さを伸ばす必要がある。
参考ドットインストール
文字だけで表現するとわかりにくいのですが、理解できました。ただ頭では理解できていても、実際にスタイリングするときにheightとしてしまいそうで心配です。なおline-heightは以下で学んだ内容でした。
独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。
▼完全無料のプログラミングスクール