モバイルファーストに欠かせない、clamp()を使いこなせ ! &オススメ本の紹介
こんばんは。
ウェブデザイナー目指して勉強中のかいもち🐣です !
今日は最近購入した本の中で、「これは... ✨ 」と思うものがあったのでその本の紹介と、中でも印象的だったCSS関数"clamp"について、その使い方と有用性を記事にしたいと思います !
ズバリ、その本はこちら。
... わたし、モバイルファーストでのマークアップに、並々ならぬ苦手意識がありまして。。。
なんでかよくわかんないけどやりにくい。
やんなくてもいいならやりたくない。。。(小声)
とは言え、勉強中の身。
良いと言われることは全てやってみたい好奇心もある。
・・・だけど、何度挑戦しても途中で心折れる。
ちなみに、モバイルファーストはなんで導入されるべきか ? というハナシはこの記事では割愛します。
めちゃめちゃ端的でわかりやすいのはこちら。↓
・・・何度読んでも、「やっぱできるようになりたい😭」という気持ちになります。
モバイルファーストが苦手、を克服するために。
というわけで、苦手克服にあくせくする中で出会ったこの本。
2021年9月出版の、かなり新しい本です。
著者や出版社などの基本的な情報は、Amazonにお任せするとして、ネタバレにならない程度にどんなことが書いてあるのかシェアしますと...🤔
「モバイルファーストとレスポンシブデザイン」を軸に、ステーショナリーを扱う架空のコーポレートサイトをマークアップする。(ヘッダーから順々に進んでいく感じ)。
→各所で、「なぜここでそのCSSなのか」「それがモバイルファーストやレスポンシブデザインの観点から、どういいのか」の解説が付く。
・・・先述の通り、モバイルファーストとレスポンシブデザインに苦手意識がある私。
書店でパラパラっと立ち読みしましてね、もう、これは買うしかない ! と思いました。
モバイルファーストが苦手、の理由がわかった
早速購入しまして、読み進め・・・
1/3ほど読みまして、まずわかったことは「モバイルファーストが苦手だ、と感じていたのは、モバイルファーストに適したCSSを書けていないからだ」ということです。まさに目から鱗。🥺
その一つとして、本書でよく使われているCSS関数"clamp"。
これを使いこなせるようになったら、モバイルファーストも怖く無いはず !
自分の勉強も兼ねて、以下にまとめようと思います。
clamp()とは
ひとまず、MDNを見ましょうかね。
・・・わかるような、わからないような。。。
それがMDN。。。(個人の感想ですw🤣)
最小値、推奨値、最大値の3つの引数を取るというのがミソのようです。
例えばこんな感じ。
こらち、noteのデスクトップ画面(1440px)ですが、この時の左右余白は250px(=約17%)です。見やすくてとってもいい感じですよね。
なるべくこの感じの余白を保ったままで、でも、画面幅に合わせて余白を変える必要がある、という、まさにこんな時。
clamp()に活躍してもらいましょう。
粗雑なマークアップでごめんなさい。。。
<article>と<aside>をflexで横並びにしまして、その左右余白にclampを使っています。
clamp(最小値, 推奨値, 最大値)、この「推奨値」= 上記でいう「なるべくこの感じの余白を保ったままで」になるわけですが、これがモバイルファースト、レスポンシブデザインをする上では非常に大切な考え方なのでは🤔 ? と思うわけです。
もちろん、メディアクエリという素晴らしいものもあるわけで、そちらを使って各pxに合わせたmarginなんかを指定してもいいのです。
いいのですが、ちょっとめんどくさいし、コードも長くなってしまうし、修正も大変・・・。
モバイルファーストで、と考えると、更にその懸念は増します。
「推奨値」という考えが、マークアップの上でも、自分の頭の中にもあることは、さまざまな解像度のデバイスが入り乱れる時代では、とても有用なのではないかなーと思いました。
おわりに
ちなみにclamp()は、marginやwidthだけではなく、font-sizeなんかにも使えるので、「rem指定だけだと解像度によってはなんかおかしくなるぞ」という悩みにも応えてくれるのです...ｽｺﾞ
IEの終わりが見えた今、使いこなしたいCSS関数の一つだな〜と思いました !