山ほどあるタグの中で、重要なものだけをピックアップしています。

タグを一個一個しっかり理解し覚え、完璧に使える様になりましょう。



<p></p>段落について。

<p></p>は「paragraph(パラグラフ)」の省略で、paragraphを日本語にすると「段落」。
段落とはひとまわりの文章、を意味します。
文章は段落も無く改行も無く一行で書いてあるととても見づらいので、整頓するのに重要です。

文章下に段落で分けた文章を例にしています。
---------------------------------------

<p>体の大きさは現生するネコ科の他のほとんどの動物に比べて小さく、体重は2.5 - 7.5kgの範囲に収まるものが多いものの、大型のものでは、体長(頭胴長)75cm(比較資料:「長さの比較」)、尾長40cm、肩高35cmに達する。</p>

<p>顔の大きさの割に、かなり大きな眼を持っている。
<br> 他の動物における子供の眼の大きさの比率に近く、これがネコを「可愛い」と思わせる一因にもなっている。<br>
視覚については、特に対象の動きを捉えることを得意とする。8m位の距離ならば人間の顔を識別することが可能である。<br>
[文献2 2] 20m以内のものであれば、じっと見ることによって距離感をかなり正確に測ることができる。</p>

<p>鼻は、他の動物に比べてそれほど優れているわけでもないが、ヒトと比べれば数万から数十万倍と言われる嗅覚を持つ。<br>
体のバランスに比べて小さくできているが、鼻腔内部は凸凹に富み、大きな表面積を生み出しているため、小さな鼻の外観だけからは予想できない優れた嗅覚がある。<br>
また、ネコの鼻は個体によって異なる紋様を持っている。これは「鼻紋」と呼ばれ、人でいうところの指紋と同じものであり、個体の識別の際に用いられる。</p>
---------------------------------------

上の猫の文章から段落と改行を取ると非常に見づらい。↓

体の大きさは現生するネコ科の他のほとんどの動物に比べて小さく、体重は2.5 - 7.5kgの範囲に収まるものが多いものの、大型のものでは、体長(頭胴長)75cm(比較資料:「長さの比較」)、尾長40cm、肩高35cmに達する。顔の大きさの割に、かなり大きな眼を持っている。他の動物における子供の眼の大きさの比率に近く、これがネコを「可愛い」と思わせる一因にもなっている。視覚については、特に対象の動きを捉えることを得意とする。8m位の距離ならば人間の顔を識別することが可能である。[文献2 2] 20m以内のものであれば、じっと見ることによって距離感をかなり正確に測ることができる。鼻は、他の動物に比べてそれほど優れているわけでもないが、ヒトと比べれば数万から数十万倍と言われる嗅覚を持つ。体のバランスに比べて小さくできているが、鼻腔内部は凸凹に富み、大きな表面積を生み出しているため、小さな鼻の外観だけからは予想できない優れた嗅覚がある。 また、ネコの鼻は個体によって異なる紋様を持っている。これは「鼻紋」と呼ばれ、人でいうところの指紋と同じものであり、個体の識別の際に用いられる。


<br>改行について

<br>は「break(ブレイク)」の省略でbreakは「改行」と言う意味。
<br>には言葉は入れられないので、<br>単体で使う。



<ul>~</ul>と<li></li>ついて

まずは<li></li>を理解しまりょう。<li>は「list(リスト)」の省略で、意味は「表」や「一覧表」「もくじ」など色んな意味があります。が、多分リストは和製英語でもあるから大丈夫だよね^^

<ul>~</ul>について
<ul>~</ul>はこのリストがどんなリストはを分かりやすくする為の囲み線だと思ってください。
<ul>は「Unordered List(アンオーダードリスト)」の省略で、「順が無いリスト」と言う意味

この<ul>で囲むと頭にリストマーク(この場合「・」が付く)
※他のリストマークについて→http://www.htmq.com/html/ul.shtml

<ul>
<li></li>
<li></li>
<li></li>
</ul>

文具リストを作りました。

  • ボント
  • 画鋲
  • えんぴつ

<ol>~</ol>について

上で話した「順の無いリスト」と違って、今度はリストに順番付けをするタグについてです。

<li></li>を、<ol>~</ol>で囲むと頭に勝手に数字が順番良くつきます。

「order list(オーダーリスト)」の省略です。orderは「順序」と言う意味。

<ol>
<li>ボント</li>
<li>画鋲</li>
<li>えんぴつ</li>
</ol>

買い物する順番に並べました

  1. ボント
  2. 画鋲
  3. えんぴつ

 


<dl></dl> <dt></dt> <dd></dd>定義リストについて

http://airrat.blog103.fc2.com/blog-entry-316.html <dlからddまでの説明サイト

<dl></dl>は「Definition List(ディフィニション リスト)」の省略で、「定義をつけたリスト」をまとめるタグ。

<dt></dt>「Definition Term(ディフィニション ターム)」の略で、「項目」を意味します。

<dd></dd>「Definition Description(ディフィニション デスクリプション)」の略で、「名目」や「説明」、「種類」等を意味します。

【使用例タグ面】

<dl>
<dt>可愛い動物の名前は</dt>
<dd>犬</dd>
<dd>猫</dd>
</dl>
<dl>
<dt>美味しいのはこちら</dt>
<dd>せんべい</dd>
<dd>ケーキ</dd>
</dl>

