CSSのみで画像のようなボタンを作成する

CSSのみで画像のようなボタンを作成する

画像を使わずにCSSで描画するメリット

レイアウトに画像を使用した場合、CSSで描写したものよりも重くなってしまいます。スマホなど回線が弱い端末からの閲覧を考慮すると、画像使用は極力抑えるに越したことはありません。
また画像の修正は画像ダウンロード→画像編集ソフトで修正→再アップロードといった手順が必要で何かと手間です。

そこでグラデーションやシャドウなどを使って、CSSのみで画像のようなボタンを作ってみましょう。

見出しを装飾する

見出しを装飾してみましょう。HTMLは単純な見出しです。

lt;h1>見出し</h1>

単純に塗りたくるだけだとこんな感じでしょうか

1{
  background-color:blue;
  color:white;
  width:120px;
  padding:4px 12px;
}

グラデーション、角丸、テキストシャドウ、ボックスシャドウを使って装飾してみました。

1{
  background:-webkit-gradient(linear,left top,left bottom,from(blue),to(navy));
  color:white;
  width:120px;
  padding:4px 12px;
  border-radius:4px;
  text-shadow:1px 1px 4px #000;
  box-shadow: 0px 0px 1px #000; 
}

単純に塗ったものに比べて立体感が出ています。

リストを装飾する

続いてリストを装飾してみましょう。簡単なナビゲーションリストを想定します。

lt;ul>
  <li>ナビ１</li>
  <li>ナビ２</li>
  <li>ナビ３</li>
</ul>

まずは単純に塗りたくってみます

l li{
  background-color:black;
  color:white;
  border-right:solid 1px #fff;
  padding:4px 8px;
  text-align:center;
  float:left;
}

なんだか野暮ったい感じのするナビゲーションですね・・・

グラデーションとシャドウを使ってみます。

l li{
  background:-webkit-gradient(linear,left top,left bottom,from(black),to(#585858));
  background:gradient(linear,left top,left bottom,from(black),to(#585858));
  color:white;
  border-right:solid 1px #fff;
  padding:4px 8px;
  text-align:center;
  float:left;
  box-shadow: 3px 3px 3px black; 
}

浮かび上がってる感が出ました。

リンクを装飾する

リンクを装飾してみます。単純なリンクです。

lt;a href="#">リンク</a>

下線だけ消しておきます。

{
  text-decoration:none;
}

普通のリンクですね。

頭に三角形を付けてみましょう。

{
  text-decoration:none;
  position:relative;
  padding-left:18px;
  margin: 24px 0;
}

a:before{
  content: "";
  top:2px;
  left:4px;
  position: absolute;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid blue;
}

俄然リンクらしくなりました。

こんな感じで、CSSで表現できる箇所は極力CSSで記述してしまいましょう。サイトの負荷を減らせるし、修正などの際にも効率的に作業できるようになります。

B!
LINE