元ファイルをコピー
編集前のCSSを残しておくと、思ったデザインにならなくてもすぐ戻せます。
CUSTOMIZE GUIDECSSで、ホームページを
CSSで、ホームページを
自分らしいデザインにする。
文字や画像を差し替えた次は、デザインを調整してみましょう。Template 001「Simple Business」の実際のCSSを教材に、変更した効果が目で分かりやすい順番で解説します。
6 LESSONS
まず覚えたい6つのデザイン変更
順番に進めても、変更したい項目だけ選んでも大丈夫です。
LESSON 01
サイトの横幅
ページ全体を広く・コンパクトにして、情報量や雰囲気に合わせます。
解説を見る → LESSON 02文字サイズ
本文・見出し・ボタン文字の大きさを調整し、読みやすさを整えます。
解説を見る → LESSON 03余白
セクションやカード内部の余白を調整して、窮屈さや間延びを改善します。
解説を見る → LESSON 04ボタン
色・角丸・サイズ・枠線を変えて、サイトの印象と導線を整えます。
解説を見る → LESSON 05見出し
文字サイズやアクセントを変更し、ページ全体のメリハリを作ります。
解説を見る → LESSON 06カードレイアウト
カードを追加し、PCでは2列・3列、スマホでは1列に整える方法を学びます。
解説を見る →SAFE CUSTOMIZE
変更するときの基本ルール
1項目ずつ変更
複数の値を同時に変えず、保存して表示を確認しながら進めます。
スマホでも確認
PCで良く見えても、スマホでは窮屈になる場合があります。最後は両方確認します。
設定値を変える前
Template 001の初期デザインを基準にします。
少し変えるだけでも印象が変わる
横幅・余白・角丸などを組み合わせると、別のサイトのように調整できます。
LESSON 01
横幅の講座へまずは「横幅」から試してみましょう。
CSS変数を1か所変更するだけなので、デザインカスタマイズの最初の練習に最適です。