CSS Snippets #5

CSS Snippets #5 目次

1. 属性やリンク先を用いたスタイル指定
2. 縦のスクロールバー領域を常に表示させる
3. 慣性スクロールを有効化する
4. CSS Blink
5. CSS Marquee
6. 印刷時の不要な余白を取り除く
7. 印刷時にhref属性を表示する
8. 最初と最後以外の要素にスタイル指定
9. 指定した要素以外にスタイル指定
10. 表示数に応じて最終行のスタイルを変更

1. 属性やリンク先を用いたスタイル指定

例えばa要素に対して全ページ共通で特定のスタイル指定はしているけど、target="_blank"が指定されているなら別窓アイコンを付けたいとか、リンク先がPDFであればPDFのアイコンというようにリンク先によって異なるアイコンを付けたいときがあります。
それらに対して特定のclassを付けてスタイル指定という方法でももちろん可能ですが、既に大量のページが作成されておりすべてに特定のclassを付与するのは面倒とかCMSなどのシステムを利用して生成されているのでHTMLをいじることができないといった場合は、属性セレクタを利用してスタイル指定する方法が便利です。
「特定の属性があるとき」「特定の属性・値があるとき」をはじめ、「前方一致」や「後方一致」などの指定も可能で、且つそれらを組み合わせるということもできるので様々な指定を行うことができます。

target="_blank" がついている要素に

上で例にあげたtarget="_blank"が指定されたa要素のみにスタイルを適用したい場合は下記のように記述します。

CSS

a[target="_blank"] {
  /* style here... */
}

リンク先がPDFの場合に

同じく上で例にあげたようにリンク先がPDFになっているa要素のみにスタイルを適用したい場合は後方一致を利用する形で下記のように記述します。

CSS

a[href$=".pdf"] {
  /* style here... */
}

組み合わせて使う

属性セレクタは複数のものを組み合わせて指定することもできます。
例えばtarget="_blank"が指定されており且つリンク先がPDFの場合にスタイルを適用したい場合は下記のように記述します。

CSS

a[href$=".pdf"][target="_blank"] {
  /* style here... */
}

class名に特定の文字が含まれているか

CSSでclass名をセレクタ指定する際、通常は適用させたいclass名をしっかりと記述する必要がありますが、部分一致を利用することでclass名の一部のみを記述してスタイル指定するということが可能です。
具体的な例として下記のようなHTMLがあったとします。

HTML

<div class="box-red">
  ...
</div>
<div class="box-blue">
  ...
</div>
<div class="box-yellow">
  ...
</div>

この3つのdivはそれぞれ別の見栄えにするために異なるclassが指定されていますが、基本となるスタイルは同じものを指定したいとします。
.box-red, .box-blue, .box-yellow { ... }のようにセレクタを複数指定するとか別途.boxなどのclassを追加してそれに対してスタイル指定するという方法もありますが、部分一致を利用して下記のように記述することでclass名が異なるこれら3つのdivにスタイルを適用させることができます。

CSS

[class*="box-"] {
  /* style here... */
}

ただし、この指定方法は注意しなければいけない点もいくつかあり、例えば複数人で作業をしていてこれが使用されているのを把握しないでclassを指定した場合など、異なるclass名を指定したはずなのに意図しないスタイルが適用されてしまったりすることがあります。
また、これはどのような指定をしているかにもよりますが、後日見返した場合や他のメンバーが見た場合に、ちゃんとしたid, class名で指定しているときよりもパッと見で把握しづらいということも起こりえます。
便利な指定方法ではありますが、使用する際はこういった点に注意する必要があり、もし多用するのであればある程度ルールを決めて利用するのをおすすめします。

input要素のtype属性で指定

個人的にここで紹介している中で属性セレクタを用いた指定で利用する機会が多いのがこの指定方法で、input要素のtype属性を属性セレクタで指定してスタイルを指定していきます。
input要素にはテキスト入力のtype="text"、ラジオボタンのtype="radio"、送信ボタンのtype="submit"などのように様々なタイプがありますが、単純にinputに対してスタイルを指定してしまうとこれらすべてにスタイルが適用されてしまいます。
それぞれにスタイルを適用したい場合は、それらを括っている親要素をセレクタに含めるとか各input要素にclassを指定していくという方法がありますが、下記のように記述することでそれらをしなくとも特定のtype属性を持つinput要素に対してのみスタイルを指定することができます。

CSS

input[type="text"] {
  /* テキスト入力のみ適用されるスタイル */
}

input[type="radio"] {
  /* ラジオボタンのみ適用されるスタイル */
}

input[type="submit"] {
  /* 送信ボタンのみ適用されるスタイル */
}

属性セレクタを使ったスタイル指定のサンプルをいくつか紹介してきましたが、このように上手く利用することでid, classの指定を最小限にしてシンプルなマークアップにできたり、自由にHTMLへid, classを指定できないときでも特定の属性が付いているのであれば意図した要素にスタイルを指定するといったことが可能になります。

目次へ

