はじめまして！ウェブドアの八木です！

未経験で入社してから10ヶ月が経ち、日々先輩たちのコードに触れ学びつつ、自分でも新しい技術を調べたり試したりしています。

今回はその中で、個人的に「これは本当に便利！」と思い、実務でもよく使うCSSプロパティを厳選してご紹介します。これを読んでいただいた方のお役に立てれば嬉しいです！

要素の中央揃えにはmargin-inline:autoを使おう！

margin-inline:autoを使用した中央揃え

See the Pen margin-inline by 八木秀一郎 (@huuglfoo-the-solid) on CodePen.

ブロック要素を中央揃えしたいとき、よく使うプロパティといえば

margin: 0 auto;

margin-right: auto;
margin-left: auto;

といった指定ですよね。

ただ、margin: 0 auto;だとmargin-topやmargin-bottomが自動的に0になってしまいますし、margin-rightとmargin-leftを分けて書く方法は少しコードが冗長です。

そういった場合に便利なのがmargin-inline:autoになります！

margin-inline:autoとは

margin-inline: auto;は、要素のインライン方向（テキストの流れに沿った方向）に作用する「論理プロパティ」です！

「論理プロパティ」とは？
「論理プロパティ」とは、要素の配置やスタイリングを言語や書字方向（左から右、右から左）に依存せずに指定できるプロパティのことです。
例えば、margin-leftやmargin-rightといった物理的な方向を指定する代わりに、margin-inline-startやmargin-inline-endを使えば、書字方向に合わせて自動的に適切な値が適用されます。

僕もこの記事を書くにあたって初めて知りました！勉強になりますね～

テキストの下線にはtext-decoration : underlineが便利！

text-decoration : underlineを使用した下線

See the Pen text-decoration by 八木秀一郎 (@huuglfoo-the-solid) on CodePen.

borderを使用して下線を引くと、コードのようにテキストが折り返した際に下線は折り返さなかったり、下線の位置をline-heightやpadding-bottomなどで、調整する必要があり、イマイチ使いづらいです。

text-decoration: underlineを使用すれば上記の問題が一気に解決します！

text-decoration : underlineとは

text-decoration: underlineは、テキストに下線を引くためのCSSプロパティです。
このプロパティを使用すると、テキストの内容に応じて下線が自動的に調整され、折り返された場合でも途切れることなく適用されます！

また、text-decorationは下記の4つのプロパティをまとめたショートハンドです。

  • text-decoration-line（例：underlineやoverlineなど）
  • text-decoration-color（下線の色）
  • text-decoration-style（下線のスタイル）
  • text-decoration-thickness（下線の太さ）

これらに加え下線の位置を変更するにはtext-underline-offsetを使用します！

text-decoration-styleを使用して色んな下線を引いてみよう！

See the Pen text-decoration色々 by 八木秀一郎 (@huuglfoo-the-solid) on CodePen.

試しに色んな下線を引いてみました！
波線が引けるなんて便利ですね～！

皆さんも是非使ってみてください！

余談ですが、text-decorationでまとめて指定した場合、SafariやChromeで下線が表示されないことがありました。
その場合、少し手間ですが、text-decoration-lineやtext-decoration-colorなどを個別に指定すると下線が正しく表示されました。
同じような現象に遭遇した方は、よろしければお試しください！

CSSで簡単！aspect-ratioで比率をコントロール！

aspect-ratioとは

簡単に説明すると、アスペクト比を設定するCSSです！

アスペクト比とは、要素の縦と横の比率のことを指します。
いわゆる縦横比ですね。
例えば、テレビやモニターの主流サイズである16：9もアスペクト比のひとつです。
ちなみにブラウン管のテレビは4：3になります！懐かしいですね！

疑似要素とaspect-ratioで楽にアイコンを表示

実際の使用例を見ていきましょう！

See the Pen Untitled by 八木秀一郎 (@huuglfoo-the-solid) on CodePen.

コーディングをしていると、疑似要素を使ってアイコンなどを表示させる場面がよくあるかと思います。

しかし、疑似要素を使用する場合は、widthだけでなくheightも指定する必要があります。
特にレスポンシブ対応でwidthを変更する際には、heightも合わせて変更する必要があり、少し手間に感じることがあります。高さの指定が不要なimgタグと比較すると面倒なポイントです。

そこで使用するのがaspect-ratioです！

例のコードのようにwidthを指定し、

aspect-ratio: 30 / 22;

と記載すると、画像のアスペクト比が30:22に設定され、その比率で表示されます。
さらに、widthの値を変更しても、自動的に設定したアスペクト比に基づいたheightが適用されるため、調整が非常に簡単です。

