トップページの作成とデザイン
今回はついにトップページを作成しました。最初に作っていたページがトップページだと思っていたので、ここまで来て軽くびっくりしました。
トップページの作成
トップページはindex.htmlという新しいファイルの中に記述していきます。以下、今回の記述です。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="top">
<header>
<h1><a href="index.html"><img src="logo.png" alt="">FOREST STUDIO</a></h1>
<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="news.html">お知らせ</a></li>
<li><a href="about">工房について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<section>
<div id="photo">
<h1>FOREST STUDIO</h1>
<p>自然のあれこれをお届けする森の工房です。</p>
</div>
<p>
Forest Studioは森や自然を生かしたイベントや商品をお届けしている工房です。自然の中にある「森の工房」では、四季折々の風景を楽しんだり、森の散歩を楽しむことができます。お近くまでお越しの際は、ぜひお立ち寄りください。
</p>
</section>
<footer>
<small>Copyraight ©FOREST STUDIO,all rights reserved</small>
</footer>
</body>
</html>
/*トップページ*/
#top header {
margin-bottom: 0px;
}
#photo {
background-image: url(photo.jpg);
background-repeat: no-repeat;
background-position: 50% 0;
background-color: #3f8ad6;
text-align: center;
padding-top: 320px;
padding-bottom: 80px;
}
#photo h1{
color: #fff;
font-size: 60px;
font-family: 'Chango',cursive;
text-shadow: 0 5px 10px #000;
}
#photo p {
color: #fff;
font-size: 20px;
font-weight: bold;
text-shadow: 0 5px 10px #000;
}
トップページhtmlの大部分は他のページのコピペです。細かに変えている部分はありますが、大半がテキストなので、ここでの説明は割愛します。強いて言うなら、body id="top"に変更したのが大きいな変更点です。
background-repeat
background-repeat: no-repeat;と設定することによって、画像を単品で表示させることができます。ここでは大きな画像を用意しているので、ドカンと大きく表示させています。
background-position
background-position: 50% 0; background-position: 50% 0;
以上の記述で、背景画像を中央揃えで表示させています。50％の値が横方向、0の値が縦方向の値を示しています。ですが、中央揃えで表示させた場合は、centerで記述するのが一般的のようです。
font-weight: bold
font-weight: bold;
この記述で太字で表示させることができます。はてなブログでも太字にするボタンがbで表示されていますが、このboldの略だったんですね。
text-shadow
text-shadow: 0 5px 10px #000;
この記述でテキストシャドウを表現しています。
0が横のオフセット
5pxが縦のオフセット
10pxがぼかし幅
＃000がカラーです。
まとめ
今回は久しぶりに登場した記述もあり、思い出し作業がけっこうありました。未だにオフセットの意味がわかりませんが、多分なんとかなるだろう的な理解度です。以下今回のBeforeAfterです。
Before
After
やはり画像が大きく入るとかなり見た目が変わって見えますね。変更前がヘッダーとフッターしか入っていない状態なので、そりゃ変化も大きいですよね。
引き続き勉強していきます。
