Travelogue

ビフォーアフター写真のアイコンや矢印をCSSだけで作る

公開日：

Before、Afterを写真で紹介するようなページは業種を限定せずいろいろなサイトで目にします。BeforeとAfterという文言でなくても、改修前・改修後とか、お掃除前・お掃除後とか、前後を比較するコンテンツは数多くあります。
今回はBeforeやAfterのアイコン部分や三角の矢印部分を画像にせず、CSSだけでコーディングする方法を考えてみます。

これらを画像で作る方法がダメなわけではありませんが、CSSで作ることのメリットを挙げるなら以下のような点があるんじゃないかと思います。

  • 画像を作って書き出す手間が省けるのでスピーディー！
  • Retinaディスプレイなどでもぼやけず綺麗
  • レスポンシブにするときに調整しやすい

写真を横に並べてアイコンを設置

まずは写真をfloatでふたつ並べ、赤い丸のアイコンをそれぞれの右上に設置してみましょう。

htmlはできるだけシンプルな形にしてあります。
実際に使う時は適宜classなどをつけて使いわけてください。
また、floatで横並びにしてありますので、必要に応じてclearfixなどでフロートをクリアしてください。

<ul>
<li><img src="images/thumb.jpg" alt=""><span>Before</span></li>
<li><img src="images/thumb.jpg" alt=""><span>After</span></li>
</ul>

ここまでのcssはこんな感じ。

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

li {
    float: left;
    position: relative;
}

li:last-child {
    margin-left: 50px;
}

li span {
    display: block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    background: #c00;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: -20px;
    right: -20px;
}

liタグにpositionのrelativeを指定してspanの赤丸をpositionで配置する時の基準点とします。rightとtopにマイナスの値を指定することで、右上にちょっとはみでた位置に赤丸が表示されます。
ふたつめのliにはlast-childで指定して左にマージンを空けてありますが、もちろんこれはclass等で指定しても構いません。
赤丸のspanはブロック要素化して縦横のサイズを指定。line-heightにheightと同じ長さを指定すると文字が縦位置中央に表示されます。

間に三角の矢印を設置する

ふたつの写真の間に三角の矢印を設置してみましょう。
上のcssに以下を追加します。

li:last-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30px;
    margin: auto;
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    border: 15px solid transparent;
    border-left: 15px solid #2a75bf;
}

ふたつめのliタグの前に擬似要素のbeforeで三角を作ります。
width、height、borderあたりは三角を作るための指定。これについては詳しく図解しているサイトが多いのでここでは省きますが、10pxや#2a75bfあたりの値を適当にいじってみると簡単に大きさや色を調整することができます。

positionで三角を絶対配置しています。
liにはすでに前述のコードでrelativeが指定されているので基準点となっています。
marginにauto、topとbottomに0として縦位置を中央に配置。
leftにマイナスの値を指定することにより、ふたつめのliの範囲の左端よりもさらに左側に三角が表示されています。

Pagetop