【使用例ブラウザ表示面】

 
可愛い動物の名前は
美味しいのはこちら
せんべい
ケーキ

<hr>

↑↓上と下の横線、話題を変えるときの大きな区切り線に使える。(特に無くても大丈夫だけど、あると見やすいときもあります。)

<hr>はhorizontal lineの省略。「horizontal line(ボーダーライン)」は水平線

<hr>には言葉は入れられないので、<hr>単体で使う。


<img ~... 最後に画像についてです。複雑です。

<img src="rainbow.jpg" alt="虹の写真" width="●●" height="●●" alt="画像の簡単な説明" / >
↑例

img src="画像の場所(画像までのアドレス)や画像の名前" 
画像の名前の所に画像の名前を入れます。日本語は禁止で、ここで勝手に名前をつけるのではなく、あらかじめ用意している画像を呼び出したい場合、その呼び出したい画像の名前を入れてあげます。※デスクトップにある「mmm.jpg」を言う画像を呼び出したい時は img alt="mmm.jpg" となります。

srcは「source(ソース)」の略。sourceの意味は「元」「起源」「源」

width="●●" height="●●"  <画像の縦、横を入れる  width(ワイド) height(ハイ)
検索エンジン(googleとかyahooとか)に評価良く見られたいので、できる限りいれる。最悪無くてもイケる。
後はドリームウィーバーが勝手に入れてくれたりもします。

alt="画像の簡単な説明" alt(オルト)

テキストの画像の回りこみ

<img ~の中に align="left" と入れると、画像が文字の左側に回りこみます。
「align(アライン)」は一列に並ぶ、整列する、一直線になる、と言う意味

xmas-recipe.jpgクリスマスケーキのレシピはいろいろな種類がありますが、まずはケーキの基本とも言えるスポンジ生地の作り方をご紹介したいと。

今年はクリスマスケーキを手作りしてみたい、と考えている人もいると思います。そんな方にお役立ていただけるレシピとなって貰えたら嬉しく思います。

家で家族と過ごすにしても、友達や恋人と一緒に過ごすにしても、クリスマスの場面に外せないのがクリスマスケーキです。11月になると、それまでハロウィーン仕様の黒とオレンジ色でデコレーションされていたお店やレストランが、今度は赤と緑のクリスマスカラーに変わっていきます。


以下、テキスト自体にタグをつけて変化をつけ、特徴を持たせる。


<h1>~</h1>見出しについて

<h1>は<heading1>を省略したものです。

「heading(ヘディング)」は日本語にすると「見出し」と言う意味で、タイトルとは別に段落に付くタイトルになります。

<h1>~</h1>の次の見出しは

<h2>~</h2>になります。

次は<h3>~</h3>

次は<h4>~</h4>...


<strong></strong>強調タグ

強調したい文字を「<strong></strong>」で囲むと太字になる。

strong(ストロング)は強い、力がある、などの意味。

例→ 実際僕の大好きな人は斉藤貞子と言う。色白で素敵な女性

見る人に太字なのでここを強調したいんだね、と思わせるだけではなくて、検索エンジンの対策にもなる。


<b></b>太字表示タグ

<b></b>の「b」はbold(ボールド)の略で、boldはハッキリした、目立つ と言う意味

<strong>も<b>も見た目はほぼ似てます。ただの太字だけど、
違うのは検索エンジンの見方だけ。

<strong></strong>で囲んだ文字は検索エンジンに強調をアピールするけど
<b></b>はそんなに重要視してもらえないので弱いタグ。

検索エンジンには重要だと知らせたくないんだけど無駄に文字をしたいときとかに使えるので一応。

例 車に乗ってたら対向車がバカみたいな走りしてて爆笑したんだよね!

↑くだらない内容なんだけど、ちょっと目立つ字にして欲しいときとかに便利

-------------------------

<b></b>のほかにもstrongほど重要じゃないけど、目立たせたいときにつけるテキスト飾りタグがあります。

<em></em> Emphasisの省略。意味は重要視する。と言う意味。<strong><b>の中間くらいの強調力があると思ってください。

例→文字がこんな感じで無駄に斜めになります。


引用タグ

引用とは
自分の説、意見のよりどころとして他人の言葉や文章、事例を引いて使うこと。
引用する場合は引用の対象となる文章がその人のものであるということを明確に示さなければならない。


引用タグ<blockquote></blockquote> (改行有りの文字を含む場合)

<blockquote><p>文章の引用</p></blockquote>


文章の引用<q></q> 改行が無い場合のみに使用

スタイルシートで何も設定されていなければ、<blockquote>~<blockquote>で囲まれた部分は上下にスペースが空き、インデントが入る。

<q>~</q>で囲まれた部分は前後に改行が入らないインライン要素で、引用符が付けられる。ただこのタグはWindowsIE(~6)では対応していない。

<q></q>例

彼はこう言った。豚は空を飛ばない。
飛ぶのは人間ではなく、機械だ。


もう一個の使える引用タグ

<fieldset></fieldset>と<legend>タイトル</legend>で文字付きワクが

タイトル この引用タグはハイレベル!
美味しいのはこちら