知っておくと便利！あのサイトでさりげなく使われていたCSS小技集

• 作成：2014/11/10
• 更新：2014/12/01
• Web制作 >

2014/12/01：続編である「最近のサイトで使われていたCSS小技集」を書きました。

今回はCSSのみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたいCSSテクニックです。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

画像

• １．キュレーションサイト風のランキングボタン
• ２．画像の右上に三角形の要素を配置する
• ３．透過ネオンカラー
• ４．画像の表示範囲を指定
• ５．透過させながら画像を合成する
• ６．マスクをかける

簡単に要素を並べる

• ７．左右に分割して区切り線を入れる
• ８．段組（横並びで配置）
• ９．空要素に色をつける

条件に応じて

• １０．条件に一致しないと適用
• １１．条件一致すれば適用

テキスト

• １２．中だけ透過させてアウトラインを表示
• １３．文字詰め
• １４．アンチエイリアス

フルスクリーンメニュー

• １５．スライド
• １６．全画面モーダルウィンドウ
• １７．全画面オーバーレイ

画像

１．キュレーションサイト風のランキングボタン

キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させるWPプラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。

html

<ul class="sample">
  <li><img src="xxx.png" ><span class="post-title">テストテストテストテストテストテストテストテスト</span></li>

  <li><img src="xxx.png" ><span class="post-title">テストテストテストテストテストテストテストテスト</span></li>

  <li><img src="xxx.png" ><span class="post-title">テストテストテストテストテストテストテストテスト</span></li>
</ul> 

css

ul.sample {
  overflow: auto;
}

ul.sample li {
  counter-increment: sample ;
  clear: both;
  line-height: 2;
  list-style-type: none;
  position: relative;
}

ul.sample li:before {
  border-radius: 50%;
  background: #222;
  color: #fff;
  content: counter(sample);
  left: -5px;
  line-height: 1.5;
  font-size: 12px;
  padding: 0 5px;
  position: absolute;
  top: 5px;
}

ul.sample img {
  height: 55px;
  float: left;
  padding: 10px 10px 0 0;
  width: 55px;
}

span.post-title {
  font-size: 14px;
  line-height: 2;
}

counterプロパティを適用する要素にbefore、after要素を付けcontentプロパティでカウンタ名を指定することで連番を挿入することができます。

他にcontentプロパティは、h1{ content: url(logo.png);}のように文章やテキストなどに画像を入れたり置換することも可能です。

• content－スタイルシートリファレンス

２．画像の右上に三角形の要素を配置する

長方形のラベルは見かけるけど、三角形はまだ多くないのでメモ。画像の右上に三角形のスペースを作り文字を載せる方法。横幅200pxの画像の上に三角形ラベルを配置したい場合は以下のようになります。

html

<div class="image-inner">
  <img src="xxxx.png" width="200" height="100" >
  <span class="triangle">xxxx</span>
</div>

css

.image-inner {
  overflow: hidden;
  position: relative;
  width: 200px;
}

.triangle {
  background: #222;
  color: #FFF;
  font-size: 14px;
  padding: 70px 0px 3px;
  position: absolute;
  right: -97px;
  top: -41px;
  text-align: center;
  width: 200px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
 }

３．透過ネオンカラー

流行りの兆しがありそうなネオンカラーの透過（0.8の部分は調整してください）カラーコードをいくつかメモしておきます。写真の上に載せるとそれっぽく見えます。画像の上に載せるラベルなどに使ったり。

４．画像の表示範囲を指定

プロパティclip: rect(上, 右, 下, 左 )を使うとコンテンツや画像の表示範囲を指定することができます。positionプロパティの値はabsoluteにします。rectの中は(上 右 下 左)となります。

• イメージ/画像を切り抜く - TAG index Webサイト

５．透過させながら画像を合成する

:cross-fade()を使うと２枚の画像を合成できます。２枚の画像URLを指定します。100%に近づくにつれ１枚目の透過度が高くなります。

background: -webkit-cross-fade( url(xxx.jpg) ,url(xxx.jpg) , 50% );

• クロスフェードを実現するCSS4のcross-fade() - to-R

６．マスクをかける

WebKit系のみ可、IEは非対応ですがmask-imageを使うとマスクをかけることが出来ます。mask-sizeは表示サイズ、mask-positionは表示位置を示します。

