知的共同体WiSS

XHTML+CSS

3,１の製作篇

さて、それでは演習ページをさくさくと作っていきましょう。頑張って丁寧に作っていきますよ～。

①解説篇の要素入力

とりあえず、解説篇で紹介した要素をすべて入れましょう！少しでも文字を忘れたりするとその時点でエラーが発生するので注意してくださいね。このあたりの解説、適当っすね・・・。

要素説明

それでは一つ一つ要素を説明していきますね。
ここで確認しておきたいことは、Webサイトとは基本的に文章であるということです。(最近はWeb2.0なんて言って動画など大容量発信などもされていますが)見やすい文章とはどのように書かれているか、よく考えながらサイトを構築していきましょう。デザイン性などはその次に考えていけば大丈夫です。

h要素

みなさんは作文を書いたことはあるでしょうか？それは小学校のときに書いた読書感想文でもいいですし、学生時代に書いたレポートでもいいですし、会社で書いた企画書や議事録でもいいです。それらを書くとき、一番最初に注意すること。それは題名ではないでしょうか？サイトも同じで見出しはすごく大事です。
この見出し要素がｈです。その文章の見出しになるものです。サンプルページでも見出しである「Hiroshiのページ」はh1で指定されていることがわかりますね。このサイトも「知的共同体WiSS」にｈが指定されています。
h要素には以下の決まりがあります。

見出しはh1が大見出し、h2が小見出しとあり、h6まで指定することが出来ます。
ｈ要素は1から順に出していかなければいけません。h1より先にh2や3などを使ってはいけません。

これらの決まりを守らなかったとしても、特にエラーなどは発生しませんが、SEOを考慮したとき、大変よろしくありません。
サンプルページでは大見出しh1をページのタイトルである「Hiroshiのページ」に、小見出しであるh2を「自己紹介」、「Message!!」に指定していますね。

改行要素

<br />です。
以上です。これで改行できます。最後の/を忘れないようにしてください。
なお、この要素は連射禁止です。必ず一度使ったら二度連続で使用しないでください。
これもSEO対策です。
SEOは・・・、ここでの説明は避けます。まぁ後々。

リスト要素

これは非常に重要な要素です。今後CSSを使ってサイトをデコレートしていく際、リストは良く使います。例えばこのサイトの上の「Contents」メニュ、左の「Menu」メニュなどにもリスト要素が使われています。
代表的なリスト要素は<ul>です。これに項目要素である<li>を使ってリストを作成します。
リストにはいくつか種類があるので、ここではその中でよく使うものを紹介していきます。

リスト要素の紹介

一番スタンダードのものはulリストです。

<ul>
<li>おはよう</li>
<li>こんにちは</li>
<li>さようなら</li>
</ul>

こう打つと、

おはよう
こんにちは
さようなら

こういう黒点のリストが完成します。また、

<ol>
<li>おはよう</li>
<li>こんにちは</li>
<li>さようなら</li>
</ol>

おはよう
こんにちは
さようなら

番号がでリスト化されます。また

<ul>
<li>おはよう <ul>
<li>こんな感じで</li>
<li>リスト要素を</li>
<li>重ねてみると <ul>
<li>こんな感じに</li>
<li>なるんです。</li>
<li>下参照</li>
</ul> </li>
</ul> </li>
<li>こんにちは</li>
<li>さようなら</li>
</ul>

おはよう
こんにちは
- こんな風に
- 階層化
- することも
  - できたりします。
  - たまに
  - 使います
さようなら

・・・読みにくいですね・・・。

練習1終了

これでだいたいサンプルページは作れるのではないでしょうか？簡単でしょ。
それでは、さくっと他の説明もしていきますよ～
また、コンテンツCSSで、サンプルページのデザインのやり方も開設してたりします。そちらも、参考にしてみてくださいね。