ＨＴＭＬ－レイアウト－　　－ＨＴＭＬの基礎

文字

■色々なレイアウト

ここでは、リストの作り方や段落の設定など、レイアウトについて説明します。このページに掲載しているタグは以下の通りです。

<div>
<pre>
<ul>
<ol>
<blockquote>
<q>
<dl>

使用例
<p>文字列</p> <p align="値">文字列</p>

属性	値	解説
alignの値	left center right	段落の位置を指定する

文章の区切りを表す時に使用します。
段落を設定する<p></p>と同じようですが、<p></p>は直前と直後に空行が入るのに対し、<div></div>は空行が入りません。
（align属性は非推奨です）

PAGETOP

■記述したとおり表示する　<pre>

使用例
<pre>文字列</pre>

<pre></pre>の間に指定した空白や改行など、テキストエディタに表示されている通りの形で表示させる事ができます。

PAGETOP

■リストを設定する　<ul>

使用例
<ul> 　　　　<li>文字列　　　　<li>文字列　　</ul>
<ul> 　　　　<li type="値">文字列　　</ul>

属性	値	解説
type	disk circle square	diskは黒い円 circle白い円 squareは正方形

<ul></ul>はリストを設定するタグです。
<ul></ul>の間に、<li>タグでリストを設定していきます。
<ul></ul>は行頭に記号が付きます。記号の種類は上記の通り、 type属性で指定することができます。type属性を省略した場合は黒い円が行頭につきます。
なお、<li>タグは終了タグ</li>を書かなくても良いです。

PAGETOP

■リストを設定する２　<ol>

使用例
<ol> 　　　　<li>文字列　　　　<li>文字列　　</ol>
<ol> 　　　　<li type="値">文字列　　</ol>
<ol> 　　　　<li value="値">文字列　　</ol>
<ol start="値"> 　　　　<li>文字列　　</ol>

属性	値	解説
type	A a I i 1	Aはアルファベット大文字 aはアルファベット小文字 Iはローマ数字大文字 iはローマ数字小文字 1は数字
value	開始番号	開始番号を指定
start	開始番号	リスト全体の開始番号を指定

<ol></ol>は番号つきリストを設定するタグです。
<ol></ol>の間に、<li>タグでリストを設定していきます。
<ol></ol>は行頭に番号が付きます。記号の種類は上記の通り、 type属性で指定することができます。type属性を省略した場合は数字が行頭につきます。

<li>のvalue属性で開始番号を指定した場合、
その属性を指定したリストの途中から、指定した番号で開始されます。

<ol>のstart属性で開始番号を指定した場合は、
そのリストは指定した番号から開始されます。

なお、<li>タグは終了タグ</li>を書かなくても良いです。

PAGETOP

■引用文等を設定する　<blockquote>

使用例
<blockquote>文字列</blockquote>

参考文献などから文章を引用する時に<blockquote></blockquote>の間に記入します。 <blockquote>文字列</blockquote>の間にある文章は上下左右に余白が設定され、他の文より強調されます。

※他者が作成した文章などを引用する際は著作権に充分ご注意下さい。

PAGETOP

■引用文等を設定する　<q>

使用例
<q>文字列</q>

<blockquote></blockquote>は長い文章に使われるのに対し、 <q></q>は単語や短い文章などを引用する際に使われます。
<q></q>の間にある文字列は、ダブルクォーテーションで囲まれます。

参考
<cite></cite>の間にある文字列はイタリック（斜体）で表示されます。<i></i>でもイタリックで表示する事が出来ますが、<i></i>はただ単に文字を修飾するだけなのに対し、 <cite></cite>は引用部分を明確にするというＨＴＭＬ構造上の意味があります。

PAGETOP

■単語の意味を定義する　<dl>

使用例
<dl> 　　　　<dt>単語　　　　<dd>単語の意味　　</dl>

難しい単語などの意味を説明しておきたい場合に使います。
<dt>に説明したい単語を記述し、 <dd>にその単語の意味を説明した文を入れます。そして、それらの文章を<dl></dl>で囲みます。

<dl></dl>で囲まれた単語の説明は自動的にインデントされるので、単語の説明を効果的に行う事が出来ます。

PAGETOP

メール

質問メールがとても多くなった為、現在返信が遅れております。お返事が出来ていないものも沢山あり、今のところいつになるのか・必ず返信出来るのかどうかの保証が出来ません。申し訳ございませんが、その事をご理解いただいた上でご送信下さい。また、ここではHTMLの質問に関してのみ受け付けております。

メールはこちらから：ykrmain★★★eay.jp

PAGETOP

Webページ作成の為のＨＴＭＬを解説しています。★本サイトにはプロモーションが含まれています★

　Webページ作成の為のＨＴＭＬを解説しています。★本サイトにはプロモーションが含まれています★