[続編] 効率的になった！最近のサイトで使われていたCSS小技集

• 作成：2014/12/1
• 更新：2014/12/01
• Web制作

前回（あのサイトでさりげなく使われていたCSS小技集）の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりとCSSのみで実現できる方法を書いておきます。

もくじ

インタラクティブ

• １．マウスオーバーで自動スクロールさせる
• ２．背景を固定し、ゴーストボタンを天地中央に配置

ボックス

• ３．ボックスを左右中央に配置し、中を等幅にする
• ４．ページネーション：中を等間隔にする
• ５．自動計算させる

UI

• ６．ナビゲーション：下線を中心から開く
• ７．カテゴリリスト：CSSで円と矢印を同時に作る
• ８．タグクラウド：CSSで三角形と円を同時に作る

マウスオーバーとキャプション

• ９．グラデーションのキャプションを出す
• １０．一旦モノクロに変更し、マウスオーバー時に色をつける
• １１．テキストと下線を中心から開く

インタラクティブ

１．マウスオーバーで自動スクロールさせる

最近、マウスオーバーで縦長のページを部分的に見せるWordPressテーマが少しづつ出てきました。こちらは簡易的ながらマウスオーバーにて縦長の画像を見せるコードです。長めの画像を用意してはみ出した部分はoverflow: hidden;で隠しながらtransitionで遅延させ擬似的にスクロールしているように見せます。

html

<div class="box-fixed">
  <div class="field-wrap">
    <div class="field-detail">
      <img src="img/long.png" >
    </div>
  </div>
</div>

css

