CSS Snippets #2

Tips

CSS Snippets #2

CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットを紹介します。
以前であれば画像やJavaScriptを用いなければいけなかったものがCSSのみで表現できたり、上手く使えばよりシンプル且つ効率良く記述するのに役立つものもあるので、特にこれからCSSを学びたいという人や学び始めたばかりでもう少しレベルアップしたいという人は是非試してみてください。

※以下で紹介するものは基本的にプレフィックスを省略しています。

※デモが用意されていないものについては、自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して実際の動きを確認してください。

CSS Snippets #2 目次

  1. 要素を上下反転・左右反転させる
  2. 要素の中身がないときのスタイル指定
  3. 可変幅要素を中央配置しつつテキストは左寄せにする
  4. attr()を使ってdata属性を表示させる
  5. 擬似要素を使って改行する
  6. 疑似要素で区切り記号を表示
  7. opacityで簡易ホバーエフェクト
  8. cubic-bezier()指定値一覧
  9. CSSカウンタで見出しやセクションに連番を表示
  10. CSSカウンタで順序リストの数値表示を自作する

1. 要素を上下反転・左右反転させる

特定の要素の見栄えを上下反転にしたい場合は、CSSで下記のように記述することで簡単に反転させることができます。

CSS

element {
  transform: scaleY(-1);
}

transform: scale(1, -1);でも可。

特定の要素の見栄えを左右反転にしたい場合は、下記のようにscaleXを使う形で記述します。

CSS

element {
  transform: scaleX(-1);
}

transform: scale(1, -1);でも可。

また、上下左右ともに反転したい場合は下記のように記述します。

CSS

element {
  transform: scale(-1, -1);
}

目次へ

2. 要素の中身がないときのスタイル指定

例えば複数のスタイルが指定された要素があり、それがある条件によって中身が空になってタグのみ表示されてしまうような場面があったとします。
そのままでも見た目に支障がなければ良いですが、中身がある想定で記述したスタイルが邪魔になってしまうときは、下記のように:empty疑似クラスを利用するとその要素の中身が空のとき(スペースや改行等もない状態)のスタイルを指定することができます。

CSS

element {
  padding: 1em;
  background: #3498db;
}
element:empty {
  padding: 0;
  background: transparent;
}

上記サンプルコードの頭にあるコードだけだと要素内が空だった場合でもpaddingbackgroundが適用されていることがわかる見栄えとなりますが、その下にあるように:empty疑似クラスを利用してそれらを打ち消すスタイルを別途記述しておけば、要素内が空だった場合はpaddingbackgroundが適用されないようになります。

ちなみに、下記のように:not()を利用して「要素が空ではなかった場合」という形でスタイルを指定するという方法もあります。

CSS

element:not(:empty) {
  padding: 1em;
  background: #3498db;
}

目次へ

3. 可変幅要素を中央配置しつつテキストは左寄せにする

幅を固定指定していない可変幅の要素を中央に配置しつつテキストは左寄せで表示させたい場合は、CSSを下記のように記述することで実装できます。

CSS

.parent {
  text-align: center;
}
.child {
  display: inline-block;
  text-align: left;
}

もちろんFlexboxを利用しても実装は可能で、その場合は下記のように親要素への指定のみで実装できます。

CSS

.parent {
  display: flex;
  justify-content: center;
}

目次へ

4. attr()を使ってdata属性を表示させる

例えばCSSのcontentを利用して文字列を表示させるようなスタイルがあるとき、そのスタイルが適用された要素が複数あってそれぞれ異なるものを指定するとか別の文字列にしたい場合にいちいちCSSをいじるのが面倒というときは、HTMLのdata属性とCSSのattr()を利用して組み合わせるという実装方法があります。

まず、下記のようなHTMLがあったとします。

HTML

<p data-text="foo">lorem ipsum</p>
<p data-text="bar">lorem ipsum</p>
<p data-text="baz">lorem ipsum</p>

上記HTMLに対して下記のようなCSSを記述すると、それぞれのp要素のdata属性(data-text)に記述されているものが「lorem ipsum」という文字列の前に挿入されるようになります。

CSS

p::before {
  content: attr(data-text);
}

これであれば今後同じような要素が出てきた場合もその要素にdata-textを記述すれば良いし、表示される文字列を変更する場合もHTML側で変更することができます。
今回はdata属性を用いて紹介しましたが、attr(href);とすればhref属性を、attr(title);とすればtitle属性といったように、その他の属性を表示させることも可能です。

