プログラミング

【CSS】ボタンの右端に矢印やアイコンを表示させる方法

ボタンのテキストを中央に配置しつつ、ボタンの右端に矢印アイコンを表示させたい!けれど、コードの書き方が分からないよ~!

 

今回はそんな悩みを解決するコードの書き方を紹介します。

この方法を覚えれば、アコーディオンメニューを作成する時などに活用できますよ。

この記事で作れるもの

次のようなボタンを作成します。

・ボタンの中央に「とらねこ」と書かれている

・ボタンの右側に「⇩」マークを配置

ボタンの右側に下矢印を配置した場合のイメージ

今回も分かりやすいように、超シンプルなコードを書いていきますよ。

コードの紹介

まずはHTMLを記述していきます。

続いてCSSも記述していきます。

黄色で塗った行が今回のポイントになる部分です。

コードの解説

width・height・border(ボタン装飾)

これらを使ってボタンのデザインを作っていきます。

ちなみに、意識を持っていくべきは[height]のサイズ。[height]と[line-height]を同じサイズにすることで、テキストを上下方向の中心に配置することができます

なお、背景色をつけたい場合は別途[background-color]を使って装飾しましょう。ボタンの角を丸くしたい場合は[border-radius]を追加で使います。

text-align・line-height(テキストの位置調整)

[text-align]はテキストの水平方向の配置を調整するプロパティです。これを使って水平方向の中心へ配置します。ちなみに、[text-align]は[display: block;]には効かないので注意が必要です。例えば、spanはokですが、divはNG。

[line-height]は行の高さを調整するプロパティです。テキストは行の中央に配置されるので、[line-height]と[height]を合わせると、テキストがボタンの上下中央に配置されるという仕組みです。

position・right(アイコン等の配置)

今回のポイントになるプロパティです。

まず、親要素に対して[position: relative;]を記述します。次に、子要素に対して[position: absolute;]を記述します。

こうすることで、親要素の範囲内で、絶対的な位置へ要素が配置されます。

分かりやすく言うと、本来の配置ルールに関わらず、こちらが指示した位置に配置されます

今回は[right: 10px;]と指示しているので、親要素の一番右端から10px内側に配置されています。

お役立ちメモ

・親要素に[position: relative;]を記述せずに、子要素へ[position: absolute;]を記述すると、親要素の枠を超えて飛んでいってしまいます。

・ボタンを両端ぞろえにしたい場合は[margin: 0 auto;]でOK。

・アコーディオンメニューで頻出のアイコンは下記を参照してください。便利です。

【headに貼り付けるコード】

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.8.2/css/all.css”>

【アイコン】

下記ページ上部にある[<i class=”~”></i>]を表示したい箇所に貼り付け

まとめ

今回の記事はいかがでしたでしょうか。

自分はこの事でプログラミングを始めて間もない頃に躓きました。もし、同じ境遇の方の役に立てていたのなら幸いです。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です