uncode アンコード

アンコードブログ アンコードブログ

アンコード

uncode Official Blog

アンコードブログ アンコードブログ

2017年7月24日

Web

どうも。アンコード タケです。

東京に住んでいる友達から、夏なのに先日ビー玉大くらいのひょうが降ってきたと聞き異常気象で今後どうなっていくんだと、ビクビクしている今日この頃のタケです。

今回引き続き、htmlによく使われるタグ紹介をしたいと思います。

 

<h1>〜</h1>  〜  <h6>〜</h6>

見出し作成に用いるタグです。<h1>を最上位とし<h6>を最も低いレベルで実装されます。

下記 例

 

<p>〜</p>

<p>とはパラグラフの意味。段落を表します。この要素はブロックレベル要素になります。囲まれたテキストは1つの段落であることを示します。

 

<a>〜</a>

<a>とはアンカーの意味。他のウェブページ、ファイル、同一ページ内の場所、指定したメールアドレスへの送信、他のURLへのハイパーリンクを作成します。

例:

<a href="http://リンク先/">リンク</a>

 

<img>

画像を貼り付ける際に使用するタグです。※終了タグが存在しません。

例:

<img src="sample.jpg" alt="サンプル画像">

 

<ol>〜</ol>  <ul>〜</ul>  <li>〜</li>

 

<ol>

順序付きリスト要素。1,2,3〜 a,b,c〜 など順番のあるリストを作成する際に使用する。<ol>と<ul>は、どちらも項目リストの表示しますが、表示方法に違いがあります。<ol>要素は、順序に意味があります。リスト項目の位置を変更してその意味が変わる場合は、<ol>要素を使用して下さい。そうでない場合は、<ul>要素を使用して下さい。

 

<ul>

数的な順序がなく、その配置順に意味を持たないアイテムを持つリストを表す。記号の種類はtype属性で指定する事ができます。

<li>

リスト項目を表す為に用いられます。<ol>~</ol> あるいは<ul>~</ul>の内に記述します。

 

<div>〜</div>

何か特定の意味を持っていない。凡用的なブロック要素。例えば、この要素にclass属性やid属性を指定する事で、任意の範囲にスタイルを適用できるようになります。

divタグは下記のように書きます。

例:

<div>あいうえお</div>

上のように、idやclass を追加する事で役立ちます。下記参照。

例:

<div id="id名">あいうえお</div>

例:

<div class="class名">あいうえお</div>

 

class idとは?違い。

idとclassとは属性と呼ばれるもの。

class
「種別名を割り当てる」
→ 同じclass名を、1ページ中に何度でも使える
id
「固有の名前を割り当てる」
→ 同じid名は、1ページ中に1度しか使えない

class属性が対象の「種類・部類」を表しているに過ぎないのに対して、id属性は対象に「固有の名前」を付けて一意に表すために使われます。ですから、1ページ中に同じid名は1度しか使えません。

使い分け

id名が1ページ中に1回しか登場しないという仕様は、スタイルシートのソースを読み解く際にも役立ちます。装飾に「id」が使われていれば、「どこか一意に特定できる部分だけに限定した装飾なのだ」と簡単に把握できますからね。

 

<span>〜</span>

spanとは。単体では特に意味を持たないタグになります。spanで囲った部分をインライン要素としてグループ化することができます。グループ化により、指定したスタイルシートを適用したりすることができます。

同じ意味を持つタグとして<div>がありますが、ブロックレベル要素として、グループ化を行いますので、見出しや、段落。リストなどとしてみなされ、改行がはいります。この<span>タグはインライン要素で文章の一部として認識されますので、前後に改行は入りません。

 

<dl>〜</dl>  <dt>〜</dt>  <dd>〜</dd>

定義リストは<dl>タグで範囲を表し、定義する用語を<dt>タグで、用語の説明を <dd>タグで表ます。

下記 例


<dl>
<dt>用語</dt>
<dd>用語に対する説明</dd>
</dl>

<dl>

definition list(定義)の略で、定義リストを表すタグです。

<dt>

definition teamの略で、定義語を表すタグです。

<dd>

definition descriptionの略で、定義の説明を表すタグです。

アンコードブログ アンコードブログ