はじめに
2024年10月からデイトラのWeb制作コースの受講をスタート。
現在は初級編を終えて、中級編に突入しました。
アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。
OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。
これからデイトラWEB制作コースの受講を考えている方
実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！
現在進行形でWEB制作コース受講中の方
一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！
卒業生の先輩方
懐かしんでいただければ・・・笑
自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。
中級編DAY6の押さえておきたいポイント
buttonタグでハンバーガーを作る
ドロワーメニューを開くためのハンバーガーアイコンがdivタグで作られていると、
キーボードだけで操作している人はドロワーメニューを開くことができない。
これをボタンタグを使ってあげることでTabキーを使って開くことができるようになる。
いろんな人が使うことを考慮して、誰もが利用しやすいサイトをつくることを
「ウェブアクセシビリティ」と呼ぶ。
ハンバーガーをspanタグで作る！
spanタグを3つ用意。
nth-od-typeの擬似要素とpositionタグを使って3つの線を表現する。
今回は:nth-of-typeで、親ブロックの中かつ同じ要素の中で何番目に現れるか？という順番を定義し、その順番ごとにtop:XXpx;を指定してあげると、3本の線がずれて（ハンバーガーになって）表示される。
:nth-of-typeと似たもので:nth-childという擬似要素もあるが、
これは親ブロックの中で何番目に現れるか？という順番を指定するもので、要素には依存しない。
今回のハンバーガーでいえば、spanタグしかないので、どちらをつかっても良い。
calc
Sassでわざわざ「calc」を使って計算するのは、
自分以外の人（あるいは将来の自分）にコードの意図を伝えるため。
Sassでcalcを使ってコンパイルすると演算後の値が出力されるが、
この数字だけをみてもなぜその数字になるのか、デザインカンプにも出てこない数字でパッと判断できない。
これをあえて数式で残すことで、「あえてこうなっている」をわかるようにしてあげると、保守性が高くなる。
コメントも書いていけるとなおよし。
なぜボーダー分の余白を引くか？
デザインカンプではborderがコンテンツの内側に配置されていたが、
通常padding,borderはコンテンツの外にあるため、そのままのpxをコーディングで指定して実装するとデザインカンプよりも大きくなってしまう。
ただし、幅や高さが指定されている場合は、
box-sizing: border-boxの指定によって幅や高さにpaddingとborderを含んだ指定になるため、意識する必要なし。
最大幅を決めて中央寄せ
PCレイアウトを作る時は、
- 「max-width」で最大幅を決める
- 「margin-left:auto;」と「margin-right:auto;」で左右中央に配置する
加えて、コンテンツ幅がデザインカンプで指定されている幅をしっかりとれるように、
余白分を加味してmax-widthを設定してあげたほうがよい。
中級編DAY6の追加で調べたいことメモ
- ウェブアクセシビリティについてもっと学んでみたい。
- box-sizingについて深掘りする。
中級編DAY6の感想と記録
ボーダーや余白の幅まで考慮してコーディングするのか・・・
正直、ここまで細かいことはやらないと（気にするほどのことではない）思っていました。
こういう細かいところまで再現できるのが良いコーダーなんだろうなぁ。
今日の部分は、動画見ながら理解して、自分でやってみて、動画で復習の流れがとれたので、
進め方としてはよくできました！
引き続きがんばろう！
