Webデザインやコーディングをしていると
「文字が端にくっついて読みにくい」
「ボタンが窮屈に見える」
そんな悩みを感じたことはありませんか？
その原因のひとつが CSSの内側の余白 です。
この記事では、paddingの基本から実際の使い方まで、初心者にもわかりやすく解説します。
内側の余白と外側の余白の違い
CSSには大きく分けて「余白」が2種類あります。
- margin（マージン） … 要素の外側の余白
- padding（パディング） … 要素の内側の余白
今回は「padding」に絞って解説します。
paddingとはどこのこと？
・内側の余白です。
ボタンを例にすると、文字とボーダの間の余白がpaddingになります。
・余白無しの場合、と余白ありの場合ではこのように違います。
シンプルに「クリック」とだけ書かれたボタンを作ったとき、文字と枠がピッタリくっついていて、窮屈な印象になることがあります。
ここで「padding」を指定すると、ボタンの文字と枠の間に余白ができ、見やすく・押しやすいデザインになります。
ボタンを作る
・emmetを使って、素早くボタンを作ります。
フォルダ作成の方法はこちらから→【 Live Server が表示できない！！】VS code初心者あるある対処法とフォルダ作成
ファイル名を入れます
・emmetを使いましょう！
#containerと入力し、タブキーまたはemmetを押します
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
実際のパソコン画面↓
idを指定したdiv要素が簡単にできます↓
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
div要素の中に、 button.btn と入力し、タブキーまたはemmetを押します
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
実際のパソコン画面↓
クラス名のついたボタン要素ができました。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
実際のパソコン画面↓
クリックと入力します。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
実際のパソコン画面↓
CSSコードを入力してボタンを中央に持って行きます
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
ボタンが小さいので少し大きくしましょう！
・セレクタについて理解が深まる記事→CSSセレクタってなに？初心者にも超わかりやすく解説
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
実際のパソコン画面↓
・htmlのみで作成したボタンは余白がないので窮屈に感じます。そこで、paddingを使って余白たっぷりの見た目に良いボタンを作成します
このように、paddingをうまく使うことで、デザインがより魅力的になります。
paddingの指定方法
ショートハンドでまとめて指定する
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
上下と左右を個別に指定する
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
それぞれを指定する
・時計まわり上右下左の順番で記述します。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
まとめ
・paddingは「読みやすさ」「デザインのゆとり」に大きな影響を与えます。
次回は 親からひ孫まで！要素の世代物語 要素をしっかりと理解しましょう！
コメント