2. 縦のスクロールバー領域を常に表示させる

Macはデフォルトの設定でそもそもスクロールバーが表示されないので気にならないと思うのですが、Winだとコンテンツ量が多くてスクロールバーが表示されているページからコンテンツが少なくスクロールバーが表示されていないページに移動した際に、スクロールバーの分だけ表示がずれているように見えます。
これを回避したい場合はCSSに下記を記述し、この記述によりコンテンツ量に関係なく常に縦のスクロールバー領域が表示されるようになりページ移動時のずれも起きなくなります。

CSS

html {
  overflow-y: scroll
}

目次へ

3. 慣性スクロールを有効化する

狭い表示領域で沢山のコンテンツを入れたいときなどにoverflow: scrollを指定することでその領域をスクロールできるようになりますが、スマートフォンやタブレットでそのスクロールの動きを慣性スクロールにしたい場合はCSSで下記のように-webkit-overflow-scrolling: touch;を記述します。

CSS

element {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

目次へ

4. CSS Blink

文字列を点滅させる<blink>の動きをCSSで実装したもので、パッと切り替わるものと若干アニメーションが付いてふわっと切り替わるように見せるものとでそれぞれCSSを下記のように記述します。
また、いずれもanimation-play-state: paused;を利用して、要素にホバーしたときに点滅が一時停止する動きも実装しています。

CSS

element:hover {
  animation-play-state: paused;
}

/* パッと切り替わる */
element {
  animation: blink .5s linear infinite alternate;
}
@keyframes blink {
  0%, 50% {
    opacity: 0;
  }
  50.1%, 100% {
    opacity: 1;
  }
}

/* ふわっと切り替わる */
element {
  animation: blink 1s linear infinite alternate;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

目次へ

5. CSS Marquee

文字列をスクロールさせる（流れる動きを付ける）<marquee>の動きをCSSで実装したもので、まずHTMLは下記のようなものを使用します。

HTML

<div class="marquee">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>

上記HTMLに対して下記のようなCSSを指定することで、上のデモにもあるように文字列がスクロールされる動きを実装でき、さらにこのコードの場合はanimation-play-state: paused;を利用して、要素にホバーしたときにアニメーションが一時停止する動きも実装しています。

CSS

.marquee {
  overflow-x: hidden;
}
.marquee p {
  display: inline-block;
  margin: 0;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
  white-space: nowrap;
}
.marquee:hover p {
  animation-play-state: paused;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

目次へ

6. 印刷時の不要な余白を取り除く

印刷する際にページの上下左右に付いている余白が不要な場合は、下記のようなCSSを記述することで取り除くことができます。

CSS

@page {
  margin: 0;
}

目次へ

7. 印刷時にhref属性を表示する

印刷するページ内にリンクが設定されている箇所があった場合、そのまま印刷をするとそれらがどのURLにリンクされているかわからないですが、下記のようなCSSを記述することで印刷時にa要素に指定されているhref属性が表示されるようになり、印刷したものでもどのURLへリンクされているかを確認できるようにできます。

CSS

@media print {
  a::after {
    content: '('attr(href)')';
  }
}

目次へ

8. 最初と最後以外の要素にスタイル指定

:nth-child()を利用したテクニックで、複数ある要素に対して下記のように:nth-child()を組み合わせて指定することで、その要素の最初と最後以外にスタイルを指定することができます。

CSS

element:nth-child(n+2):nth-last-child(n+2) {
  /* style here... */
}

目次へ

9. 指定した要素以外にスタイル指定

同じく:nth-child()を利用したテクニックで、複数ある要素に対して下記のように:nth-child()と:not()を組み合わせて指定することで、指定したn番目以外にスタイルを指定することができます。
このサンプルコードは:nth-child(3)としているので、例えば要素が10あったとしたらその要素の頭から3番目の要素にだけスタイルは適用されずに、その他9個の要素に対してスタイルが適用されるという動きになります。

CSS

element:not(:nth-child(3)) {
  /* style here... */
}

目次へ

10. 表示数に応じて最終行のスタイルを変更

ちょっと伝わりづらいかもしれませんが、例えば上のイメージ左のような見栄えを各要素の幅をwidth: 50%;に指定してあとはfloat使うとか親要素にFlexboxを使って実装したとき、イメージ中央にあるように奇数になった場合は最後の要素の右側に大きく余白が出るような見栄えになります。
これをイメージ右にあるように奇数になった際は最後の要素幅を広げるといった動きを、CSSの:nth-child()と:last-childを組み合わせて下記のように記述することで実装できます。

CSS

element {
  float: left;
  width: 50%;
}
element:nth-child(odd):last-child {
  width: 100%;
}

上のように記述することで「奇数番目の要素且つ最後の要素」に対してスタイルを適用させることが可能になり、数が偶数になった場合はイメージ左のようなちゃんと分割された見栄えになるので、表示数の変動が多いような場所でもこのような形で指定をしておくことで数が変更される度にCSSを修正するという手間が必要なくなります。

目次へ