記事一覧ページの作成
今回は記事一覧ページを作成しました。
今まで作ってきたページを紹介するページです。サムネの作成もこのテキストでは初めてのことです。
記事一覧ページの作成
今回はCSSを一切触りませんでした。以下今回のHTMLです。
<!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>
<section>
<h1>お知らせ</h1>
<article>
<img src="sunflower-thumb.jpg" alt="">
<h1>真夏のひまわり畑 </h1>
<p>
森の工房の隣にある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見応えも十分です。
</p>
</article>
<article>
<img src="forest-thumb.jpg" alt="">
<h1> 新緑の森を散策 </h1>
<p>
春から夏にかけては、森を散策するのにおすすめの季節です。少しずつ暖かくなるのに従って、若葉が芽を吹き、花が咲き、森の中が賑やかになっていきます。夏に向かって、森が濃い緑に変わっていくのを楽しむのも一興です。
</p>
</article>
<article>
<img src="winter-thumb.jpg" alt="">
<h1> 雪を楽しむ </h1>
<p>
冬場のお楽しみと言えば、雪の中の散歩です。夏場は草木が邪魔をして入れないところにも自由に入っていくことができ、普段はとは違った景色を満喫することができます。
</p>
</article>
</section>
<footer>
<small>
Copyraight ©FOREST STUDIO,all rights reserved
</small>
</footer>
</body>
</html>
今まで使ってきたタグがほとんどなので、あえて紹介する必要はないと感じました。
まず、articleでh1ごとに区切りを入れていきます。次にarticleの最初の前とと最後の後ろにsectionを入れて、大きなブロックを作りました。そして、以前別ページで使用した画像を250×188にそろえて、サムネイルを貼っています。
altタグが空白なのは、h1で同じ内容のことを説明しているからです。
まとめ
今回はsectionやarticleタグをメインに使用して、区切りをきれいに付けた感じです。記事一覧ページなので、記事ごとに区切りを入れていきました。
画像サイズの変換は、Online Photo Editor | Pixlr Editorを使用して行いました。これを使えば、誰でも簡単に画像サイズの変換できます。
以下、今回の作成結果です。
お知らせの位置がおかしいなって思っていて、何かの間違いじゃないかな？って思ったんですが、別のページで修正するようです。全部の画像を一発がキャプチャリングできたらいいんですけど、手間が掛かるので、ここでは割愛しています。
引き続き勉強していきます。