-webkit-mask-image: url(img/mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;

• SafariとChromeのCSS対応：文字や画像にマスクをかける - builder by ZDNet Japan

簡単に要素を並べる

７．左右に分割して区切り線を入れる

簡単にカラム数を増やし区切り線を入れます。column-countでカラム数を増やし、column-ruleで区切り線を入れます。

html

<div>
  <p>
  それは一生いよいよその指導者として事のところで作ったた。いくら将来と用意違いはやはりこの採用たでかもから当てばいなけれには使用するだたて、多少にもまかり出ですましたた。
  </p>

  <p>
  しかも今安心にしてはいませのあるて、中学には、何しろ私かするてするれないない読んられるないないとするて、言葉はかけるて出したん。
  </p>
</div>

css

div {
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  -webkit-column-count: 2;

  -moz-column-rule: solid 1px #ccc;
  -ms-column-rule: solid 1px #ccc;
  -o-column-rule: solid 1px #ccc;
  -webkit-column-rule: solid 1px #ccc;
}

８．段組（横並びで配置）

要素を横並びさせるならテーブル構造のdisplay: tableとdisplay: table-cell;でも表現出来ます。

メリットはborderによる区切り線の高さを揃えたり、vertical-align: middle;で高さの中心に要素も持ってきたり出来るところです。

html

<div class="column-table">
<p class="mini-column">そうして筋か正直か誤解を担がたて、今中自分をあらといたいために大指図の絶対に思うらしくまし。</p>
<p class="mini-column">今をもどうしても考えて蒙りありますですますて、今にいくらとどまるが脱却はなぜ恥ずかしいでのな。</p>
<p class="mini-column">つまりこう万年は手本が好いで、ほかに何だか考えたでしとするば、ないたべきてそこでお安心へ味わっずたら。</p>
</div>

css

.column-table {
  display: table;
  width: 100%;
}

p.mini-column {
  display: table-cell;
  vertical-align: middle;
  width: 30%;
  word-break: break-all;
}

９．空要素に色をつける

セレクタに:emptyを指定することによって、空要素にスタイルシートを適用することが可能となります。

td:empty {background: black;}

• :empty疑似クラス (E:empty)｜セレクタ｜CSS HappyLife ZERO

条件に応じて

１０．条件に一致しないと適用

「○○」じゃない時スタイルを適用したい！そんな時は否定疑似クラス:not()を使います。例えばnot(h1)だけだと、bodyにも「h1以外」が適用されてしまうので、以下のようにクラス名などをつけ詳細まで指定します。

.logo :not(h1) {background: black;}

• CSS3で追加されたセレクタ「:not()」について考えてみました｜Webpark

１１．条件一致すれば適用

こちらはCSS4からのセレクタです。:matches()を使用すると、指定したセレクタと一致した場合にスタイルを適用出来ます。

• CSS4セレクタ (Selectors Level 4) の新機能

テキスト

１２．中だけ透過させてアウトラインを表示

text-strokeで文字にアウトラインを表示できます。color: transparent;を指定することで中を透過させる事が出来ます。分かりにくい時はフォントサイズを大きくします。

h1 {
  color: transparent;
  -webkit-text-stroke: 1px #222;
}

１３．文字詰め

text-rendering: optimizeLegibility;でカーニング処理を行います。以下のサイトによると「ヒラギノ角ゴ・明朝」を指定していればカーニングが働くとのことです。

• text-rendering: optimizeLegibility · terkel.jp

１４．アンチエイリアス

font-smoothingで文字を滑らかに表示します。

div {
  -webkit-font-smoothing: antialiased;
}

フルスクリーンメニュー

これから少し多くなりそうな画面全体をオーバーレイさせメニューを表示するものをCodropsからチョイスしました。

１５．スライド

画面の切り替え時に、画面の縦方向全体を使いブヨっとした動きを出すスライダー。

• Wobbly Slideshow Effect | Codrops

１６．全画面モーダルウィンドウ

要素をクリックすることで、全画面に中身が表示されるエフェクト。

• Putting CSS Clip to Work: Expanding Overlay Effect

１７．全画面オーバーレイ

オーバーレイでメニューを出します。visibilityプロパティでボックスを消さず、表示・非表示を切り替えています。こちらのエフェクトはよく見かけるようになりました。

• Fullscreen Overlay Effects