こんにちは。
毎日新しいことをインプットして目からポロポロとウロコが落ちているkayoです。
今回はそんな私が実務で知った「もっと早く知りたかった！」という機能を紹介したいと思います。

1と2に関しては以前asaさんが紹介していたので詳しくはコチラも合わせてご覧ください。

2023-10-04

現場で使える便利なCSS｜5選

aspect-ratio

aspect-ratioとは、アスペクト比を保持するためのCSSプロパティです。
アスペクト比を指定することで画面幅を変えても同じ比率を保てるのでレスポンシブデザイン時にとても便利です。

アスペクト比とは、画像や画面の縦と横の長さの比率（縦横比）のことです。

代表的なアスペクト比は下記のとおりです。
・16:9　YouTubeや地上波デジタル放送
・1:1　Instagram
・4:3　iPhoneカメラのデフォルトやアナログテレビ

例えば上記のようにアスペクト比がバラバラな写真を横幅200pxで揃えました。高さはバラバラのままです。
すべての写真にアスペクト比3:2を設定します。

aspect-ratio値の記述方法

aspect-ratio: width / height;
設定したい比率を横幅：高さで指定します。

/* アスペクト比 3:2　 */
  aspect-ratio: 3 / 2;

設定したものがこちらです。

高さは揃いましたが、これだけだと写真が潰れてしまいます。
そこでobject-fitを指定します。

aspect-ratio: 3 / 2;
object-fit: cover; /*これを追加すると画像の中心が切り取られます*/

中心ではいまいちの場合はobject-positionで切り抜く部分を指定することができます。

cat1はobject-position:bottom、cat3にはobject-position:topを指定しました。

元の写真のサイズを調整しなくてもCSSのみで同じ大きさに変更することができました！

比率をそのまま記述すればいいので簡単ですし、一度覚えてしまえば忘れません。

aspect-ratioが効かないとき

ちなみに何度か使用した中でaspect-ratioがうまく効かない時がありました。考えられる原因を調べたので、もしうまくいかなかった方は下記を参考にしてみてください。

clamp関数

こちらもレスポンシブデザインの時に力を発揮します。

こんなときに便利

フォントサイズ

特に見出しなどの大きなサイズのテキストは画面の幅が小さくなった時にレイアウト崩れの要因になりやすいと思います。従来はブレイクポイント毎にサイズを指定していましたが、clamp関数を使えば自動的に、しかも滑らかに調整してくれます。

余白

clamp関数はmarginやpaddingにも使用することができます。
余白に関してはパーセントで指定したりしていましたがブレイクポイント直前あたりでレイアウトが崩れ、悩んでいました。そんな時にもclamp関数が便利です。

clamp関数の使い方

clamp関数の使い方はとても簡単です。

“最小値””推奨値””最大値”の3つの引数を指定します。

clamp(最小値px, 推奨値vw, 最大値px)

vw(ビューポートの幅に対する割合)を使うことで画面幅に合わせてサイズが可変してくれます。

ただ、そのままだと小さくなりすぎたり、大きくなりすぎたりしてしまうので、clampで最小値・最大値を決めて制御するといい感じにできます。

clamp(16px, calc(4px + 3.2vw), 36px)

上記のように記述をすると16pxより小さくなることはなく、36pxより大きくなることもありません。

ちなみに推奨値の計算は複雑なのでサイトを活用することをオススメします。最小画面幅・最大画面幅を自由に設定し、それぞれに最小値・最大値を入力するだけで簡単に計算できるので大変便利です。私が今回利用したのは[Type Fluidity]というサイトです。こちらではpxまたはremどちらで計算するかを選択することができます。

flex-direction

flex-directionを使うと並び方の方向を指定することができます。

パソコンでは横並び、スマートフォンでは縦並びにしたい場合、PCにflex、SPにblockを指定して記述することがあると思います。

PC {
    display: flex;
}
SP {
    display: block;
}

それをflex-directionを使用して記述するとどちらもflexのまま下記のように横並び、縦並びを指定することができます。

PC {
display: flex;
/*左から右へ*/
flex-direction: row;
}
SP {
/*上から下へ*/
flex-direction: column;　
}

