10月, 2011

リストタグその１

2011年10月31日 staff 未分類, 0

今回は「リストタグ」について。

順不同のリストを作成するには、<ul> と　<li>　を使います。

買うものリスト

• パン
• 牛乳
• じゃがいも
• にんじん
• たまねぎ

HTML:

<h1>買うものリスト</H1>
<ul>
	<li>パン</li>
	<li>牛乳</li>
	<li>じゃがいも</li>
	<li>にんじん</li>
	<li>たまねぎ</li>
</ul>

階層を持たせることも可能です。

買うものリスト

• 朝ごはん
  • パン
  • 牛乳
• 晩ごはん
  • じゃがいも
  • にんじん
  • たまねぎ

HTML:

<h1>買うものリスト</H1>
<ul>
    <li>朝ごはん
        <ul>
            <li>パン</li>
            <li>牛乳</li>
        </ul>
    </li>
    <li>晩ごはん
        <ul>
            <li>じゃがいも</li>
            <li>にんじん</li>
            <li>たまねぎ</li>
        </ul>
    </li>
</ul>

見出しタグ：<h1>～<h6>

2011年10月28日 staff 未分類, 0

今回は「見出しタグ」について。

見出しをつけるには<h1>～<h6>を使います。

大きな見出し（<h1>）
↓
中くらいの見出し<h2>
↓
小さい見出し<h3>
↓
中くらいの見出し
…と、順に付けていくようにします。

<h1>はページに１つのみ使うことができ、
数字が小さいほど重要度が高く、大きいほど重要度が低い見出しとなります。

また、<h1>の後に、いきなり<h3>を使用したり、
<h1>を飛ばして<h2>から使用することはできません。

例：

ナントカ講座

テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。

○○について

テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。

○○とは？

テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。

○○のメリット

テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。

××について

テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。

××とは？

テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。

HTML:

<h1>ナントカ講座</h1>
<p>テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。</p>

<h2>○○について</h2>
<p>テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。</p>

<h3>○○とは？</h3>
<p>テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。</p>

<h3>○○のメリット</h3>
<p>テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。</p>

<h2>××について</h2>
<p>テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。</p>

<h3>××とは？</h3>
<p>テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。</p>

段落タグ：<p>

2011年10月25日 staff 未分類, 0

今回は「段落タグ」について。

テキストをまとまった段落とするタグが<p>タグです。
<p>～</p>で囲まれた部分が1段落となり、
デフォルトの場合前後に1行分の空きを入れてくれます。

例：

小説などでの表示（字下げ）

…ナイフが小さいのと、親指の骨が堅かったので、今だに親指は手に付いている。しかし創痕は死ぬまで消えぬ。
　庭を東へ二十歩に行き尽すと、南上がりにいささかばかりの菜園があって、真中に栗の木が一本立っている。…

↓

webページ、メールでの表示（段落と段落の間に空き）

…ナイフが小さいのと、親指の骨が堅かったので、今だに親指は手に付いている。しかし創痕は死ぬまで消えぬ。

庭を東へ二十歩に行き尽すと、南上がりにいささかばかりの菜園があって、真中に栗の木が一本立っている。…

↓

HTML

<p>…ナイフが小さいのと、親指の骨が堅かったので、今だに親指は手に付いている。しかし創痕は死ぬまで消えぬ。</p>
<p>庭を東へ二十歩に行き尽すと、南上がりにいささかばかりの菜園があって、真中に栗の木が一本立っている。…</p>

改行タグ：<br>

2011年10月24日 staff 未分類, 0

これからしばらく、よく使うタグについて書いていきたいと思います。

今回は「改行タグ」について。

改行には、<br> を使用します。
使い方は簡単。改行したい部分にこのタグを入れるだけです。

例えば…

親譲りの無鉄砲で小供の時から損ばかりしている。
小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。…

と表示させたい場合は、

親譲りの無鉄砲で小供の時から損ばかりしている。<br>
小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。<br>
なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。...

このようになります。

また、基本的に<br>タグは、

改行したい<br>
<br>
<br>
改行終わり。

このような2連続以上の使用はしないほうが良いと言われています。