どうも、チャーさんです。
あなたはcssでボタンをレスポンシブにしたい、
かつブレークポイントごとに微調整する手間ひまの、
必要のないボタンを作る方法はないかと思ってませんか？
この記事では、cssでボタンをレスポンシブにし、
ブレークポイントごとに幅を指定する手間のいらない、
ボタンの作り方を書いています。
なので、あなたがこの記事を読めば、
レスポンシブ対応したボタンを作れるようになります。
しかも、もうブレークポイントごとにwidthを指定する
必要からも解放されます。
ということで、あなたがcssでボタンを楽に
レスポンシブ対応させたいなら、
このまま下にスクロールし読んでみてください。
スポンサードサーチ
cssでボタンをレスポンシブにするなら
ということで、結論からです。
cssでボタンをレスポンシブにする方法は、
max-widthとwidth:100%を使うことです。
その理由なのですが、
ボタンを作る時にwidthでpx指定やpaddingを使って、
ボタンを作ることがあるかもしれません。
しかしそれをすると、
画面幅を小さくした時に、
ボタンのサイズが大きいと画面からはみ出ます。
で、それをブレイクポイントごとに、
サイズをいちいち変更する羽目になります。
(実に面倒ですよね)
しかし、max-widthを使えば、
画面幅が小さくなれば自動的に、
ボタンの幅も小さくなってくれます。
なので、いちいちブレイクポイントごとに、
細かくwidthとかを微調整したりせずに
すむのです。
ということで、cssでボタンを作り、
レスポンシブ対応させたい場合は、
max-widthを使いましょう。
ということで、cssのサンプルです。
a {
display:inline-block;
max-width:300px;
width:100%;
padding:5px 1px;
background:blue;
text-align:center;
color:white;
border-radius:10px;
}
ちなみに
htmlは
<body>
<a href=”#”>ボタン</a>
</body>
だけです。
(クラスつけとくとボタンが増えた時に便利)
上記のようにmax-widthとwidth100%で、
指定しておくと、
上記の画面幅は250pxなのにも関わらず、
ちゃんと幅が縮んで、画面から切れることもなく、
自動でレスポンシブしてくれてますね。
ちなみに指定してるcssは
a {
display:inline-block;
max-width:300px;
以下略
とmax-widhtは300pxにしてます。
なので、cssでボタンつくってレスポンシブしたいなら、
max-widthで幅を指定しておけば、
画面幅が小さくなっても切れずに、
レスポンシブで、
自動調整してくれるので非常に楽なのです。
またpcサイズではmax-width:300pxで、
width:100%でちゃんと300pxまで、
広がってくれます。
なのでpcサイズでもちゃんと問題ない
見た目になります。
ということで、cssでボタン作るなら、
max-widthとwidth:100%で作ることをお勧めします。
すると、ブレークポイントでの微調整がなくなり、
ちょっとあなたが幸せになりますよ。
スポンサードサーチ
まとめ
ということでまとめに入ります。
cssでボタンを作りレスポンシブ対応にしたいなら、
max-widthとwidth:100%を使いましょう。
そうすると、自動でボタン幅を調整してくれる、
コーダー(あなた)にとって楽なボタンができますよ。
ということで、やり方がわかったと思いますので、
実際にやってみましょう。
やるとあなたのスキルが上がり、
楽ができるようになります。
ということでサンプルを用意しました。
どうぞコピペして挙動をみてみてください。
css
a {
display:inline-block;
max-width:300px;
width:100%;
padding:5px 1px;
background:blue;
text-align:center;
color:white;
border-radius:10px;
}
html
<body>
<a href=”#”>ボタン</a>
</body>
そして画面幅を拡大縮小して、
レスポンシブされてるか確かめてみてください。
ちゃんと動いてればokです。
ちなみにaタグにcss書いてボタン化する場合は、
display:inine-block;にしないと、
自由に上下左右の幅をいじれないので、
お忘れないように。
ということで、cssでボタンを作り、
レスポンシブ対応(微調整の手間のない)させる方法でした。
それでは、読んでもらってありがとうございました。
チャーさん