row-reverseやcolumn-reverseで逆方向を指定することもできます。

私が特に便利だと感じたことは下記の2つです。

位置を指定できる

どちらもflexレイアウトなのでjustify-contentやalign-itemsを使用して位置を調整することができます。

余白の設定がらくちん

flexレイアウトのためgapが使用できます。gapは上下左右と指定することができるのでコンテンツ間の余白を1回の記述で指定することができます。例えば左右の間隔を20px、上下の間隔を30pxにしたい場合はこのように記述します。

gap: 30px 20px;
/*上下間の余白/左右間の余白*/

1行の記述で指定できるのは便利ですね！

pictureタグ

従来はパソコンとスマートフォンで異なる画像を読み込む時、どちらも記述してCSSでそれぞれをdisplay: none;で指定していました。

HTML

<div class=”pc”><img src="image_pc.jpg" alt="PCで表示する画像"></div>
<div class=”sp”><img src="image_sp.jpg" alt="スマホで表示する画像"></div>

CSS

.sp {
　　display: none;
}
@media screen and (min-width:768px) {
　.pc {
　　　　display: none;
　　}
　.sp {
　　　　display: block;
　　}
}

この場合、一度両方の画像を読み込んでから必要ないものを消すのでどうしても読み込みが重くなってしまいます。
そこでpictureタグを使用することで環境に応じて表示する画像を出し分けることができ、altで指定する代替テキストも一つで済むので記述量を減らすことができます。

<picture>
<!--画面幅最大〜768pxまではimage_pc.jpgが表示される-->
　<source srcset="image_pc.jpg" media="(min-width: 767.999px)">
<!--767.999pxより小さい画面幅ではimage_sp.jpgが表示される-->
　<img src="image_sp.jpg" alt="レスポンシブ画像"/>
</picture>

CSSの記述もいりません。すっきり！！

またsourceタグは複数記述できるのでブレイクポイントが2つ以上ある場合でも問題ありません。

details/summaryタグ

コーディング初心者の皆さん、アコーディオンを記述する時ってなんとなく難しく感じませんか？
imputタグで囲みチェックボックスのオンオフでアクションを切り替える、
または<div>や<ul><li>などたくさんのタグで囲んでJavaScriptで指定して、、、私も抵抗を感じていました。
そんな時にこのタグにたどり着き、嬉しさのあまり過呼吸になりました。

なんとdetailsタグで囲むだけでアコーディオンが実装されるのです！
さらにsummaryタグで囲んだものは要約となりラベルとして利用できます。

<details>
　<summary>要約部分(ラベル)がこちら</summary>
　アコーディオン中身がこちら
</details>

開閉自体が実装される（※アニメーションを気にしなければ。）のは便利ですね！
“アニメーションを気にしなければ”というのはクリックすると即座に開閉するため、自然な開閉のアニメーション（クリックすると下へスライドしてアコーディオンが開くようなアニメーションなど）をつける場合はjavascriptの記述が必要になります。
もちろんデフォルトの開閉マークを変更したりといったCSSでの装飾も必要になりますが、初めて知ったときは難しいと思っていたアコーディオンの苦手意識が薄くなりましたし、皆に教えたくなるくらい嬉しかったです。でもデザイナーの先輩方はおそらく全員知っています。
この記事を見てくださっている初心者の方々、教えたい欲を満たしてくださってありがとうございます。

このタグを使用するとスクリーンリーダーが開閉の状態についても読み上げますし、キーボードで開閉もできます。また、検索でヒットしたときにはアコーディオンが開いてくれるそうです。アクセシビリティにも考慮できます！
皆さんぜひご活用ください。

まとめ

いかがでしたでしょうか。
いずれももっと早く知っていたかった！と思うものばかりでした。
最近追加された機能もあればただ知らなかっただけ、という機能もありました。
今後また有用な機能を見つけたら、コーディング初心者仲間の皆さんに共有したいと思います。
またデザインソフトでの便利な機能も紹介できたらと思います。

日の出医療福祉グループ クリエイティブ室では医療・介護・保育を始めとする医療福祉業界の様々な制作を行っています。
気になった方はお気軽にお問い合わせからご相談ください。