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

公開：2014-12-1
更新：2023-06-04
文章量：9065
CSS

TL;DR

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

インタラクティブ

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

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

<div class="box-fixed">
  <div class="field-wrap">
    <div class="field-detail"></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">
  <span>SAMPLE</span>
</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, 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 0.2s ease-in-out 0s;
  -webkit-transition: all 0.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: 0.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: 0.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">
  <figcaption class="overray-cap">キャプション</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, 0.8));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transition: all 0.35s;
  width: 100%;
  -webkit-transition: all 0.35s;
}

figure.overray:hover .overray-cap {
  transition-delay: 0.1s;
  -webkit-transition-delay: 0.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"></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: 0.4s;
}

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

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

<figure class="txline">
  <figcaption class="txline-cap">
    <span>CAPTION</span>
  </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 0.35s;
  -webkit-transition: all 0.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 小技集でした。

Next.js での制作を依頼する

MORE SKILL UP!

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