こんにちは！りょた(@Ryo54388667)といいます(^o^)
今回は「作って学ぶ HTML&CSSモダンコーディング」の書籍のレビューについて書いていきます。
- HTML/CSSを勉強中の人
- 基礎の学習を一通り終えた人
- ポートフォリオ作成中の人
こんな人に読んでいただけると幸いです！
きっかけ
僕は都内のIT企業でフロントエンドエンジニアとして働いています。
主にTypeScript、Next.jsを利用して開発をしています。
こんなことを言っては炎上しそうですが、
「HTML・CSSについてはクリティカルなバグが出るわけではないし、テキトーに書いてもいいか」
こんな感じで、HTML・CSSを軽視している節がありました。
ただ、きっかけになったのは、一時期、保守のプロジェクトに入ったことです。
上長から、「この追加機能の開発をお願いします」と言われ、対象のリポジトリを見ると、
「え、CSSどこ直せばいいんやろ？？？」
正直、全然わかりませんでした。自分のマークアップ言語に対する知識が限りなく欠如していることを痛感した体験でした。自分の時間に咀嚼して考えてみて、HTML・CSSについてはコピペや我流で行ってきたので、一度、体系的に学ぶ必要があるなーと思い、今に至ります。
個人的に印象的な箇所
まず、あまたあるHTML・CSSの書籍の中からこれを手に取ったワケを話させてください！
大型書店でこの手のコーナーに訪れたことがあるひとなら、わかると思いますが、マジで書籍の種類が多いです。(しかも、やたらカラフルな表紙。。目がチカチカする。。)
こちらの書籍は、まず、実際のレイアウトを作成していくような構成だったことが大きな決め手でした!テクニックやプロパティの説明するような書籍は多いですが、実際の現場に即したレイアウトを作成していくような書籍は少ない印象です。
話が逸れてしまいました。印象的な箇所について書いていきます。
① カードレイアウトのCSSについて
僕の観測範囲ですが、デザイン系の企業の案件ではない限り、奇抜なレイアウト構成のWebサイトを開発することはなかなかありません。横並びのカードレイアウトやメディアカードのレイアウトがほとんどです。
この書籍では、そのカードレイアウトの「お手本」を知ることができます。もちろん、この書籍に書かれていることが、全てスタンダードだと思ってはいません。しかし、HTML・CSSを我流で書いてきた人にとっとは、お手本の一例を知っていることは重要だと思います。
頻繁に引き合いに出される、落語の「型破り」と「型なし」との違いのようなものです。
王道のお手本を知り、体感した後で自分流にカスタマイズしていくのがいいと思います。
その観点で、お手本を知れたのは非常に良かったです。
この書籍の特徴として、同じレイアウトを実現するために、複数パターンの記述方法を記載しています。
これがありがたい！例えば、flexboxを利用したレイアウトの他に、gridレイアウトのパターンが書かれていたりという具合です。
「本書では、新しいHTML&CSSに沿った形で『レスポンシブWebデザイン』を見直し、ページを作成しながらさまざまな選択肢を比較検討していきます。サンプルのページを作成するばかりでなく、ページを実現するためのバリエーションを増やして、これからのWeb 制作に活用していただければと思います。』
「本書では、新しいHTML&CSSに沿った形で『レスポンシブWebデザイン』を見直し、ページを作成しながらさまざまな選択肢を比較検討していきます。サンプルのページを作成するばかりでなく、ページを実現するためのバリエーションを増やして、これからのWeb 制作に活用していただければと思います。』
（著者「はじめに」より）
まさに、バリエーションを増やせそうだな、引き出しが多くなりそうだな、と思いました！
② clamp関数について
何を隠そう、僕はこの書籍を読むまでこのCSS関数を知りませんでした！
「こんな便利な関数があるのか！！」
と感動したので、ざっくり紹介させてください。
これはレスポンシブ対応を行う場合に便利な関数です。
例えば、ウェブページ上で文章を表示させたいとき、その文字の大きさをfontsizeプロパティで指定できます。しかし、画面サイズが変わると、文字が大きすぎたり小さすぎたりして見づらくなることが課題としてあります。
そこで、clamp関数の出番！
端的にいうと、文字の大きさが自動的に適切な範囲内で変わるように設定できるものです。
基本的な書き方は以下のような形です。
font-size: clamp(最小値, 適応値, 最大値);最小値、適応値、最大値の部分には、それぞれ希望するフォントサイズを指定します。
例えば、最小値を12px、最大値を24pxにしたい場合、次のように書きます。
font-size: clamp(12px, 適応値, 24px);みなさんが思っていることを代弁しますね。
「適応値ってなんやねん！」
これですよね。
例えば、PCの画面サイズ1024pxのとき、フォントサイズを24pxにするとします。
この時、24pxという値は1024pxに対する値として定義されているので、これにのっとると、
24px ÷ 1024px = 0.0234….
になります。つまり、フォントサイズ24pxを言い換えると、画面サイズの1024pxに対して2%の大きさを指定している、とも言えます。よって、フォントサイズは、1024px以下の時も画面サイズの2%にすれば、計算上、見え方は同じになるはずです。
そのような形で「適応値」を決めます。ここで、「画面サイズの2%」を簡単に表現できる単位があります。「vw」です。今回でいえば、「2vw」となります。
font-size: clamp(12px, 2vw, 24px);このようにかけます。これで、画面サイズに合わせて、最小で12px、最大で24pxになるようになります。これが、clamp関数の使い方です。
文字があまりにも小さくなったり大きくなったりするのを防ぐことができます。
チョー便利です！！この書籍でこの関数を知れて非常に良かったです。
最後に
これらの他に、現場で明日から使えるようなテクニックがたくさん記載されています。
現に、僕はこの書籍を読んだあと、「プロダクトのここ修正できるやん！」となり、何件かプルリクエストを出しました。
HTML・CSSを何となく書いている人はぜひぜひ読んでみてください！
最後まで読んでいただき、ありがとうございます！
フロントまわりの技術記事やzennも書いていますので、興味のある方はこちらも合わせて見てみください〜
Zenn: ChatGPT APIを利用して演奏プログラム生成アプリを作成した話