目次へ

5. 擬似要素を使って改行する

例えばあるテキストを何らかの理由でbrを使わずに読点で改行を行いたい場合、手っ取り早い方法のひとつとして下記のように一部をspan要素で括るなどし、そこにdisplay: block;を指定する方法があります。

HTML

<p><span>あのイーハトーヴォのすきとおった風、</span>夏でも底に冷たさをもつ青いそら</p>

この方法を使いたくない(span要素をブロック要素にしたくない)という場合は、下記のように疑似要素を使って改行させることができます。

CSS

span::after {
  content: '\A';
  white-space: pre;
}

目次へ

6. 疑似要素で区切り記号を表示

同じく疑似要素を利用したもので、例えば各単語を区切る際の「,」やパンくずで使用する「>」などの記号をHTMLに直接記述したり画像を使用して表示するのではなく、CSSの疑似要素を用いて表示させる方法です。
下記はサンプルとして単語をul, liでマークアップしたものに、横並びにして且つ「,」を表示して区切られているように見えるようCSSを指定したものです。

HTML

 <ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

CSS

ul li {
  display: inline-block;
  list-style: none;
}
ul li:not(:last-child)::after {
  content: ',';
  margin-right: .5em;
}

ul li:not(:last-child)とすることで「最後以外のli要素」へのスタイル指定となり、そこへ::after擬似要素とcontentを使って「,」を表示させるように指定すれば、最後の要素後には区切り記号が表示されない形にすることができます。

目次へ

7. opacityで簡易ホバーエフェクト

a要素などにホバーしたことをわかりやすくするために通常時とは異なるスタイル(文字や背景のカラーを変更するなど)を適用させるということは多いと思いますが、それを手っ取り早く行うひとつとしてopacityを利用する方法があります。
例えば下記のように利用することでホバー時にa要素が少し透過されるようになり、様々なスタイルを調整しなくとも容易にホバー前後で異なる見栄えにすることができます。

CSS

a:hover {
  opacity: .5;
}

また、これを下記のようにtransitionと組み合わせて指定することでふわっと透過させる動きにすることができます。

CSS

a {
  transition: opacity .3s;
}
a:hover {
  opacity: .5;
}

目次へ

8. cubic-bezier()指定値一覧

CSSのtransition-timing-functionは、デフォルトでは名前指定できるのはlinear, ease, ease-in, ease-out, ease-in-outの5種類で、その他の動きについてはcubic-bezier()で指定していく必要があります。
その際、実装したいものが「Easing Function 早見表」に掲載されているものなのであれば、それぞれ下記のような値で指定することができます。

CSS

easeInSine     → cubic-bezier(0.47, 0, 0.745, 0.715);
easeOutSine    → cubic-bezier(0.39, 0.575, 0.565, 1);
easeInOutSine  → cubic-bezier(0.445, 0.05, 0.55, 0.95);
easeInQuad     → cubic-bezier(0.55, 0.085, 0.68, 0.53);
easeOutQuad    → cubic-bezier(0.25, 0.46, 0.45, 0.94);
easeInOutQuad  → cubic-bezier(0.455, 0.03, 0.515, 0.955);

easeInCubic    → cubic-bezier(0.55, 0.055, 0.675, 0.19);
easeOutCubic   → cubic-bezier(0.215, 0.61, 0.355, 1);
easeInOutCubic → cubic-bezier(0.645, 0.045, 0.355, 1);
easeInQuart    → cubic-bezier(0.895, 0.03, 0.685, 0.22);
easeOutQuart   → cubic-bezier(0.165, 0.84, 0.44, 1);
easeInOutQuart → cubic-bezier(0.77, 0, 0.175, 1);

easeInQuint    → cubic-bezier(0.755, 0.05, 0.855, 0.06);
easeOutQuint   → cubic-bezier(0.23, 1, 0.32, 1);
easeInOutQuint → cubic-bezier(0.86, 0, 0.07, 1);
easeInExpo     → cubic-bezier(0.95, 0.05, 0.795, 0.035);
easeOutExpo    → cubic-bezier(0.19, 1, 0.22, 1);
easeInOutExpo  → cubic-bezier(1, 0, 0, 1);

