CSS Snippets #4

Tips

CSS Snippets #4

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

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

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

CSS Snippets #4 目次

  1. テキスト選択時のカラーを変更
  2. 2行目以降を字下げする
  3. 縦横比を維持した背景画像
  4. 背景画像をアニメーションでループ表示させる
  5. 背景カラーをアニメーションで切り替える
  6. グラデーションをアニメーションさせる
  7. linear-gradient()を使った分割背景カラー
  8. linear-gradient()で任意の破線をつくる
  9. repeating-linear-gradient()でストライプをつくる
  10. テーブルのセルに斜線を引く

1. テキスト選択時のカラーを変更

テキストを選択したときの背景や文字のカラーはCSSで下記のように記述することで任意の見栄えに変更でき、使用する際は下記にあるように::selectionだけでなくFirefoxで適用させるために::-moz-selectionも併せて記述します。
このサンプルコードの場合はテキストを選択すると背景カラーが緑で文字カラーが白になります。

CSS

::selection {
  background-color: #2ecc71;
  color: #fff;
}
::-moz-selection {
  background-color: #2ecc71;
  color: #fff;
}

目次へ

2. 2行目以降を字下げする

例えば注釈表示などで先頭に「※」を表示させ、2行目以降でその記号下には文章が表示されないような見栄えを実装したい場合は、CSSを下記のように記述します。

CSS

element {
  margin-left: 1em;
  text-indent: -1em;
}

目次へ

3. 縦横比を維持した背景画像

レスポンシブなどで便利な縦横比を維持しつつウィンドウいっぱいに背景画像を表示させる方法です。
下記は表示したい画像サイズが横800px・縦600pxだった時の指定方法となり、padding-topで記述している値は「画像高さ ÷ 画像横幅 × 100%」の計算結果を%指定しているものになります。

CSS

element {
  width: 100%;
  height: 0;
  padding-top: 75%;
  background: url(bg.png) center center / cover no-repeat;
}

計算が面倒な場合はcalcを用いたり、Sassの演算を利用するなどすると楽です。

目次へ

4. 背景画像をアニメーションでループ表示させる

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

背景画像をanimationを利用してループ表示させる方法で、デモのように上から下へ流れるものと右から左に流れるものとで、それぞれCSSは下記のように記述します。

CSS

/* top to bottom */
element {
  background-image: url(bg.png);
  animation: loopY 3s linear infinite;
}
@keyframes loopY {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 128px;
  }
}

/* right to left */
element {
  background-image: url(bg.png);
  animation: loopX 3s linear infinite;
}
@keyframes loopX {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -128px 0;
  }
}

それぞれデモとは逆方向に動かしたい場合は、上から下へのサンプルコードでbackground-position: 0 128px;となっているのをbackground-position: 0 -128px;に変更することで下から上に変更でき、右から左へにサンプルコードでbackground-position: -128px 0;となっているのをbackground-position: 128px 0;に変更することで左から右の動きへと変更することができます。

目次へ

5. 背景カラーをアニメーションで切り替える

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

数秒おきに指定したカラーへと次々に変化するもので、このサンプルコードの場合は4つのカラーが切り替わるように指定されています。

CSS

element {
  animation: animation-bg-color 10s infinite;
}

@keyframes animation-bg-color {
  0%, 100% {
    background-color: #3498db;
  }
  25% {
    background-color: #1abc9c;
  }
  50% {
    background-color: #9b59b6;
  }
  75% {
    background-color: #e74c3c;
  }
}

注意点としてはanimation-iteration-countinfiniteを指定しているので100%までいったらまた0%に戻るのですが、その際に0%と100%が異なるカラーだとパッと切り替わるように見えてしまうので、それを防ぐために0%と100%は同じカラーを指定しておきます。
または、少し動きは変わりますがanimation-directionalternateを指定すれば0%と100%とで同じカラーにする必要がなくなり、更に100%まで行った後に逆再生するような動きに見せられます。

目次へ

6. グラデーションをアニメーションさせる

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