.box-fixed {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.field-wrap {
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.field-detail {
  transition: all 1s;
}

.field-detail img {
  width: 100%;
}

.field-detail:hover {
  margin-top: -2000px;
  transition: all 15s;
  -webkit-transition: all 15s;
}

２．背景を固定し、ゴーストボタンを天地中央に配置

画像を背景いっぱいまで広げ固定させ、天地中央に配置したゴーストボタンを配置する見せ方が近年では多くなってきました。background-attachment: fixed;で背景を固定しbackground-size: cover;で背景をピッタリ配置します。天地中央にしたいのでdisplay: table;を使います。ボタンの視認性を高めるために画像の上に透過色をのせています。

html

<div class="fixed-header">
  <p><span>SAMPLE</span></p>
</div>

css

.fixed-header {
  background: url(img/long.png) 0 0 no-repeat;
  background-attachment: fixed;
  background-size: cover;
  display: table;
  height: 200px;
  width: 100%;
}

.fixed-header p{
  background: rgba(0,0,0,.5);
  color: #fff;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.fixed-header span {
  border: 1px solid #fff;
  padding: 10px 20px;
}

上を利用して、WordPressのアイキャッチ画像を記事ごとに取得し背景に使うことも出来ます。background:url()は記事ごとに変更する必要があるので直接ソース内に記述してもいいですね。

<div style="background: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>) 0 0 no-repeat; background-attachment: fixed; background-size: cover; background-position: center; opacity: 0.9;">

ボックス

３．ボックスを左右中央に配置し、中を等幅にする

floatを使わず横並びと均等配置させたいのでフレキシブルボックスレイアウトを使います。横並びは要素にdisplay: flex;と記述するだけで実現可能でしたよね！後は、justify-content: center;で中央に詰めて配置、後はwidthで横幅を指定すれば等幅になります。モバイル時にはdisplay: block;などで解除します。

html

<ul class="fbox">
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>

css

ul.fbox {
  display: flex;
  display: -webkit-box;/* Safari */
  list-style: none;
  padding: 0;
  justify-content: center;
  -webkit-box-pack: center;
}
  
ul.fbox li {
  background: #ccc;
  margin: 10px;
  padding: 10px;
  width: 20%;
  word-wrap: break-word;
}

４．ページネーション：中を等間隔にする

こちらもdisplay: flex;で横並び、justify-content: space-around;を使い等間隔にしています。justify-contentは詰め方を指定するプロパティです。

html

<ul class="pagination">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

css

ul.pagination {
  display: flex;
  list-style: none;
  justify-content: space-around;
  padding: 0;
  /* Safari 6.1+*/
  display: -webkit-flex;
  -webkit-justify-content: space-around;
  text-align: center;/*旧ブラウザ用*/
}
  
ul.pagination li {
  background: #ccc;
  display: inline-block;/*旧ブラウザ用*/
  margin: 10px;
  padding: 10px;
  word-wrap: break-word;
}

５．自動計算させる

割り切れないような中途半端な数字に対してはcalcで自動計算するという方法もあります。以下の例だと合計2%だけマージンを取って、width: calc(98% / 3);といった感じで、残りの98%を３分割します。両端にマージンを入れたくない時や、ボーダー分の幅を引きたい時に。

html

<ul class="cal">
  <li></li>
  <li></li>
  <li></li>
</ul>

css

.cal {
  list-style: none;
  padding: 0;
  overflow: hidden;
  zoom: 1;
}

.cal li {
  background: #222;
  margin-right: 1%;
  height: 30px;
  float: left;
  width: 32.6%;/*非対応ブラウザ用*/
  width: calc(98% / 3);
}

.cal li:last-child {
  margin-right: 0;
}

UI

６．ナビゲーション：下線を中心から開く

transformプロパティは拡大・縮小・回転などの変形処理を行うことができます。こちらはマウスオーバー時に中心からアンダーラインが広がっていくように見える方法です。ボーダーを使わず、要素を拡大・縮小させるtransform: scale();を使って開閉させます。

html

<nav class="gn">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

css

.gn ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav.gn li {
  display: inline-block;
  margin: 10px;
  padding: 10px;
}

nav.gn li a {
  color: #222;
  letter-spacing: 2px;
  position: relative;
  text-decoration: none;
}

nav.gn li a:hover:before {
  visibility: visible;
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
}

nav.gn li a:before {
  background-color: #222;
  bottom: -5px;
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  visibility: hidden;
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transition: all .2s ease-in-out 0s;
  -webkit-transition: all .2s ease-in-out 0s;
}

７．カテゴリリスト：CSSで円と矢印を同時に作る

before要素で円、transform: rotate(45deg)で矢印をつくり円の上に乗せます。矢印はborder-radiusで滑らかにします。同じスピードで戻るようにtransitionをhover以外にも指定します。

html

<ul class="arrow">
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>

css

.arrow li{
  background: #ddd;
  color: #9E9E9E;
  list-style: none;
  margin: 0 0 1px 0;
  padding: 15px;
  position: relative;
  transition: .5s linear;
}

.arrow li::before {
  background: #eee;
  border-radius: 50%;
  content: "";
  padding: 14px;
  position: absolute;
  right: 11px;
  top: 10px;
  width: 1px;
}

.arrow li::after{
  border-right: 4px solid #9E9E9E;
  border-top: 4px solid #9E9E9E;
  border-radius: 2px;
  content: "";
  margin: 0 0 0 10px;
  height: 10px;
  right: 20px;
  position: absolute;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: 17px;
  width: 10px;
}

.arrow li:hover {
  background: #bbb;
  color: #fff;
  transition: .5s linear;
}

８．タグクラウド：CSSで三角形と円を同時に作る

擬似要素を使いbeforeで三角形、afterで円をつくりタグクラウドを作ります。

html

<div class="tagcloud">
  <a href="#">テキスト</a>
  <a href="#">テキスト</a>
  <a href="#">テキスト</a>
</div>

css

.tagcloud a {
  background-color: #ccc;
  border-radius: 2px 0 0 2px;
  color: #222;
  display: inline-block;
  height: 30px;
  margin: 5px 10px;
  line-height: 1.8;
  padding: 0 15px;
  position: relative;
  text-decoration: none;
  transition: all 1s linear;
}

.tagcloud a:hover {
  color: #3498db;
}

.tagcloud a:after {
  background: #eee;
  border-radius: 50%;
  content: "";
  padding: 5px;
  position: absolute;
  right: 0;
  top: 10px;
  width: 1px;
}

.tagcloud a:before {
  border: 15px solid transparent;
  border-left: 15px solid #ccc;
  content: "";
  position: absolute;
  right: -30px;
}

マウスオーバーとキャプション

９．グラデーションのキャプションを出す

マウスキャプションの種類の中でもグラデーションをオーバーレイするのは、まだ少ないかなと思ったので。translateY()でY軸方向に移動させます。通常時はtranslateY(100%)で外に出し、マウスオーバー時に元の位置に戻しています。

html

<figure class="overray">
  <img src="img/test004.jpg" >
  <figcaption class="overray-cap"><p>キャプション</p></figcaption>
</figure>

css

figure.overray {
  color: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

figcaption.overray-cap {
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.8));
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transition: all .35s;
  width: 100%;
  -webkit-transition: all .35s;
}

figure.overray:hover .overray-cap {
  transition-delay: .1s;
  -webkit-transition-delay: .1s;
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

figure.overray img {
  vertical-align: bottom;
  width: 100%;
}

figcaption.overray-cap p {
  padding: 25% 0;
}

１０．一旦モノクロに変更し、マウスオーバー時に色をつける

横並びを実現するdisplay:boxを使い横に並べます。画像をグレースケールにする-webkit-filter: grayscale()の値をマウスオーバー時に0%に変更しグレーを解除させます。

html

<div class="sample-filter">
  <img src="img/test004.jpg" >
  <img src="img/test004.jpg" >
  <img src="img/test004.jpg" >
</div>

css

.sample-filter img {-webkit-filter: grayscale(100%);}
.sample-filter img:hover{
  filter: none;
  -webkit-filter: grayscale(0%);
}
.sample-filter {
  display: box;
  display: -webkit-box;
}
.sample-filter img{width: 30%; transition: .4s;}

１１．テキストと下線を中心から開く

マウスオーバー時に要素を拡大・縮小させるtransform: scale();を使って開閉させます。

html

<figure class="txline">
  <img src="img/test004.jpg" >
  <figcaption class="txline-cap">
    <p><span>CAPTION</span></p>
  </figcaption>
</figure>

css

figure.txline {
  color: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

figcaption.txline-cap {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  transition: all .35s;
  -webkit-transition: all .35s;
  transform: scaleX(0); 
  width: 100%;
  -webkit-transform: scaleX(0); 
}

figure.txline:hover .txline-cap {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
}

figure.txline img {
  vertical-align: bottom;
  width: 100%;
}

figcaption.txline-cap p {
  font-size: 2em;
  margin: auto;
  height: 10%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

figcaption.txline-cap span {
  border-bottom: 1px solid #fff;
  border-top: 1px solid #fff;
  padding: 10px;
}

以上、近い将来使う頻度が高くなるかもしれないCSS小技集でした。

2013/12/16

とても効率的になった！HTML5に関する「役立つ」まとめ

サイト構築をするときに、フォームまわりの改善や動画やAPIを使わなくてはいけない機会があったので、ついでにHTML５のマークアップをおさらいをしました。今回はサイトを構築する上

2013/02/25

そうとう楽！WEB制作、ビジネスを助ける「テンプレート」まとめ

急に仕事をふられたけど いちから作っている時間はない だけど、素早く「それなり」に見せたい 見ているだけでデザインの参考になりそうなテンプレートや、無駄な作業

2016/04/25

これは凄い！Web制作が捗るモーフィング系の最新スニペットまとめ

ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。

2015/11/16

プログラミングやコーディングを学習したい人に役立つツール

初心者の生徒さんに「どうやったらプログラミングできるようになりますか、コーディングする上で最初に何を準備するとよいですか」と漠然と質問されることが多いので「一番最初は何を使