ウェブのお勉強はじめました（4）段落と改行とリストと

えっと、何を話してましたっけ状態（笑）

しかもはてなダイアリーからはてなブログに移ってきて、下書きが消えてしまい意気消沈しておりました。

とりあえず今日はhtmlタグの続きを。

<p><br>と<ul><ol><li>について。

まずは<p>と<br>

段落の区切りが<p>

強制的に改行させるのが<br>

はてなのこの記事を書いているときは、

こうやって

改行に

なります。

あいだあいだに間隔が空いてソースを見ると<p>が使われています。

それが<br>を使うと

こうやって
改行に
なります。

べったりしてますな。

段落はあくまで意味のまとまりごとに区切る。とりあえず見栄えのためにといって

こうやって改行しまくるのは検索エンジン的によろしくないわけです。正しい記述で文章構造をつくることがwebにおいてはなにより重要。厳密に上のように空白をあけたい場合は別の記事に書きますがCSSのほうで記述するのが良いです。

続いて<ul><ol><li>のはなし

・ごはん

・麻婆豆腐

・餃子

と

• ごはん
• 麻婆豆腐
• 餃子

上のソースコードは

<p>・ごはん</p>

<p>・麻婆豆腐</p>

<p>・餃子</p>

と<p></p>で段落を分けているのに対して下のソースコードは<li>を使っています。

<ul>
<li>ごはん</li>
<li>麻婆豆腐</li>
<li>餃子</li>
</ul>

箇条書きのときはリスト（ul）を使用する。pはあくまでパラグラフでの区切り。見た目には同じに見えてもウェブの文書構造としては全然違う。

<ul>テキストテキストテキスト</ul>・・・箇条書きリスト（順不同）:１２３４と番号がつかないリスト。<li</li>と一緒に使う。
<ol>テキストテキストテキスト</ol>・・・箇条書きリスト:1234と番号が付く。<li></li>と一緒に使う。

 使うのは圧倒的に順番を指定しない<ul>みたいですね。サイトの下のほうのメニューとかでよく見ます。

<ul>
<li>私たちのこだわり</li>
<li>商品情報</li>
<li>お手入れについて</li>
<li>スキンケアについて</li>
<li>使用方法</li>
<li>無料サンプルお申し込み</li>
<li>お知らせ</li>
</ul>

ブラウザ上の表記は下のようになる

• 私たちのこだわり
• 商品情報
• お手入れについて
• スキンケアについて
• 使用方法
• 無料サンプルお申し込み
• お知らせ