ページを増やす方法
今回から新しくnews02とnews03というファイルを作り、2ページ増やしました。
ページの増やし方
ページを増やすのはとても簡単で、新しいHTMLファイルを作り、従来と同じフォルダ内に保存すればいいだけです。同フォルダ内のCSSが適用されるので、新たにCSSの記述は不要です。
以下、今回の記述内容です。
HTML
【news02】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>新緑の森を散策 - FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1><img src="logo.png" alt="">FOREST STUDIO</h1>
</header>
<article>
<h1>新緑の森を散策</h1>
<figure class="photo-center">
<img src="forest.jpg" alt="新緑の森の中は葉が生い茂り、木漏れ日を受けて眩しく輝いています。">
</figure>
<p>春から夏にかけては、森を散策するのにおすすめの季節です。少しずつ暖かくなるのに従って、若葉が芽を吹き、花が咲き、森の中が賑やかになっていきます。夏に向かって森が濃い緑に変わっていくのを楽しむのも一興です。</p>
</article>
<footer>
<small>Copyraight ©FOREST STUDIO,all rights reserved</small>
</footer>
</body>
</html>
【news03】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>雪を楽しむ - FOREST STUDIO</title><link rel="stylesheet" href="style.css">
</head>
<body>
<header> <h1><img src="logo.png" alt="">FOREST STUDIO</h1></header>
<article>
<h1>雪を楽しむ</h1>
<p>
冬場のお楽しみと言えば、雪の中の散歩です。夏場は草木が邪魔して入れないところに自由に入っていくことができ、普段をは違った景色を満喫することができます。
</p>
<h2> 雪山で注意したいこと </h2>
<figure class="photo-left">
<img src="winter.jpg" alt="山の木々は樹氷で真っ白になります。"> </figure>
<p>楽しいとはいえ、雪山では急な斜面を登るのは大変ですので、緩やかな斜面を選んで登るようにします。また木の根元は雪が解けていることが多く、近付くと危険ですので注意が必要です。
</p>
<h2>雪原で注意したいこと </h2>
<figure class="photo-left"> <img src="snow.jpg" alt="白い雪原の上には木の影が面白い模様を描きます。">
</figure>
<p> 雪原は平らで見晴らしもよく、散歩するには最適なエリアです。ただし、くぼみのあるところには小川が流れている場合が多いので注意してください。 </p>
</article>
<footer>
<small>Copyraight ©FOREST STUDIO,all rights reserved</small>
</footer>
</body>
</html>
h2 {
clear: both;
border-bottom: solid 5px #c39f4a;
margin-top: 30px;
}
以上が今回の記述内容です。
HTMLに関してはほとんどがコピペなので、特に難しいポイントはありませんでした。文章を入力するのが面倒に感じたくらいです。
news02に関しては、ずっと作ってきているnews01とほとんど似たようなページ構成になっているので、説明は省きますね。テキスト量が減ったくらいしか変更点はありませんでした。
news03は、画像が2枚になり、新たにh2という小見出しを記述しました。したがってh2に関する記述がないため、新たに作る必要があります。
h2 {
clear: both;
border-bottom: solid 5px #c39f4a;
margin-top: 30px;
}
以上が新たに追加したCSSです。
border-bottom: solid 5px
によって、h2の下に5pxの罫線を付けました。#c39f4a;はカラーコードですね。
clear: bothは回り込みの指定を解除するための指定です。
margin-top: 30pxはh2の上部分に余白を持たせるための指定です。
まとめ
今回から新たにページを追加しましたが、作業的にはコピペがメインだったので、難しさは特にありませんでした。以前使用したことのあるclear: bothが何の指定だったのか、一瞬忘れていましたが、実際に使ってみることによって、思い出し作業ができました。
以下、今回の実績です。
news-02
news-3
news-3は画像が2枚になったことにより、すべて収まりきりませんでした。罫線が引かれていることと、小見出し（h2）が付いたこと、そして画像が2枚になっていることがわかると思います。
引き続き勉強していきます。
