アイコンとテキストが上下に並ぶボタン

ファイル

上のように、 「アイコンの下にテキスト説明がついたボタン」 を作成する方法を紹介します。

アイコンとテキストを同時に表示することで、 ユーザーにもわかりやすいインターフェイスとなります。 Webサイトでよく見かけるデザイン手法の一つです。

上のボタンは button要素で作るのではなく、div要素をボタンのようにスタイル設定し、 そのdiv要素をa タグで囲みます。

このボタンを縦に並べたり、横に並べたりすることで、 さまざまなレイアウトに対応したボタンとなります。

アイコンには「Fonw Awesome」を使用しています。

HTML

HTMLは複雑ではなく、a要素の中にdiv要素があり、 その中にアイコンフォントとテキストの記述があります。


<a href="" class="box-anchor">
  <div class="box">
    <i class="far fa-file fa-2x"></i>
    <div>ファイル</div>
  </div>
</a>

Font Awesomeを使用するための準備として下のscriptタグを記述しておく必要があります （バージョンは任意）。


<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

CSS

CSSは次の通りです。「div.box」に対するスタイル設定がメインとなります。


.box-anchor {
  text-decoration: none;
}

.box {
  background-color: #003fbf;
  color: white;
  width: 100px;
  text-align: center;
  border-radius: 10px;
  padding: 10px 0;
  margin: 10px;
  font-weight: bold;
}

.box:hover {
  background-color: #003fff;
}

ボタンらしく見えるように、 背景色、前景色、横幅、テキストの中央ぞろえ、 角丸、パディング、マージン、 フォントウェイト等のプロパティを設定しています。

この辺は自分の好きなように設定してください。

HTML・CSS入門