HTML&CSS

1 見出しタグ

表題などは見出しタグ<h1></h1>を用いる。例えば、<h1>第1章</h1>と記述すればよい。
文章の構成が章、節で分けられている場合、章は大見出しタグ<h1></h1>、節は中見出しタグ<h2></h2>を用いる。HTMLではこの他h3, h4, h5, h6まである。
一般的には大見出し、中見出し、小見出しの順に文字の大きさを小さくして表現するが、HTMLではh1~h6までデフォルトの大きさがそれぞれ決まっている。
ただし、文字の大きさでh1からh6の見出しタグを選択してはならない。あくまでも文章構成の中での見出しの位置づけとして見出しタグを選択し、 実際の表現の際の文字の大きさはCSSで決めるのが作法である。

2 段落タグ

説明文など一連の文章は段落タグ<p></p>を用いる。<p>と</p>の間に文章を記述する。
文章はタグで囲まなくてもブラウザに表示されるが、HTMLは文書内での構成要素を規定するのが目的であるから、タグで囲まれない 文字、文字列、文章を記述するべきではない。

3 文字のフォントと大きさ

スタイルの設定は<head>~</head>の領域に以下のような<style>タグを設け、ここに文書内のタグに対する プロパティをいろいろ設定することによって行う。

  <style type="text/css">
   タグ名 {
     プロパティ: 値;
     プロパティ: 値;
     ......
   }
  </style>

文字のフォントはfont-familyプロパティで、大きさはfont-sizeプロパティで設定することができる。 大見出しのフォントをゴシック系、大きさを18ポイントとするには以下のように記述する。

  h1 {
    font-family: sans-serif;
    font-size: 18pt;
  }

ここで、font-familyで具体的なフォント名を指定できるが、ブラウザやインストールされているフォントに依存してしまうので serif、sans-serif、fantasy、cursive、monospaceのような総称名を用いる方が安全である。

4 太字/イタリックと上付き/下付き文字

文章中の語句を重要という意味でマークしたければ、<strong>タグを用いる。このとき語句は太字で表示される。 語句を強調としてマークしたければ、<em>タグを用いる、このとき語句はイタリックで表示される。 語句に意味を持たせずに単に太字、イタリックにしたければ、語句を<span>と</span>で挟んで、CSS側でfont-weight: bold;またはfont-style: italicとする。

また文字を上付きあるいは下付きにすることができる。 それぞれ<sup></sup>タグと<sub></sub>タグを用いる。
3次方程式:ax3 + bx2 + cx + d = 0
水の分子式:H2O

5 段落内での改行と行間

段落内の文章はブラウザの横幅いっぱいに表示され、ブラウザの右端で折り返して表示される。ブラウザの大きさを変えれば1行の文字数も 変化して自動的に段落内の文章がすべて表示される。ブラウザの大きさに関係なく改行させたい位置には改行タグ<br>を記述する。
段落内の文章が多くなると文が何行にもわたり、行間がないと見づらくなってくる。このとき、line-heightプロパティで行間を指定することができる。 行間ではあるが行の高さを指定する形となるので1.5で半行空き、2で1行空きとなる。

上の段落と同じ文章を半行空きで表示すると以下になる。
段落内の文章はブラウザの横幅いっぱいに表示され、ブラウザの右端で折り返して表示される。ブラウザの大きさを変えれば1行の文字数も 変化して自動的に段落内の文章がすべて表示される。ブラウザの大きさに関係なく改行させたい位置には改行タグ<br>を記述する。
段落内の文章が多くなると文が何行にもわたり、行間がないと見づらくなってくる。このとき、line-heightプロパティで行間を指定することができる。 行間ではあるが行の高さを指定する形となるので1.5で半行空き、2で1行空きとなる。

上の段落と同じ文章を1行空きで表示すると以下になる。
段落内の文章はブラウザの横幅いっぱいに表示され、ブラウザの右端で折り返して表示される。ブラウザの大きさを変えれば1行の文字数も 変化して自動的に段落内の文章がすべて表示される。ブラウザの大きさに関係なく改行させたい位置には改行タグ<br>を記述する。
段落内の文章が多くなると文が何行にもわたり、行間がないと見づらくなってくる。このとき、line-heightプロパティで行間を指定することができる。 行間ではあるが行の高さを指定する形となるので1.5で半行空き、2で1行空きとなる。

6 同じタグに異なるプロパティを設定する。

上の例では<p>に異なるプロパティを設定していることになる。これにはclass属性またはid属性を用いる。
class属性の場合は、HTML部分で<p class="クラス名">と記述し、CSSでは.クラス名 {...}としてプロパティを設定する。
id属性の場合は、<p id="id名">と記述し、CSSでは#id名 {...}としてプロパティを設定する。 class属性はプロパティをクラスで分類した形であり、、同じ設定プロパティを他のタグに設定することが可能となる。 これに対し、id属性はその文書ファイル内に唯一1箇所だけ存在することを意味している。

7 段落内でのインデント