easeInCirc     → cubic-bezier(0.6, 0.04, 0.98, 0.335);
easeOutCirc    → cubic-bezier(0.075, 0.82, 0.165, 1);
easeInOutCirc  → cubic-bezier(0.785, 0.135, 0.15, 0.86);
easeInBack     → cubic-bezier(0.6, -0.28, 0.735, 0.045);
easeOutBack    → cubic-bezier(0.175, 0.885, 0.32, 1.275);
easeInOutBack  → cubic-bezier(0.68, -0.55, 0.265, 1.55);

ちなみに、普段からSassを使用しており且つ使用頻度が高いのであれば、以下エントリーで紹介した方法を利用するとアニメーション名で呼び出すことができるようになり、慣れてくると便利だと思います。

目次へ

9. CSSカウンタで見出しやセクションに連番を表示

CSSカウンタを利用して自動で連番が表示されるようにするもので、これを利用することで作成時に連番を付けていく手間はもちろん、後で増減する場合でも該当の部分を操作するだけで他の番号が自動で変更されるようにできます。
ここでは例として見出しに付ける方法で、まず下記のようにh2h3の見出しを括ったsectionが複数あるようなHTMLがあったとします。

HTML

<main>
  <section>
    <h2>section</h2>
    <h3>subsection</h3>
    <h3>subsection</h3>
    <h3>subsection</h3>
  </section>

  <section>
    <h2>section</h2>
    <h3>subsection</h3>
    ・
    ・
    ・
</main>

上記HTMLで見出しに連番を表示したい場合は、CSSを下記のように記述します。

CSS

main {
  counter-reset: section;
}
section {
  counter-reset: subsection;
}
h2::before {
  content: counter(section) '. ';
  counter-increment: section;
}
h3::before {
  content: counter(section) '-' counter(subsection) '. ';
  counter-increment: subsection;
}

counter-resetは特定のカウントのリセットや初期値の設定、counter-incrementは特定のカウントを増加させるものになり、カウントの表示はcontentcounter()を使って表示させます。
カウントはこのサンプルコードのように複数のものを表示したり文字列を挿入することもでき、CSSなのでここへさらに装飾を加えることもできます。

上記のHTMLとCSSを実際にブラウザで確認すると、下記のような形で連番が表示されます。

1. section
1-1. subsection
1-2. subsection
1-3. subsection

2. section
2-1. subsection
  ・
  ・
  ・

目次へ

10. CSSカウンタで順序リストの数値表示を自作する

同じくCSSカウンタを利用したもので、ul, olといったリストで数値を表示する際、list-style-typedecimaldecimal-leading-zeroを指定して表示するのが一般的ですが、それらでは表示できないような数値表示をcounters()counter-incrementを使って自作する方法です。
今回は個人的に利用する機会も多い2パターンを紹介します。

子に親の数値も表示させる

See the Pen Ljzwbe by Naoya (@nxworld) on CodePen.

このデモのように、子要素の数値表示の部分に親要素の数値を付けて表示させる方法です。
HTMLは特別な記述は必要ないのでよくある単純なol要素を利用している想定で、CSSを下記のように記述します。

CSS

ol {
  counter-reset: num;
  list-style: none;
}
ol li::before {
  content: counters(num, '-') '. ';
  counter-increment: num;
}
ol li {
  padding-left: 1.25em;
  text-indent: -1.25em;
}
ol li li {
  padding-left: 2.25em;
  text-indent: -2.25em;
}

※コード下部にあるpadding-lefttext-indentは、内容が2行以上になった場合に数値の下に回り込まないようにするためのものなので、これらが必要ない場合は削除して問題ありません。

数字を括弧で括る

See the Pen KvydZJ by Naoya (@nxworld) on CodePen.

割と利用する機会も多いと思う、数字を括弧で括った見た目にする方法です。
同じくHTMLは特別な記述は必要ないのでよくある単純なol要素を利用している想定で、CSSを下記のように記述します。

CSS

ol {
  counter-reset: num;
  list-style: none;
}
ol li::before {
  content: '(' counter(num) ') ';
  counter-increment: num;
}
ol li {
  padding-left: 1.75em;
  text-indent: -1.75em;
}

※コード下部にあるpadding-lefttext-indentは、内容が2行以上になった場合に数値の下に回り込まないようにするためのものなので、これらが必要ない場合は削除して問題ありません。

目次へ


その他のCSS Snippetsに関しては下記ページにまとめているので、興味ある方はこちらもご覧ください。

Close the search window,
please press close button or esc key.