【応用編】今スグ作れるホームページ！～CSSコードの追加～

▶初回から受講する

▶この講座の画像を見る

制作編①～⑨で作ってきたトップページですが、
「もっとこうできたらいいのに」と少しもどかしさを
感じられた方もいるのではないでしょうか？

現時点ではLightningのデフォルト機能ではどうにもならない部分を、
CSSコードを記述してカスタマイズしていきます。

CSSとは一言でいうと、
「ホームページの見た目を整えるための言語」です。

今回はコードの紹介ということで深く解説はせず、
コピペだけで済むようにしています。

1．カスタマイズ箇所の確認

カスタマイズ箇所と、カスタマイズする理由はこちらです。

1⃣ 枠線ボックスの角を角丸に
理由：他の写真などと合わせて統一感を出したい
2⃣ ボタンにカーソルをのせた時（ホバー時）に出現する水色の枠を削除
理由：ホバー時は背景色が変わるようになっているので不要
3⃣ Google Mapの角を角丸に
理由：①と同様
4⃣ コピーライト下部の「Powered by ～」の文字を削除
理由：ユーザーにとって不要な情報（削除しても規約的に問題なし）
5⃣ トップへ戻るボタンを丸めてキーカラーに
理由：黒が強く存在感がありすぎるので今回のデザインと合わない
6⃣ ファーストビューの文字サイズを大きく（スマホ表示のときだけ）
理由：デフォルトのままでは小さくて見にくい
7⃣ フッターメニューを中央寄せに（PC表示のときだけ）
理由：ここだけ左寄せだと違和感がある

続きは、リベシティにログインしてからお読みください

＼初月30日間無料／ リベシティで会員登録をする ログインする

ノウハウ図書館でできること

• すべての記事の閲覧

• ブックマーク

• いいね・レビュー

• 記事の投稿※応援会員（有料）のみ

• ポイントの獲得※応援会員（有料）のみ

※会員登録には、新入生会員（初月30日無料）と応援会員（有料）があります

応援会員制度とは？

さらに！

• リベシティの他の機能やサービスもご利用いただけます（詳しく見る）