こちらはanimationを利用してグラデーションがアニメーションする動きを実装する方法です。
background-sizeで幅を大きめに設定したグラデーションを作成し、それをanimationを使ってbackground-positionの位置をずらすように指定することで、背景のグラデーションがアニメーションする動きを実装することができます。

CSS

element {
  background: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 50%, #2bff88 100%) 0 0 / 200% 100% repeat;
  animation: animation-bg-gradient 5s infinite alternate;
}

@keyframes animation-bg-gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

目次へ

7. linear-gradient()を使った分割背景カラー

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

以前であれば複数の要素を使ったり場合によっては沢山のCSSを書かなければ実装できなかった分割された背景カラーを、background: linear-gradient()を使って下記のように記述することで簡単に実装することができます。

CSS

element {
  background: linear-gradient(90deg, #f7cac9 50%, #92a8d1 50%);
}

目次へ

8. linear-gradient()で任意の破線をつくる

通常CSSで破線を引くとなるとborder-top: 1px dashed #000;のようにして指定することが多いと思いますが、それをlinear-gradient()を使って実装する方法です。
linear-gradient()を使って実装することで例えば破線の間隔を変更したり、単色ではなくグラデーションカラーの破線を実装させることもできます。

CSS

/* linear-gradient #1 - 間隔を調整 */
hr {
  height: 1px;
  background-image: linear-gradient(90deg, #000, #000 75%, transparent 75%, transparent 100%);
  background-size: 20px 1px;
  border: none;
}

/* linear-gradient #2 - グラデーション */
hr {
  height: 4px;
  background-image: linear-gradient(90deg, transparent, transparent 50%, #fff 50%, #fff 100%), linear-gradient(90deg, #69d2e7, #a7dbd8, #e0e4cc, #f38630, #fa6900);
  background-size: 20px 3px, 100% 3px;
  border: none;
}

太さを変更したい場合はheightを、間隔を変更したい場合はbackground-sizeの値をそれぞれ調整することで任意の破線を表示することができます。

目次へ

9. repeating-linear-gradient()でストライプをつくる

repeating-linear-gradient()でストライプをつくる

以前であれば画像を使用して実装する必要があったものでも、今では簡易的なものであればCSSのみで表現できることも多くなってきました。
こちらもその中のひとつで、repeating-linear-gradient()を利用して下記のように記述することで、上のイメージのようなストライプ模様をCSSのみで表現することができます。

CSS

/* 垂直ストライプ */
element {
  background: repeating-linear-gradient(90deg, #91c4f3 0, #91c4f3 10px, #fff 0, #fff 20px);
}

/* 斜めストライプ */
element {
  background: repeating-linear-gradient(-45deg, #91c4f3 0, #91c4f3 10px, #fff 0, #fff 20px);
}

各カラーやpx指定されている数値を任意のものに変更すれば異なるカラーや間隔のストライプデザインに変更でき、向きや角度に関してはサンプルコードで90deg-45degとしている箇所で変更することができます。
上で紹介していたlinear-gradient()background-sizeを組み合わせる方法でも実装は可能ですが、このように繰り返して表示させる場合はrepeating-linear-gradient()が便利です。

ちなみに、CSSのグラデーションを使ってこのような模様を作成する方法は他にも多数あり、幾つか下記エントリーで実装方法を紹介しているので、興味ある方はご覧になってみてください。

目次へ

10. テーブルのセルに斜線を引く

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

デモの左上のセル内にあるような斜線をCSSで引く方法で、実装にはlinear-gradientを利用して下記のように記述します。

CSS

.line {
  background-image: linear-gradient(to top right, transparent, transparent 49%, #aaa 51%, transparent 51%, transparent 100%);
}

上記をCSSに記述後、斜線を表示したいセルに.lineを付与すれば斜線を表示させることができます。

また、セルにclassの付与するのが面倒だとかHTMLを編集できないといった状況なのであれば下記のように:empty疑似クラスを利用するという方法もあり、こちらを使用した場合は中身が空のthtdに自動で斜線が表示されるようにできます。

CSS

th:empty,
td:empty {
  background-image: linear-gradient(to top right, transparent, transparent 49%, #aaa 51%, transparent 51%, transparent 100%);
}

目次へ


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

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