CSSで余白の指定がうまくいかない？スクール講師が付け方を解説！

Figmaにログインしてから始めてください！

要素を選択した状態で、Option(Alt)キーを押しながら別の要素の上にカーソルを載せると、選択した要素との距離が赤文字で表示されます。

この機能を利用して、余白を測ってみましょう。

選択したい要素をタブルクリックするか、画面左の「レイヤー」から選んで選択状態にします。１つの要素を選択した状態で、Option(Alt)キーを押しながら、距離を測りたい対象の要素にカーソルを載せます。

『その余白は、どの要素からみて内側になるか？どの要素からみて外側になるか？』を考えてみましょう！

padding・marginは、場合によって使い分けが必要なので注意しましょう！

例えば背景色や背景画像を挿入する場合は内側として認識させる必要があるため、paddingを使用することがあります！

詳しくは、marginとpaddingの違い を参照してください。

aタグは本来インライン要素ですが、display: inline-block; をつけてインラインブロック要素にしています。

インラインブロック要素にすることで、縦方向にheightが指定できるようになり、要素の中にpaddingもつくようになります。

まずは、padding: 16px 24px; を追加してみます。

ボタンの内側に余白がつくことを確認してください！

次に、margin-top: 40px; を追加します。

ボタンの上、外側に余白がつくことを確認してください！

記述できたらブラウザで表示を確認してみましょう。

Visual Studio Code画面右下の「Go Live」ボタンを押すと、表示を確認できます。

スマートフォン版のデザインをコーディングしている場合は、スマートフォンで閲覧したときの状態に近づけていきます。

「Toggle device toolbar」は、スマホとタブレットのアイコンのボタンです！

この作業をすることで、ブラウザをスマホの表記に近い形で確認することができます！

クラス名にスペルミスがあったりしませんか？

sectionがsektionになっていたり、paddingがpading になっていたり・・・

単純なミスでCSSがうまく当たらないこともあるので、確認してみてください。

要素によって指定できる余白が異なりますが、頭に入っていますか？

あまりピンと来なかった人は、inline・block・inline-blockの違いとは？ を見てみてください！

• 指定した数値より余白が空いていない...
• 背景色の適用範囲が狭くなってしまっている...

というときは、適切なプロパティを使えていないかもしれません。

marginをpaddingに変えて、上手くいくか試してみてください。

初学者のプロパティのミスは、大体これで何とかなることが多いです！

特に、marginで指定した余白は重なると相殺してしまう性質がありますので覚えておきましょう！

検証モードは「スマホサイズで見るため」だけでなく、「どの要素にどの数値で余白を実装できたか」を確認することができます！

この機能を使って、意図しないスタイルが当たっていないか確認してみましょう！

検証モードで要素をクリックしてから、「スタイルパネル」でCSSコードを確認できます！

デザインデータの余白の値と指定した値が同じになっているか確認してみてください！意図しない余白がついていたら消しましょう！

まずはデザインカンプを確認するところから始めましょう！余白をつける要素と、どのプロパティを使うのかをもう一度確認してみてください！

• デザインデータで「どこに何pxの余白をつける必要があるか」を確認し、「どの要素に対してどのプロパティを使えばできそうか」を考える
• VScodeで実際にコードを書いてみる
• ブラウザの表示を確認する

というステップで進めていくといいと思います！

記事にある流れの通りにやってみると、自己流よりもミスが減るはずです！最初は面倒だなと感じると思いますが、非常に大切ですので頑張りましょう！

スクールに通っていたり、頼れる人がいる場合は、上手くいかなかった時に自分で頑張りすぎず聞いてみるのも良いでしょう！

その際は、こういうミスのパターンがあるのか！と次に活かしていくことが大切です。