CSSでできる

矢印アイコンでメニュー画面上の 一つのアクセントに

  • このエントリーをはてなブックマークに追加

CONTENTS

CSSのメリットとは

最近は画像を使わずにページ上で色々な表現ができるようになったといえます。主な理由としてはCSS3対応のブラウザが増えたことなどがあげられます。画像ではなくCSSでページを表現することのメリットとしては下のようなものがあります。

・レスポンシブ対応がしやすい
・ページ読み込み速度の向上に繋がる
・モバイルユーザーにやさしい

CSSを少し応用することで様々な図形を作ることができますが、原理をあまり理解せずにコピー&ペーストで作っている人も多いのではないでしょうか。今回は、シンプルな矢印アイコンに関して、原理を踏まえた上で紹介していきたいと思います。
矢印アイコンの作成方法について解説する前に、原理を理解する必要があります。そこで、まずはCSSで三角を作る方法について紹介したいと思います。実は三角は左右の線の設定を行うことで実装できるのです。

三角形を作成する方法

試しに下のコードを記述してみてください。

.arrow{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid;
}

上のコードを入力すると、上向きの三角形が表示されます。

なぜこのように表示されるかについて説明します。まず、width(幅)とheight(高さ)が0になっていることが分かります。試しに幅と高さを0以上にしてみます。ここでは200pxに設定しています。

そうすると四角形が表示されます。一辺の幅は20pxのまま変更していないので20pxのままです。
*各パラメータついて区別をつけるために色を変更しています。border-leftは読んで字のごとく左線、border-rightは右線、border-bottomは下線を表しています。ここで、縦横幅を0にしてみます。

縦横幅を0にすると異なる4色の三角形の集合体のようなものが表示されます。次に、一番上の色をwhiteもしくはtransparent(透明)にしてみます。

少し勘のいい人は気付いたのではないでしょうか。実は、三角形の正体は縦横幅と縦横線の幅の数値なのです。上向きの三角形を作成したい場合、margin-bottomの色だけ設定し、その他の線の色はwhiteもしくはtranparentにします。つまり、矢印の向きと逆方向の線以外を無色にすれば三角形が作れることになります。これで数値を設定することで自由な三角形が作れるようになります。
次に矢印アイコンの作り方について紹介します。

矢印アイコンの作り方

矢印アイコンは先ほど紹介した方法を応用することで作成できます。三角形の場合に反して、矢印を作る場合は縦幅と横幅の数値は0以上である必要があります。まず始めに下のコードを記述してみてください。

.arrow {
width: 50px;
height: 50px;
border: solid 5px;
}
そうすると黒い線で囲まれた四角形が表示されます。

このままでは矢印にならないので2つ線を消す必要があります。
ここでは上向きの矢印を作ってみます。先ほどのコードにborder-colorと、transformの2つのパラメーターを加えます。

. arrow {
width: 50px;
height: 50px;
border: solid 5px;
border-color: black black transparent transparent;
transform: rotate(-45deg);
}

三角形の場合と同じように縦横線の色を変更し、それ以外の辺の色を白または透明にする原理は同じです。border-colorの色の設定値は左から上、右、下、左を表しており、矢印を向きを設定する際にはrotateを使用します。rotateは時計回りの回転角を表し、回転角を反時計回りに45°回転させることで上向きになることが分かります。

まとめ

今回は矢印アイコンの原理とCSSのみで矢印を作る方法について説明しました。最近ではCSSを使ってサイトに様々なアクセントを追加できるようになりました。画像と比較して容量の面で遥かに軽く、ページ表示時間などの短縮に繋がります。色の設定については以前紹介したように、フリーツールが出回っています。以前紹介したものと今回紹介した方法を応用し、サイトの一つのアクセントとして活用してみてください。

  • このエントリーをはてなブックマークに追加

記事の著者が提供するサービス

SEO対策・リスティング広告等のWEBマーケティング基礎攻略ならウェブクマ

運営会社情報


ウェブクマは「WEBプロモーションを活用して費用対効果を劇的にアップする方法」と題して、ウェブプロモーションをご担当される方にブックマークされいつも参照されるようなサイトを目指しております。
長年培ってきたSEOの実績やリスティング広告の智見、WEB制作の経験をもとに貴社のWebプロモーションの問題を解決する記事を多く掲載しております。
SEOベンダーとして、またWEB広告代理店として第一線で活躍する社員自らの経験を惜しみなく公開しておりますので、お困りの際は是非参考にしてみてください。 ウェブクマは株式会社DYMが運営しております。

webマーケティングのことならお問い合わせください

DYMでは様々なインターネット上のサービスを提供しております。興味をお持ちいただいた方は、気軽にご相談ください

  • 最新情報を受け取る
  • SEO対策・リスティング広告等のWEBマーケティング基礎攻略ならウェブクマ

    最新の情報をSNS・メールでご購読いただけます!

    各SNSからご購読いただけます