html簡易リファレンス

日記で使いそうなタグについてまとめ。本当はブロックレベルとかインラインレベルといった違いを 知った上で使うべきだが、実用的にはこのレベルの説明でいいんじゃね〜の的な説明。 もっと他のタグを知りたい人はGekoweb(旧炭色地帯)の HTML愚痴リファレンスを読んだ上でいろいろ調べてみてくれ。

タグの使い方

タグの効果をかけたい文章に対して

<p>pは段落、つまりパラグラフを表す要素だ。</p>

といった感じで使う。

ただしimg要素は例外的に

<p>ここに画像入れたい→<img src="..." alt="...">←ここに画像入れたい。<p>

という風に単独で使う。

タグは半角で書く。大文字でも小文字でもいいけど、個人的には小文字を勧める。楽なのと見慣れてるので。

大切なのはhtmlは見た目で書くものではないということ。文章の骨格を作るものであって、 その装飾はcssなどのスタイルシートが担っている。

タグじゃねぇけど・・・

「<」や「>」などはタグを書くために使われている都合上、そのままではかけない。 ということで「<」や「>」を書くためには「&lt;」、「&gt;」と書かないといかん。 ほかにもこういったたぐいのやつがあるけどそれは自分で調べろ。

それから、コメントという表示されない文章を書くこともできる。ツクールで言うところの 注釈と言った感じ。書き方は下の通り。 

<!--コメント-->

<!--
コメントは複数行にわたって書くことができる。
たとえばこんな感じ。
いえーい。
-->

リファレンス

p

段落を作る要素。文章の大半はこれで書く。漏れの場合ズラズラ書いてそろそろ改行してぇな、と思ったら、 </p>で閉じて、次の段落にする、といった感覚で使ってる。少なくとも文を一つ含むのが適正。

この要素の中で改行とか連続スペースとかしても反映されない。このことはほとんどのタグについていえる。

使用例

<p>
もしもW3Cの勧告した標準に準拠したhtmlのみ表示されるブラウザがあるならば、
そのブラウザではほとんどのページを見れないだろう。・・・それほどhtmlの誤用は多いのだ。
</p>

表示例

もしもW3Cの勧告した標準に準拠したhtmlのみ表示されるブラウザがあるならば、 そのブラウザではほとんどのページを見れないだろう。・・・それほどhtmlの誤用は多いのだ。

ul,ol,li

リストを作るタグ。ulは番号とか付かない箇条書きのリスト、olは1,2,3・・・といった感じに 番号が頭に付くリスト。liはリストの中の各項目を示す。

使用例

<p>材料は以下の通り。</p>
<ul>
 <li>ショウガ</li>
 <li>ヒジキ</li>
 <li>レンコン</li>
 <li>ピーマン</li>
 <li>油揚げ</li>
</ul>
<p>作り方は以下の通り</p>
<ol>
 <li>ショウガをスライスして炒める。</li>
 <li>レンコンを茹でる。</li>
 <li>油揚げを半年間寝かす。</li>
 <li>ヒジキを生やす。</li>
 <li>おい、ピーマンはどこへ行った。</li>
</ol>

表示例

材料は以下の通り。

作り方は以下の通り

  1. ショウガをスライスして炒める。
  2. レンコンを茹でる。
  3. 油揚げを半年間寝かす。
  4. ヒジキを生やす。
  5. おい、ピーマンはどこへ行った。

dl,dt,dd

定義型リストを作るタグ。しりとりで使ってる奴。依存症になりやすい。 定義する言葉をdtで挟み、その定義をddで挟む。dtとddはセットで使うものだとあれほど・・・。

使用例

<dl>
 <dt>dt要素</dt>
 <dd>定義型リストにおいて定義する言葉を示す要素。</dd>
 <dt>dd要素</dt>
 <dd>定義型リストにおいてその定義文を示す要素。</dd>
 <dd>ちなみに連チャンで使って複数の定義をすることができる。</dd>
 <dd>この中にリストを含めることも可。</dd>
</dl>

表示例

dt要素
定義型リストにおいて定義する言葉を示す要素。
dd要素
定義型リストにおいてその定義文を示す要素。
ちなみに連チャンで使って複数の定義をすることができる。
この中にリストを含めることも可。

a

リンクを作る要素。いわゆる安価。href属性でリンク先のアドレスを指定して使う。必ず何か別の要素の中にある必要がある。

使用例

<p>さあいますぐ<a href="http://mazda1micro1vaka.yakiuchi.com/index.html">パソコン部非公式サイト</a>へ
アクセス!!</p>

表示例

さあいますぐ パソコン部非公式サイトへアクセス!!

img

画像を載せる要素。対にはならず単独で使う。src属性で画像のファイルパス、alt属性で代替テキストを指定して使う。 ようするにsrcにファイル名(拡張子含む)、altに画像が表示できなかった時に代わりに表示される文章を書く。

必ず何か別の要素の中にある必要がある。

*:本当はファイル名ではなくファイルのアドレスのようなもの。絶対参照と相対参照の二通りがあり、 ここで言っているのは相対参照。相対参照で同じディレクトリにあるファイルを参照すると、ファイル名のみ という風になる。まぁ日記の場合画像と文書が違うディレクトリに配置されることはねぇだろという判断で書いた。 ちゃんと知りたい人はググれ。

使用例

<p>現在の私のPCの壁紙は<img src="nida_paper.bmp" alt="ニダー">ですが何か？</p>

表示例

現在の私のPCの壁紙はニダーですが何か？

em

文章の中で強調したいところを示す要素。必ず何か別の要素の中にある必要がある。 結局次のstrongばかり使うのでemは影が薄い。

使用例

<p>なぁ、いいか〜、<em>混沌</em>すっぞぉぉ!!!!</p>

表示例

なぁ、いいか〜、混沌すっぞぉぉ!!!!

strong

emよりさらに強調する要素。タグの名前からして強そう。 必ず何か別の要素の中にある必要がある。

使用例

<p>ほっ、いいか、<strong>東洋大</strong>へ行け!!!!</p>

表示例

ほっ、いいか、東洋大へ行け!!!!

pre

整形済みの文章を示す要素。この要素内では例外的に改行や連続スペースが反映される、という代物。 だからって何でもかんでもこれを使わないでくれ。

もっぱらソースコ−ドをさらすとき用。

使用例

<pre>
#include &lt;stdio.h&gt;

int main()
{
    int i;
    
    for(i=0;i&lt;100;i++)
    {
        printf("ぼかぁグランドールじゃなああぁい！！");
    }
    
    return 0;
}
</pre>

表示例

#include <stdio.h>

int main()
{
    int i;
    
    for(i=0;i<100;i++)
    {
        printf("ぼかぁグランドールじゃなああぁい！！");
    }
    
    return 0;
}