WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： いっちー
カテゴリー： マークアップ >CSS

Webサイトのデザインを反映するために必要なCSSですが、その全てを把握している方は少ないのではないでしょうか？今回は、あまりあまり知られていない便利なCSSプロパティを紹介していきます。

連番を表示する方法

counter-incrementというプロパティを使用します。counter-incrementは「要素の連番の値を指定するプロパティ」です。

counter-incrementの使い方

• 1、リストを作る。(今回はulとli)
• 2、liにcounter-increment: increment;をつける。
  ※incrementに関しては任意の値なので、用途に合った名称に変更しましょう。
• 3、liに擬似要素を付け、content: counter(increment);を指定します。

応用

他にも下記のように、counter-increment: counterincrement 3;に変更することで、3ずつ増えるようにも変更できます。
liにクラス名をつけてそのクラス名にcounter-reset:increment;をつけると、p要素が現れるたびにカウントをリセットすることも可能です。

See the Pen
連番を表示する方法 by oonishi kiichi (@Tomahawk12)
on CodePen.

指定したクラスにスタイルを付ける方法

指定したクラスで終わる要素にスタイルを付ける方法

クラス名[test]から始まるul要素のみにクラス名を付けることができます。
ul[class^=”test”]

指定したクラスで終わる要素にスタイルを付ける方法

クラス名[test]で終わるul要素にクラス名を付けることができます。ul[class$=”test”]

See the Pen
指定したクラスにスタイルを付ける方法 by oonishi kiichi (@Tomahawk12)
on CodePen.

アスペクト比を保持したまま画像をトリミングする方法

aspect-ratioは、アスペクト比を保持することができるCSSプロパティです。aspect-ratioとobject-fitを使うことで楽にアスペクト比を保ちながら、画像をトリミングできます。

aspect-ratioの使い方

今回は長方形の画像を正方形にトリミングします。

• 1、まずはimgにwidth:100%;height:100%;object-fit:cover;を指定します。
• 2、外に囲ってるfigureなどにaspect-ratioで比率を指定します。

See the Pen
アスペクト比を指定して画像を表示する方法 by oonishi kiichi (@Tomahawk12)
on CodePen.

まとめ

今回は、私が便利だと思ったCSSプロパティを紹介いたしました。参考になれば幸いです。