HTML&CSSを学ぶ その6 - 勝手に HTML & CSS 初級編 6章 解説
どーも。さいんです。
勝手に解説シリーズNoteもいよいよ第6段です。
今回はついにメインの部分の作成となります。プログラミングの学習は継続が一番重要になりますので、6章まで学習を進めたみなさんはそれだけですばらしいことです。
少しずつサイトが形になっていく様子にワクワクすると思いますので、プログラミングって楽しいという気持ちを忘れないでくださいね。
それでは6 章：コンテンツを作ろう！を勝手に解説していきます。
もし、これからプログラミングを勉強しようと思っている方はぜひ、Progateと第1章勝手に解説からご覧ください。
6 章：コンテンツを作ろう！
contentsについて
ここまで勝手に解説を進めてきた皆さんであれば、すでにピンときているかもしれませんが、今回のcontentsに関してもタグを確認しましょう。
footerやheaderが存在するということは、contentsはどういうタグがあるんでしょうか？
HTML5の新しいタグについて解説されているサイトなどをチェックしてみます。
articleとsectionがありますが、今回のProgateで作るサイトは1つ1つ独立はしていますが、それぞれの要素が組み合わさることで1つのページが完成となるので、sectionがマッチしてそうですね。
実際にみなさん自身でページを作る際は是非sectionやarticleタグを使って作成してみてください。
[復習] <span>要素の色の変更について
すでにCSSの章を学習した人は気づけたでしょうか？
プログラミングで大切になるのは
☑︎ 今書いているコードが将来どういう影響があるか
☑︎ どういう作りにしていれば、無駄のないコードを書けるか
☑︎ 繰り返しをいかに減らせるか
ということを常に意識することです。
さらっとこなしがちなレッスンですが、常に上記の内容を意識するだけでエンジニアのスキルはぐんぐん上がっていきます。
プログラミングには正解は一つではないので、演習の内容も正解の一つであることは間違いありません。
しかし、将来このページを拡張していくとなったらいくつかの課題にぶち当たります。
× 課題1 HELLO WORLD.のWを青色に変えたい
× 課題2 ヘッダーのProgateのPをHELLO WORLD.の.と同じ色にしたい
【解説】課題1 HELLO WORLD.のWを青色に変えたい
問題通りにcssを記載するとこのような書き方になると思います。
というのはみなさんご存知ですよね？
作成したコードはこのようになっていたと思います。spanで囲むことにより、.の色を変更できましたよね？
もしWを別の色に変えたいときはどうしましょう？
同じようにWをspanで囲みたいですが・・・
このように、cssの書き方の場合Wにも.の影響が出てしまいます。
もちろん影響を回避する方法はたくさんありますが、先に課題2を見ましょう。
【解説2】課題2 ヘッダーのProgateのPをHELLO WORLD.の.と同じ色にしたい
例えば今回のサイトのイメージカラーを #ff4a4a と決まり、ヘッダーのProgateのPもそのカラーにしたいという変更依頼が来たとします。
どのように対応しますか？
header-logのspanに対して色を設定し、Pをspanで囲むとイメージした方もいらっしゃるのではないでしょうか？
では、もし3ヶ月後にサイトのコンセプトが変わり、イメージカラーを #ff4a4a からNoteのようなグリーンに #2dcdb5 に変更したいというリクエストがあった場合どうなるでしょう？
もしすでに同じように様々な場所でイメージカラーを同様にコーディングしていたらどんな影響があるでしょうか？
サンプルでも2箇所変更する必要がありますよね？
影響を最小限にするには、CSSのタグ（名前）をつけることができるというのを思い出せるかどうかです。
例えば、イメージカラーのように、同一のカラーを複数の場所で使う場合はイメージカラー用のclassを作ってそれに対して色の指定をします。
すると1つのCSSで複数箇所に対して同一のイメージカラーを指定でき、今後まだイメージカラーが青になったとしても、黒になったとしても、brand-colorのcssの色を変えるだけで、指定した全ての箇所のカラーを変えることができます。
ここまでくると課題1の解決方法も簡単ですね。
青にしたいのであればtext-blueといったclassを作成して、適応するのが今回の課題にはマッチしそうです。
cssの設計や名前の付け方はBEMなど有名なものから、現場独自のものがありますが一度学習しておくと今後便利です。
borderについて
Webエンジニアになり、専門のデザイナーチームがつく場合はそこまで一つ一つの項目について調べることは減りますがborderなど基本的な内容については是非仕様やプロパティについて調べてみると面白いです。
検索は
こういったサイトを活用してもいいですし、
css border
などで調べてみるとすぐに仕様を解説しているページに出会えるはずです。
(Googleは本当に偉大ですので、仲良くしましょう)
ここでは実際にプロパティを変えてブラウザですぐに試すことができますので、一通りどんな線を描くことができるのか試しておくことをオススメします。
すっと情報が目に入ってくるような、目に優しいサイトは適度にborderを使用し、リズムを作っているケースが多いです。
普段からサイトを見るときに
見やすいなー。ごちゃごちゃしていないなー。
と感じたサイトの余白の大きさや線の有無などを調べておくと、自分でWeb制作を行う際にとても役に立ちます。
まとめ
今回でメインのコンテンツとなる要素の作成と余白や線の書き方を身につけることができたと思います。
すでに感じている方も多いかもしれませんが、すでにHTMLやCSSの基礎は学習しており、応用することでメインコンテンツの作成を進めることができたと思います。
実は多くの開発は基礎の組み合わせです。より複雑になってきた場合に、こうしておいた方が後から変更があったときに影響が少ないなどの設計の部分がとても重要になってきます。
そのため、この書き方だとこうなったときまずいなーと気づくことがとても大切です。今後も演習をこなしながら将来どんな変更や改修が入りどんな影響があるかを考えながら進めてくださいね。
さいんの宿題
☑︎ 課題1をclass指定ではなく、n番目のspanの指定で解決する
☑︎ h2タグをおしゃれに読みやすくデザインする
☑︎ BEMの表記について調べる
h2は正解はないです。いろんなサイトのタイトルを見て、どんなタイトルが目立ちつつ読みやすいデザインか、引き出しを増やしましょう。
この記事が気に入ったらサポートをしてみませんか？