ボタンはどのようなWebサイトでも必ず存在するパーツですね。
ボタンを作るのは簡単ですが、デザイン通りに、そしてどのような時でもレイアウトが崩れないボタンを作るにはどうするか？
そんなボタンの長さ・高さの指定についてどうするのが結局いいのかを３つのパターンで考えてみました。
完全無料スクールPR
これから始めるWEB制作
初心者のための【ZeroPlus Gate】
「ZeroPlus Gate」は、30日間限定で完全無料で学べるプログラミングスクールです。
その名の通り、WEB制作を「0」からスタートする初心者に特化したカリキュラムを提供しています。
分かりやすい動画講座を通じて、プログラミング未経験者でもスムーズにWEB制作を学ぶことが可能です。
さらに、わからない点があれば何度でも質問し放題！独学で行き詰まってしまった方にも最適な環境が整っています。
加えて、カウンセリングを通じて、将来的なキャリア設計や学習の進め方についてもアドバイスを受けることができます。
私自身、このスクールを受講しましたが、正直なところ「なぜこれが無料なのか？」と驚くほど充実したカリキュラムでした。独学でWEB制作を学んでいた頃と比べ、理解度が圧倒的に向上したと実感しています。
有料スクールへの勧誘も一切なく、安心して気軽に学習を始められるのが魅力的です。
\ 完全無料で学んでみる /
ボタンの作成パターン
まず、作成するのは↓の一般的な普通のボタン
普通過ぎて、こんなボタンをデザインしたら没になりそうですが....
長さは300px、高さを50px、フォントを16pxにしています。
ボタンをpx固定で指定する場合
まずは、普通に
width:300px 、height:50px もしくは、line-height: 50px; で指定するパターン
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
【メリット】
・直接ピクセルで指定するのでデザイン通りに作成しやすい。
・作成の時間が短縮できる。
【デメリット】
・幅・高さ固定なので、文字数が増えた際に表示が崩れる。
ボタンですよ！ボタンですよ！ボタンですよ！ボタンですよ！ボタンですよ！ボタンですよ！・文字数で長さが違うボタンなどがあった場合に、対応が面倒（モディファイア等）
【どんな時に使用するか？】
私はあまりピクセル指定でボタンを作成することはありませんが、Web制作会社の制作実績などを見ると、結構px指定で作成などしてるみたいですね。
ボタンの長さがデザイン通して、ほとんど同じ場合や、ボタン中のテキストに改行されるほど長いテキストが入らないと決まっているときはピクセルで作成してもよいと思います。
ボタンをmin-width かmin-hegiht で指定するパターン
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
【メリット】
・ボタン中のテキストが長くなっても、幅・高さが伸びるので表示が崩れない。
・デザインどうりに作成できる。
【デメリット】
・min-widthを指定している場合、画面幅が狭い場合などに画面外にはみ出る場合がある。
【どんな時に使用するか？】
どちらか・もしくは両方をmin- で指定するパターン。
ボタン中の文字が長い場合も長さが自動可変されるのではみ出ることがないです。
テキストが長いものが入るかもしれないときなどに良いと思います。
ただ、普通にwidthで指定する場合は、max-width:100% を指定すれば画面や親要素からはみ出ることがありませんが、min-widthで指定している場合は、max-width:100%を指定しても画面からはみ出ますので、そこに注意が必要です。
ボタンをpaddingで高さ、幅を指定する
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
【メリット】
・こちらもボタン中のテキストが長くなっても、幅・高さが伸びるので表示が崩れない。
・幅を指定していないので、親要素や画面が狭まったときもはみ出さない。
・テキストのセンタリングが簡単。
【デメリット】
・数ピクセルデザインと差異がでることが多い。
【どんな時に使用するか？】
個人的にこのパターンを使用する場合が、多いです。
高さと幅を指定していないので、親要素よりはみ出すこともなく、文字数が増えた場合も可変するので、便利です。
また、幅をwidthで固定して、高さのみpaddingで指定したりなど組み合わせて作成しても良いと思います。
ただ、どうしても数ピクセルデザインと高さが異なったりするので、チェックが厳しい人だった場合など、突っ込みが入るかもしれません。
まとめ
以上ボタンの幅・高さについて考えるでした。
どれも一長一短ではあるんですが、ボタンのデザインや、ボタンのパターンが複数あるなど、その時によって最適な作り方は変わると思います。
個人的なベストは、 padding で作成が良いという結果になりました。
