どうも7noteです。ボタンをCSSで作るとき、ボタンに付いている矢印（>）の配置で作り方を分ける方がいい話。
WEBサイトを作っていると、ボタンを作成する機会がたくさんあります。
画像で作る時はあまりきにしなくても大丈夫ですが、疑似要素で矢印を配置する際、できるだけレスポンシブサイトでも崩れないボタンを作るための工夫が必要になってきます。
私は矢印の位置によって、作り方を大きく2種類に分けて作っているのでそれぞれの作り方を紹介していきます。
矢印の位置によるボタンの種類の見分け方。
ボタンA
ボタンB
違いは矢印の位置が文字に近いところにあるか、離れたところにあるかの違いですが、考え方としてはこのように考えます。
「矢印の位置はどこに依存しているか」
ボタンAでは、文字の近くに矢印があります。つまり文章の長さが変わっても文字のすぐ右側に矢印がある事が、このボタンの矢印の意図になります。文字によって矢印の位置がかわるので、文字に依存していると言えます。
ボタンBは、文字から離れたところにありますが、違う捉え方をすると右端から一定距離に位置していると言えます。つまりボタンがどんなに長くなろうと右端の位置をキープすることになります。ボタン（の右端）に依存している状態です。
このことから、それぞれボタンAとボタンBでは違う作り方をします。実際にソースを見てみます。
2種類のボタンの作り方
共通html
<divclass="btn">ボタン</div>ボタンA（文字依存）の作り方
.btn{color:#fff;width:100px;text-align:center;background:#399;border-radius:5px;padding:10px30px;}.btn::after{content:">";margin-left:1em;}ボタンB（右端依存）の作り方
.btn{color:#fff;width:100px;text-align:center;background:#399;border-radius:5px;padding:10px30px;position:relative;/* 追記 */}/* Aとは違う */.btn::after{content:">";position:absolute;top:50%;right:10px;transform:translateY(-50%);}解説
もし、ボタンの長さや文字の量が変わると・・・
ボタンAでは長さが変わっても常に文字の横に矢印があり、
ボタンBでは長さが変わっても常に右端に矢印があると思います。
このようにレスポンシブ化や修正などで文字や横幅が変更になることがあっても、常に意図した位置に矢印を置くことができます。
まとめ
常にデザインの見た目ではなくて意味を理解して作ることが大切です。
私はデザインの構造を見極め、この矢印はスマホ表示になったり、文字が変わったらどこに位置されるべきだろうかと考えてcssを作るようにしています。
ついついボタンAの方がcss書く量少なくて楽だらかといった理由で、デザインの意図とは違う書き方をしないように気を付けたいですね。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