いかがでしょうか！
このようにaspect-ratioを使用すると画像のアスペクト比を設定することができ、非常に便利です！
疑似要素だけでなく、iframeタグに使用したり、色々なシーンで活用できます！
皆さんも是非使ってみてくださいね。

CSSだけで形を変える！clip-pathの使い方

clip-pathとは

clip-pathは、要素を好きな形に切り抜くためのCSSです！
かつて三角形をCSSで作成する場合、borderを使用して作成していた方も多いと思います。
しかし、clip-pathを使えば、三角形だけでなく、さまざまな簡単な図形を手軽に作成することができます！

clip pathには以下のような種類があります。

  • polygon() : 多角形
  • inset() : 四角形
  • circle() : 円形
  • ellipse() : 楕円形

今回はこの中でも汎用性の高いpolygon()を使用して図形を作成していきます！

clip-pathで色んな図形を作ってみよう！

See the Pen clip-pathで色んな図形 by 八木秀一郎 (@huuglfoo-the-solid) on CodePen.

どうでしょうか。
clip-pathの汎用性の高さが伺えると思います！

clip-pathを直感的に使用したい場合は以下のジェネレーターがおすすめです！

https://bennettfeely.com/clippy

ジェネレーターを見ていただくとわかると思いますが、今回作成した図形はほんの一部で、まだまだ色んな図形を作成することができます！

レスポンシブデザインに最適！clamp()の魅力

font-size: clamp(最小値,推奨値,最大値);

clamp()は、CSSで使える関数の一つで、値に「最小値」「推奨値」「最大値」を設定して柔軟に制御できる便利な関数です！
レスポンシブデザインでは、画面サイズに応じてフォントサイズや要素の幅を調整する場面が多いですが、clamp()を使えば、メディアクエリをいちいち書かなくても簡単に対応できます。

では具体的な例を見てみましょう！

font-size: clamp(1rem, 2.5vw, 2rem);

各値について、詳しくご説明します！

■最小値
最小値は、値がこれ以上小さくならないように設定する下限の値です。
上記の例では、フォントサイズがどれだけ画面幅が狭くなっても、1remより小さくなることはありません。これにより、画面が狭くても文字が小さすぎて読みにくくなることを防ぎます！

■最大値
次に最大値についてですが、これは値がこれ以上大きくならないようにする上限の値です。
上記の例では、フォントサイズが2remを超えることはありません。これにより、画面が広くなっても文字が大きくなりすぎて不自然になるのを防ぎます。

■推奨値
最後に推奨値についてご説明します！
上記の例では、推奨値として設定された2.5vwが、画面の幅（ビューポート幅）に基づいて計算されます。

  • 画面幅が狭い場合（例えば500px）：
    推奨値である2.5vwは12.5pxになりますが、これは最小値の1rem（16px）を下回るため、最小値が適用されます。
  • 画面幅が広い場合（例えば2000px）：
    推奨値である2.5vwは50pxになりますが、これは最大値の2rem（32px）を超えるため、最大値が適用されます。
  • 画面幅が適度な場合（例えば800px）：
    推奨値である2.5vwが20pxになるため、この値がそのまま適用されます。

つまり、推奨値とは、画面幅に応じて変化する可変の値のことです。
ただし、推奨値が最小値を下回る場合は最小値が、最大値を超える場合は最大値が適用されます。
これにより、画面幅に合わせた柔軟なデザインを実装することができます！

clamp()のメリット

  1. メディアクエリを減らすことができる
    通常は画面幅に応じたスタイルを調整するために複数のメディアクエリを書く必要がありますが、clamp()を使えば1行で済みます。これにより、コードがシンプルになり、保守性も向上します。
  2. 柔軟なレスポンシブデザインが可能
    最小値・推奨値・最大値を設定することで、画面幅に応じて流動的に値を変化させ、極端なサイズ変化を防ぐことができるので、レスポンシブデザインに最適かと思われます。
  3. 幅広いブラウザの対応
    clamp()は主要なブラウザ（Chrome、Firefox、Safari、Edgeなど）でサポートされているので、実際のプロジェクトで安心して使用できます。

パッと思いつくだけでもこれだけのメリットがあります！

また、clampの値をもっと直感的に操作したい場合は、

Min-Max-Value Interpolation

上記ジェネレーターがおすすめです！

clamp()を活用してコーディングを楽にしましょう！

まとめ

いかがだったでしょうか。

今回は、実務でも使う便利なCSSプロパティをいくつかご紹介しました！

  • margin-inline：要素の中央揃
  • text-decoration：テキストに下線を適用
  • aspect-ratio：簡単にアスペクト比を設定。
  • clip-path：要素を好きな形に切り抜く。
  • clamp()：最小値・最大値・推奨値を設定して柔軟に値を制御。

この記事を読んでいただいた方のコーディングが少しでも楽になれば幸いです！
ありがとうございました！