目次
- 部活のページの構成（続き）
- 編集するところ
部活のページの構成（続き）
前回は，部活のページ全体について解説しました．
今回は，リンクの追加の仕方，記事の書き方の準備として，nav要素の中身，article要素の中身について解説をしようと思います．
まず，テンプレートのnav要素の中身を見ていきます．
<!--nav要素-->
<nav>
<ul>
<li><a href="#" class="current"></a></li>
<li><a href="../index.html"></a></li>
<li><a href="#"></a></li>
<li><a href="http://example.com"></a></li>
<li><a href="http://example.org"></a></li>
</ul>
</nav>
リンクを貼るだけならばa要素だけで良いのですが，見栄えを良くするため，階層構造を実現しやすくするため，参考にしたテンプレートがこうしていたから，などの理由でul要素とli要素で囲っています．
では，ul要素とli要素について解説をしていきます．
（まあ，ググればすぐ出てくるんだけどね）
ということで，さっそくHTML5タグリファレンスでul要素とli要素を見ていきます．
<ul>タグはunordered listの略で、順序のないリストを表示する際に使用します。 リストの各項目は<li>タグを用いて記述します。
<li>タグはlist itemの略で、リストの項目を記述する際に使用します。なので，例えばこのように書くと，
<!--ul要素,li要素-->
<ul>
<li>このように</li>
<li>表示</li>
され
<li>ます．</li>
- このように
- 表示 され
- ます．
なんで部活のページには黒丸がないのかは，cssの話になってしまうので，また後日．
次に，article要素の中身を見ていきます．
<!--div要素,article要素--><div id="main"> <article> <h2></h2> <div class="box"> <p></p> <aside> <p></p> </aside> </div> </article> </div>
<h2>〜</h2>に見出しを書いて，<p>〜</p>に内容を書きます．aside要素には補助情報を入れます．
では，HTML5タグリファレンスでarticle要素とaside要素を見ていきます．
<article>タグは、内容が単体で完結するセクションであることを示す際に使用します。例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。
<aside>タグは、その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用します。なので，article要素の中に<h2>要素で見出しを書き，<p>要素で見出しに対応した内容を書きます．ちょっとした補足情報を書くときにはaside要素の<p>要素に書きます．
編集するところ
では，実際にどこを編集すれば良いのかを説明します．
リンクの追加ですが，上記のnav要素の中に関連しているページへのリンクを貼るといいと思います．
ページが多くなってきたらheader要素の中にグローバルなリンクや，コンテンツ分けしてリンクを貼るのもいいでしょう．
具体的な追加の仕方は，li要素をコピペして，a要素の中身とURLを変えるだけです．
階層表示がしたくなったら，li要素の中にul要素をネストするとよいでしょう．
記事の追加の仕方は，article要素をコピーしてdiv要素の中のトップレベルにペーストするだけです．
具体的な方法は，h2要素にタイトルを書いて，p要素に内容を書きます．p要素のpはparagraph（段落）のpなので，適度に段落分けをして，その都度p要素を使うようにしましょう．
もし，メインのp要素の情報だけでは十分に情報が伝わらないという時や，補助情報を入れたい時にはaside要素を活用するとよいでしょう．aside要素のp要素に補助方法を書きましょう．
これで，ページを編集するときの注意は一通り書いたと思います．
cssについては解説をするのが面倒になってきたので，解説しません．各自ググってください．
テンプレにもありますが，正しくcssをリンクしないと予定通りの視覚効果が得られない場合があるので，cssの置き場所には注意しましょう．