段落内の文章を入力する際は特にインデントを気にせず文章を次々と入力していけばよい。インデントはtext-indentプロパティで設定する。 設定する数値は文字数であるので絶対的な単位ではなく、そのとき有効なフォントの高さを1とする相対的単位emを用いる。

段落内の文章を入力する際は特にインデントを気にせず文章を次々と入力していけばよい。インデントはtext-indentプロパティで設定する。 設定する数値は文字数であるので絶対的な単位ではなく、そのとき有効なフォントの高さを1とする相対的単位emを用いる。 この段落では2emを設定している。

段落内の文章を入力する際は特にインデントを気にせず文章を次々と入力していけばよい。インデントはtext-indentプロパティで設定する。 設定する数値は文字数であるので絶対的な単位ではなく、そのとき有効なフォントの高さを1とする相対的単位emを用いる。 この段落では5emを設定している。

8 段落の横幅

段落の横幅をwidthプロパティで設定できる。ブラウザの横幅に対する相対パーセント値やピクセル数で指定することが出来る。 パーセント値の場合はブラウザの大きさが変化するとそれに対応して段落の横幅も変化する。 一方、ピクセル数の場合はブラウザの大きさが変化しても段落の横幅は変化しない。

段落の横幅をwidthプロパティで設定できる。ブラウザの横幅に対する相対パーセント値やピクセル数で指定することが出来る。 パーセント値の場合はブラウザの大きさが変化するとそれに対応して段落の横幅も変化する。 一方、ピクセル数の場合はブラウザの大きさが変化しても段落の横幅は変化しない。この段落では80%を指定している。

段落の横幅をwidthプロパティで設定できる。ブラウザの横幅に対する相対パーセント値やピクセル数で指定することが出来る。 パーセント値の場合はブラウザの大きさが変化するとそれに対応して段落の横幅も変化する。 一方、ピクセル数の場合はブラウザの大きさが変化しても段落の横幅は変化しない。この段落では500pxを指定している。

9 語句や文章の配置

表題や語句など1行を超えない文章の配置はtext-alignプロパティで設定できる。 プロパティの値をそれぞれleft、center、rightと指定すればそれぞれ左揃え、中央揃え(センタリング)、右揃えとなる。 文章が1行を超える場合にtext-alignを適用すると折り返した最終行だけが配置の対象となる。 複数行の段落全体を配置するにはmargin-leftプロパティとmargin-rightプロパティの値をautoに指定しなければならない。 また、この段落はwidthプロパティを80%に、text-alignプロパティをcenterに指定している。

表題や語句など1行を超えない文章の配置はtext-alignプロパティで設定できる。 プロパティの値をそれぞれleft、center、rightと指定すればそれぞれ左揃え、中央揃え(センタリング)、右揃えとなる。 文章が1行を超える場合にtext-alignを適用すると折り返した最終行だけが配置の対象となる。 複数行の段落全体を配置するにはmargin-leftプロパティとmargin-rightプロパティの値をautoに指定しなければならない。 また、この段落はwidthプロパティを80%に、margin-leftプロパティとmargin-rightプロパティを ともにautoに指定している。

表題や語句など1行を超えない文章の配置はtext-alignプロパティで設定できる。 プロパティの値をそれぞれleft、center、rightと指定すればそれぞれ左揃え、中央揃え(センタリング)、右揃えとなる。 文章が1行を超える場合にtext-alignを適用すると折り返した最終行だけが配置の対象となる。 複数行の段落全体を配置するにはmargin-leftプロパティとmargin-rightプロパティの値をautoに指定しなければならない。 また、この段落はwidthプロパティを80%に、margin-leftプロパティだけをautoに指定している。

10 文字色と背景色

文字の色はcolorプロパティで、背景色はbackground-colorプロパティで設定できる。 色の指定は#に続く16進6桁の表記法が一般的であるが、特に00、33、66、99、cc、ffの6種類のみからなる216色は環境が異なっても 同じ色として再現できることからをWebセーフティカラーと呼ばれ、多く用いられている。red、green、blueなどHTMLで定義されている色名は16色あるが、 セーフティカラーとは異なる色も含まれている。

背景色はタグの有効横幅に対して設定されるのでタグ間の文字数が少なくてもwidthプロパティで横幅を指定していなければブラウザの横幅全体が背景色で塗りつぶされる。 ページ全体の背景色を設定したい場合は<body>タグに背景色を指定する。

11 リストと罫線

項目を列挙したいときには<li>タグを用いる。
タグを入れなくても項目ごとに改行される。 一連の<li>タグを<ul>タグで囲む。 領域を分けるために罫線タグ<hr>を利用できる。


12 リストのスタイル変更

リストの先頭は<ul>タグのlist-style-typeプロパティで変更できる。 値をsquareとすれば四角のマーク、circleとすれば中空丸となる。以下がその例である。


13 リストの横表示

