HTMLの基礎 Last Update : 2013/09/05 09:09:07

 Webページ作成の為のHTMLを解説しています。

はじめに
■機能索引
HTMLとは
タイトルや背景
文字
レイアウト
リンク
画像
表(テーブル)
フォーム
フレーム
拡張子
カラーチャート
CSS辞典
相対・絶対パス
特殊文字
■主なタグ索引
meta
body
p
br
hr
h
font
b
i
sup
sub
acronym
marquee
div
pre
ul
ol
blockquote
q
dl
img
a
table
frameset
iframe
form
input
textarea
select
button
リンクしてね☆
HTMLの基礎-タグを覚えてウェブページを作ろう!
バナーはダウンロードしてお使い下さい。
文字
■色々なレイアウト

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

■段落の位置の設定 <div>


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

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

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




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


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

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



■リストを設定する <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>を書かなくても良いです。



■リストを設定する2 <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>を書かなくても良いです。



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


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


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

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



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


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


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

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




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


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


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

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




メール

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


サイト検索
制作便利アイテム

カラーチャート
Color fan

色相・明度・彩度順カラーチャート。CMYK、RGB、慣用色名、配色事典付き。DTP、Web(HTML)で使えます。収録色の全てに、CMYK値、RGB値、そしてHTML用16進数を併記。
WEB関連リンク

Copyright © 2003 - ykr414. All Rights Reserved.