記事の構造

記事(article)に、普通の記事(post)と写真記事(imagepost)というように多様性を持たせるようなケースもあるため、各記事には、共通のスタイルと、記事の種類に応じたのスタイルというように複数のスタイルを設定する。また、スタイル名の衝突を防ぐために、article-というプレフィックスをつけている。

<section id="main" class="main">
<article id="post1" class="article article-post">
<!-- ここに記事を記述します。 -->
</article>
<article id="post2" class="article article-post">
<!-- ここに記事を記述します。 -->
</article>
<div id="post3" class="article article-imagepost">
<!-- ここに記事を記述します。 -->
</div>
</section>

通常、記事はヘッダー、本文、フッターから成るが、フッターやヘッダーの省略も可能である。記事のタイトルやメタ属性は、好きな位置に定義する。

<article id="post1" class="article article-post">
<header class="postheader">
<h2><!-- ここに記事タイトルを記述します --></h2>
</header>
<div class="postbody">
<!-- ここに記事本文を記述します -->
</div>
<footer class="postfooter">
<span class="articlemeta"><!-- ここに記事属性を記述します --></span>
</footer>
</article>

 

カテゴリー: htmll5_style   タグ:   この投稿のパーマリンク

コメントを残す