一般にリストは項目ごとに改行するが、項目が多いときには横に並べて表示したいことがある。 <li>タグにwidthプロパティとfloatプロパティを設定することでこれを実現できる。 floatプロパティとは指定した要素を次の要素に対してどちらに配置するかを決めるものでleftまたはrightを指定する。 leftを指定すると左から右に配置されていき、rightを指定すると右から左に配置されていく。 以下はwidthプロパティを150px、floatプロパティをleftに指定した例である。

14 表

表は<table>タグを用いて表示できる。行や列のためにタグが構造化されている。

  <table width="..." border="1">
    <th>
        <td></td><td></td><td></td>
    </th>
    <tr>
        <td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
  </table>

borderは表罫線の太さを設定するプロパティであるが、CSSではなく<table>タグに直接指定する方法が一般的である。 borderを指定しないと罫線は表示されない。 <th>タグは項目名を示すタグであり太字中央揃えで表示される。<td>タグは表のカラムを意味し、列の数だけこのタグが並ぶ。 <tr>タグは表の行を意味し、行の数だけこのタグが並ぶ。 列の幅は<th>タグに対してwidthプロパティを設定すれば列幅の等しい表ができあがる。 表題は<caption>タグを利用すると表の中央に表示される。 列幅を80px、borderの値を1とした表の例を以下に示す。

会員一覧
番号名前住所身長血液型
1田中東京都170
2斉藤千葉県165
3鈴木埼玉県182

カラム内はすべて左揃えで表示されるが中央揃えや右揃えにしたいときは<td>タグ内に直接alignプロパティを設定できる。 本来はCSSに記述すべきであるが、表の場合は例外措置として非推奨とはなっていない。 例えば、中央揃えにしたいカラムは<td align="center">とする。 番号と身長を右揃え、血液型を中央揃えにした表を以下に示す。

会員一覧
番号名前住所身長血液型
1田中東京都170
2斉藤千葉県165
3鈴木埼玉県182

表の枠線を1本の実線にしたいときはborderで指定した線幅を潰せばいいので<table>タグにborder-collapseプロパティを設定してcollapseの値を指定する。 また、表全体を中央揃えにするにはmargin-leftプロパティとmargin-rightプロパティの両方をautoに指定する。 それらの例を以下に示す。

会員一覧
番号名前住所身長血液型
1田中東京都170
2斉藤千葉県165
3鈴木埼玉県182

15 画像

画像は以下のような<img>タグを用いて表示できる。 保存されている画像ファイルのディレクトリ、幅、高さをそれぞれ指定する。 また、画像が表示できなかったときの代替え文字列としてaltプロパティの指定が必須になっている。 <img>タグには対応する閉じタグはない。

  <img src="..." width="..." height="..." alt="...">

飛行機 画像と文章を並べて記載するときはそれらの位置関係に種々の配置があり得る。 HTMLファイルでは<img>タグを先に記述し、その後に文章が記述されているとする。 画像を左に、続く文章を右側に配置したければ<img>タグにfloatプロパティを設定し、値にleftを指定する。 逆に画像を右に、続く文章を左側に配置したければfloatプロパティの値にrightを指定する。 画像が左、文章が右の例がこれである。

飛行機 画像と文章を並べて記載するときはそれらの位置関係に種々の配置があり得る。 HTMLファイルでは<img>タグを先に記述し、その後に文章が記述されているとする。 画像を左に、続く文章を右側に配置したければ<img>タグにfloatプロパティを設定し、値にleftを指定する。 逆に画像を右に、続く文章を左側に配置したければfloatプロパティの値にrightを指定する。 画像が右、文章が左の例がこれである。

ただし、段落ごとに設定をクリアする必要があるので<p>タグにclearプロパティを設定し、値をbothとしておく。

16 リンク

同一サイトの別のページやインターネット上のサイトにリンクさせるには<a>タグを用いる。 リンク先のページをディレクトリまたはURLで以下のように指定する。

  <a href="...">文字列</a>

インターネット上にあるHTMLに関する解説サイトをリンクした。

17 ボックスモデル

文章などは段落内に記載されるが、この記載領域の大きさをwidthプロパティとheightプロパティで設定できる。 しかしながら、実際の段落の領域の大きさはwidthプロパティやheightプロパティにpaddingプロパティの値を加えたものになる。 paddingプロパティとは文章からの上下左右方向への空間的大きさである。paddingプロパティも含めた大きさが背景の対象となる。 この領域の外枠を線で囲むことができる。borderプロパティで線の太さ、形式、色をそれぞれ指定できる。 枠線で囲まれた領域はブラウザの基準点からmargin-leftプロパティとmargin-topプロパティを設定することによっていろいろな位置に配置できる。 ここでは枠線の太さが3px、形式がsolid(実線)、色が茶系(#8b4513)で、margin-leftプロパティに30px、margin-topプロパティに10pxの位置に段落を配置した。 paddingプロパティは20pxであり、widthプロパティとheightプロパティはともに400pxである。 背景色は#ffffccとした。

18 見出しのデザイン

ボックスモデルを<h1>タグや<h2>タグに適用して見出しのデザイン化ができる。 いくつかの例を示す。

配色の重要性

レイアウト

HTML

CSS

JavaScript