今回はそんな悩みを解決するコードの書き方を紹介します。
この方法を覚えれば、アコーディオンメニューを作成する時などに活用できますよ。
目次
この記事で作れるもの
次のようなボタンを作成します。
・ボタンの中央に「とらねこ」と書かれている
・ボタンの右側に「⇩」マークを配置
今回も分かりやすいように、超シンプルなコードを書いていきますよ。
コードの紹介
まずはHTMLを記述していきます。
1 2 3 4 | <div class="parent"> <span class="child1">とらねこ</span> <span class="child2">↓</span> </div> |
続いてCSSも記述していきます。
1 2 3 4 5 6 7 8 9 10 11 12 | .parent { width: 500px;/*-- ボタンの横幅（任意の値） --*/ height: 50px;/*-- ボタンの縦幅（任意の値） --*/ border: 1px solid black;/*-- ボタンの枠線（任意の値） --*/ text-align: center;/*-- テキストの中央配置（左寄せでもいい） --*/ line-height: 50px;/*-- サイズをheightに合わせる --*/ position: relative; } .child2 { position: absolute; right:10px;/*-- 右端からの距離（任意） --*/ } |
黄色で塗った行が今回のポイントになる部分です。
コードの解説
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>]を表示したい箇所に貼り付け
- angle-up アイコン：angle-up | Font Awesome
- angle-down アイコン：angle-down | Font Awesome
まとめ
今回の記事はいかがでしたでしょうか。
自分はこの事でプログラミングを始めて間もない頃に躓きました。もし、同じ境遇の方の役に立てていたのなら幸いです。
