CSSのプロパティを理解してLPをデザインする

marginとpadding、そしてCSS制作の進め方

この記事ではランディングページ制作でのCSSについて紹介していきます。

今回のランディングページでは、HTML上に色やフォントのサイズなどはマークアップしておりません。なるべくCSSにまとめるようにしています。後々に更新する際にはその方がわかりやすいですからね。

以前にCSSの書き方はご紹介しましたが、ここではmargin,paddingについて紹介します。これらはプロパティのひとつになり、プロパティとは「状態」を指します。

Webサイトにて構成されている要素はボックスというまとまりになっています。そして、そのボックスの内側にある余白の状態をpadding、外側にある余白の状態をmarginといいます。

それぞれの余白を調整することで、サイト上の位置関係を調整していきます。CSSでは、色やフォントの調整とこの余白の調整をおこなっていくことが基本になります。

ここでプロパティをいくつか簡単に紹介します。

全部覚えなくて良いですね。加えたいスタイルがあれば、「posotion css」や「テキスト右寄せ css」と検索すれば、その都度書き方はヒットするはずなので、実際に制作しながら覚えていくぐらいの感覚でちょうど良いと思います。

今回制作しているページでもボタン箇所や各説明の枠、文字などを調整しています。CSSでは下に書かれたものが優先される（上書きされる）ので、”全体を占めている箇所→部分的な箇所”という順番で書いていくのが分かりやすいです。

ここでは各設定についての紹介は割愛しますが、「調整しては確認」を繰り返してデザインを整えていきます。調整をしていくでの便利な機能がありますので紹介します。GoolgeChromeでは”検証”という機能があり、どの要素にどういった調整が入っているかを確認することができます。

GoolgeChrome上のサイトにて右クリックをすると、”検証”という項目がありますので、クリックするとデベロッパーツールを呼び出すことができます。

こちらでは各要素のコーディングが確認でき、ポインタで各要素で反映されているCSSも確認できます。このデベロッパーツールにてそれぞれの間隔などを確認しながら制作を進めていきます。

今回のランディングページでは、ボタンをマウスオーバーすると変化するようになっています。

See the Pen oNNBqBL by yoshitaka (@tamtam777) on CodePen.

この動きもCSSで実装されています。この変化には”:hover”という擬似クラスを用いります。はい、”擬似クラス”って何だ？と思ったあなた。僕も思いました。”すでにいくつか用意されているクラスで、要素が特定の状態になっているときだけ実行されるクラス”だそうです。ちょっと分かりづらいですね。

例えると、「宴会部長」ですね。社員A（要素）が宴会（特定の状態）をやるときだけ実行される役職（クラス）になります。

:hoverだと、ボタン（要素）がマウスオーバー（特定の状態）のときだけ実行されるクラスになります。

まあ「普段は部長を任せるほどではないけれど、宴会の時はよろしく頼むよ！」という便利な使い方ができるんです。

:hoverの他にも、サイトに初めて訪問した状態（:visit）などがあります。似たものとして”擬似要素”があります。こちらは要素の一部をスタイル変更できるものになります。例えば、文章の頭文字を大きくしたい、という時などに使われます。

どちらも使わなくとも他の手段で表現はできますが、使い勝手が良く便利なので覚えておいた方が良いでしょう。以下は同じ文章ですが、擬似要素を用いた方がhtmlの変更する手間がなく便利です。

See the Pen WNNRzJY by yoshitaka (@tamtam777) on CodePen.

制作に戻りますと、:hoverではマウスオーバー後の状態を記載しておきます。今回は背景色と文字の色、そして変化する時間を設定しています。

こちらで変化させることができるようになりました！購入ボタンの色が変わり、動きのあるサイトになりましたね！

次回はJavaScriptを用いてさらに動きをつけていきたいと思います。