10月 112011
 

ホームページにランキングを載せたいとか数字の見出しつきで手順を載せたい項目をリスト表示でずらっと並べたいという場合に使うのがこのリストタグ。
縦に何かをずらっと並べたい時に使います。

リストとは

リストは何かをずらっと並べて表示する時に使うもののこと。
リストは大きき分けて以下の3種類あります。

  1. ul・や■等のマークが左端につくリスト
  2. olアラビア数字(1,2,3等)やローマ数字(I,II,III等)等の数字が左端につくリスト
  3. dl見出しとその説明を記述する場所が1セットになったリスト

勘の良い人なら気付いたかもしれませんが、上に3つ挙げた時に使われているのがリストです。
上のではolを使っています。左端に数字が表示されていますよね?
こんな風にリストでは、ただ文章を羅列するよりもすっきりと伝えたいことが表示できます。
効果的に使って、ページ内にメリハリをつけましょう!

マーク付きリスト[<ul><li></li></ul>]

ホームページにマーク付きリストを表示する時はulタグliタグを使用します。

以下灰色背景がサンプルソース薄緑背景が実際の見た目

<ul>
<li>セブンイレブン</li>
<li>ローソン</li>
<li>ファミリーマート</li>
</ul>
  • セブンイレブン
  • ローソン
  • ファミリーマート

3行のリストが表示されました。コンビニの名前が左側に・マーク付きで並んでいるはずです。
では、ここで使われている各タグについて説明していきます。

ulタグ
<ul>と</ul>のセットのこと。マーク付きリストを使いたい時には必ず書かなきゃいけないものと覚えておいてください。
liタグ
<li>と</li>のセットのこと。liタグは1項目をあらわしています。つまり、ulタグ内に<li>と</li>のセットが1つあれば1項目のマーク付きリスト、<li>と</li>のセットが2つあれば2項目のマーク付きリストということになります。
項目数に制限はありませんが、あまりに多すぎる見づらいので適度に分類しましょう。
実際にリストとして表示したい文字・画像などはこのliタグ内に書きます。
なお、liタグは<ul>と</ul>の間、又は以下で説明する<ol>と</ol>の間にしか書けません。

また、左のマークは「黒丸(・)」の他にも「白丸(○)」「四角(■)」等色々指定できます。
詳しくは、左メニューCSSリファレンスにあるリスト装飾をご覧ください。

数字付きリスト[<ol><li></li></ol>]

ホームページに数字付きリストを表示する時はolタグliタグを使用します。

以下灰色背景がサンプルソース薄緑背景が実際の見た目

<ol>
<li>セブンイレブン</li>
<li>ローソン</li>
<li>ファミリーマート</li>
</ol>
  1. セブンイレブン
  2. ローソン
  3. ファミリーマート

3行のリストが表示されました。コンビニの名前が左側に数字付きで並んでいるはずです。

では、ここで使われている各タグについて説明していきます。
…と言いたい所ですが、実はulタグをolタグに書き換えればマークが数字になるだけです。
ですので、タグの説明はulタグの説明中のul部分をolに読み替えて見てください。

また、左の数字は「アラビア数字」の他にも「ローマ数字(I,II,III,…)」「漢数字(一,二,三,…)」「アルファベット(A,B,C,…)」「ひらがな(あ,い,う,…)」等色々指定できます。

詳しくは、左メニューCSSリファレンスにあるリスト装飾をご覧ください。

定義リスト[<dl><dt></dt><dd></dd></dl>]

ホームページにあるものの名前とその説明といった風なセットで表示したい時はdlタグdtタグddタグを使用します。

以下灰色背景がサンプルソース薄緑背景が実際の見た目

<dl>
<dt>セブンイレブン</dt>
<dd>日本のコンビニの草分け的存在かつ最大手のコンビニエンスストアチェーン。7と11を組み合わせた看板が目印。</dd>
<dt>ローソン</dt>
<dd>日本国内店舗数第2位のコンビニエンスストアチェーン。青い看板が目印。生鮮コンビニ「STORE100」や健康志向コンビニ「ナチュラルローソン」なども展開中。</dd>
<dt>ファミリーマート</dt>
<dd>日本国内店舗数第3位のコンビニエンスストアチェーン。一般的な店舗は緑の看板が目印。一部お洒落なデザインの店舗も。</dd>
</dl>
セブンイレブン
日本のコンビニの草分け的存在かつ最大手のコンビニエンスストアチェーン。7と11を組み合わせた看板が目印。
ローソン
日本国内店舗数第2位のコンビニエンスストアチェーン。青い看板が目印。生鮮コンビニ「STORE100」や健康志向コンビニ「ナチュラルローソン」なども展開中。
ファミリーマート
日本国内店舗数第3位のコンビニエンスストアチェーン。一般的な店舗は緑の看板が目印。一部お洒落なデザインの店舗も。

3つのコンビニに関して、店舗名とその説明が表示されているかと思います。こんな感じで、用語説明とかリンク集等にも使えるタグです。写真やイラストのギャラリーで、dt部分に画像・dd部分に紹介文を書いても面白いかもしれません。
では、ここで使われている各タグについて説明していきます。

dlタグ
<dl>と</dl>のセットのこと。定義リストを使いたい時には必ず書かなきゃいけないものと覚えておいてください。
dtタグ
<dt>と</dt>のセットのこと。dtタグには説明対象になる文字・画像を書けば良いと思えば簡単かもしれません。ここで注意したいのは、dtタグとddタグは必ずセットで書きましょうということ。用語集で、「用語が書いてあるのに説明文が無い」とか「説明文があるのに用語が見当たらない」なんて変ですしね。

なお、dtタグは<dl>と</dl>の間にしか書けません。

ddタグ
<dd>と</dd>のセットのこと。ddタグには説明文・紹介文等のdt要素に対する補助的な役割のものだと思えば簡単かもしれません。同じく注意事項としては、dtタグとddタグは必ずセットで書きましょうということです。

なお、ddタグは<dl>と</dl>の間にしか書けません。(間違ってdtタグの中にddタグを書かないようにご注意を。)

10月 112011
 

ホームページに一覧表を載せたいとか写真をアルバム風にずらっと並べたいという場合に使うのがこのテーブルタグ。
オフィスのエクセルの様にの概念がある表示形式のことです。

テーブルは、限られたスペースに効果的かつ見やすく表示させるのに重宝するので、是非使いこなしていきましょう。

テーブルとは「表」のことです。
エクセル等の表計算ソフトを思い浮かべれば分かりやすいと思います。
縦横の格子(網目)状に区切られた1つ1つのマスに、文字や画像を表示させることが出来るということになります。

まず、「行」と「列」の考え方から。

行(row)とは横のまとまりのこと。
列(col)とは縦のまとまりのこと。

つまり↓の様な感じです。
テーブル概要

次に、実際のサンプルを見つつ具体的にどう書けば良いのかを説明していきます。

ホームページにテーブルを表示する時はtableタグtrタグtdタグを使用します。

以下灰色背景がサンプルソース薄緑背景が実際の見た目

<table>
<tr>
<td>1行目・1列目</td>
<td>1行目・2列目</td>
<td>1行目・3列目</td>
</tr>
<tr>
<td>2行目・1列目</td>
<td>2行目・2列目</td>
<td>2行目・3列目</td>
</tr>
</table>
1行目・1列目 1行目・2列目 1行目・3列目
2行目・1列目 2行目・2列目 2行目・3列目

ちょっと分かりにくいので、区切りの線を付けてみるとこんな感じです。

1行目・1列目 1行目・2列目 1行目・3列目
2行目・1列目 2行目・2列目 2行目・3列目

2行3列のテーブルが表示されました。
ではこれから、tableタグ、trタグ、tdタグについて個別に説明していきます。

tableタグ
<table>と</table>のセットのこと。テーブルを使いたい時には必ず書かなきゃいけないものと覚えておいてください。
trタグ
<tr>と</tr>のセットのこと。trタグは1行をあらわしています。つまり、tableタグ内に<tr>と</tr>のセットが1つあれば1行のテーブル、<tr>と</tr>のセットが2つあれば2行のテーブルということになります。
行数に制限はありませんが、あまりに多すぎる(100行以上とか)とページの表示が遅くなるので、多くなりそうな時はページをいくつかに分けるなどして調整しましょう。
なお、trタグは<table>と</table>の間にしか書けません。
tdタグ
<td>と</td>のセットのこと。tdタグは1マス(1セル)をあらわしています。つまり、trタグ内に<td>と</td>のセットが1つあれば1行の中に1マス(1列)あるテーブル、<td>と</td>のセットが2つあれば1行の中に2マス(2列)あるということになります。
実際にテーブル内に表示したい文字・画像などはこのtdタグ内に書きます。
なお、tdタグは<tr>と</tr>の間にしか書けません。

さて、このテーブルではエクセルにある「2つの行を繋げる」とか「2つの列(マス)を繋げる」ということも出来ます。
その方法は、tdタグ内にrowspan属性やcolspan属性を記述するというものです。

早速、具体例を見て見ましょう。

<table>
<tr>
<td rowspan=”2″>1~2行目・1列目</td>
<td>1行目・2列目</td>
<td>1行目・3列目</td>
<td rowspan=”2″>1~2行目・4列目</td>
</tr>
<tr>
<td colspan=”2″>2行目・2~3列目</td>
</tr>
</table>
1~2行目・1列目 1行目・2列目 1行目・3列目 1~2行目・4列目
2行目・2~3列目

2行4列で一部のマスが結合されたテーブルが表示されました。
ではこれから、rowspan属性、colspan属性について個別に説明していきます。

rowspan属性
行を結合する属性。rowspan=”2″の“と”に括られた数字(この場合は2)の数の行数を結合する。
(rowspan=”2″なら2行、rowspan=”5″なら5行を結合)
colspan属性
列を結合する属性。colspan=”2″の“と”に括られた数字(この場合は2)の数の列数を結合する。
(colspan=”2″なら2列、colspan=”5″なら5列を結合)

以上色々説明してきましたが、テーブルについては自分で色々いじってみるのが一番

上のサンプルをコピー&ペーストして、行を増やしたり列を増やしたり、結合を試してみたりしてみましょう。
いじっているうちに、なーんとなく理解できてくるはずです。

なお、上の例みたいにテーブルに線を付けたい場合は、左メニューCSSリファレンスにあるボーダー/枠線の説明と、コピペ用サンプル集にあるテーブルサンプル集をご覧ください。

10月 112011
 

ホームページが本やテレビと一番違うのが、リンクという仕組みがあることです。
文字や画像をクリックすると、新たなページを表示させることが出来る仕組みのことです。

自分のホームページ内を繋いだり、他のサイトを紹介し誘導したり出来るリンクについて説明します。

ホームページにリンクを表示する時はaタグを使用します。

以下灰色背景がサンプルソース薄緑背景が実際の見た目

<a href=”http://www.yahoo.co.jp/” title=”Yahoo!JAPAN”>Yahoo</a>

リンクつきの文字列が表示されました。上の「Yahoo」という文字をマウスでクリックすると、Yahooのサイトが表示されます。

href属性
href=”~”のこと。この“と”の間リンクしたいURLやパスを書きます。
上の例では、http://www.yahoo.co.jp/というURLのサイトへリンクするということになります。
相対パスでの自分のホームページ内のリンクももちろん可能。
パスについての説明は絶対パスと相対パスのページをご覧ください。
title属性
title=”~”のこと。この“と”の間に、リンク文字の上にマウスカーソルを合わせた時に表示させる文字を書きます。
リンク文字を略称にした時に正式名称をtitle属性に書く、英単語名のリンク文字のtitle属性に日本語訳を書く等という時に使用します。(例:「bbs」というリンク文字のtitle属性に「掲示板」と書く。)
target属性
上のサンプルでは記していませんが、リンク先ページを新たなウィンドウで開きたい時等に使用。
<a href=”http://www.yahoo.co.jp/” title=”Yahoo!JAPAN” target=”_blank”>Yahoo</a>

ただし、今はFireFoxやChrome、そしてIE7・IE8等の「タグブラウザ」というブラウザが主流の為、勝手に新たなウィンドウが開いてしまうtarget属性は使わない方がよいという流れになってきています。(新しいタブで開きたい人は、自分で「新しいタブで開く」を選択するので。)
また、XHTMLでは推奨されていないタグなので、どうしてもの時以外は使わない方が良いかと思います。

10月 112011
 

ホームページにとって文章とともに欠かせない要素画像
ここでは、ホームページに画像を載せるやり方を紹介します。

画像について

ホームページで使用する画像には大きく分けて3種類あります。

JPEG画像
拡張子がjpeg又はjpgの画像。デジカメで撮った写真やゲームのスクリーンショット(画面画像を撮ったもの)等に良く使われるタイプ。ファイルサイズも比較的小さいのも特徴。

画質を下げることでファイルサイズはさらに小さくなるが、画像が汚くなってしまい元の綺麗な画像には戻せなくなってしまう。
その為、画質調整する際には変更前のものをバックアップ(コピー)しておくのが鉄則です。

PNG画像
拡張子がpngの画像。かなり綺麗な画像の代わりに、JPEG画像と比べてファイルサイズが大きくなりがち。
透過画像といわれる指定した一色を透き通らせて表示する画像も作ることが出来る。画質を下げることでファイルサイズは小さくなり、画質の劣化も少ない。
GIF画像
拡張子がgifの画像。使われる色の数が少ない代わりに、相当ファイルサイズは小さい。色数が少ないホームページロゴやアイコン等の素材に良く使われる。
透過画像といわれる指定した一色を透き通らせて見せることも出来る。また、アニメーションGIFというものもあり、これは文字通りアニメーションの様に動く画像。複数枚のGIF画像を組み合わせて作られているので、ファイルサイズがかなり大きくなってしまう。バナー画像としてよく使われる。

大雑把に分けると

JPEG画像
⇒色が多い写真のような画像向き
GIF画像
⇒色が少ないボタンやロゴのような素材画像向き
PNG画像
⇒他2つの利点を兼ね備えているがファイルサイズが大きい

と言った感じになります。
画像に合わせて、使う画像のタイプを使い分けるの良いでしょう。

画像表示[<img/>]

ホームページに画像を表示する時はimgタグを使用します。また、表示させる画像はペイントソフト等で作ってあらかじめ用意しておく必要があります。

以下灰色背景がサンプルソース薄緑背景が実際の見た目

<img src=”/img/tag/gazo1.png” alt=”画像の代替テキスト” title=”画像のタイトル”/>
画像の代替テキスト

青い背景に黒く縁取りされた白抜き文字で「画像サンプル」と書かれた画像(gazo1.png)が表示されました。
ここから、imgタグの中に色々書かれている部分を1つずつ説明していきます。

src属性
src=”~”のこと。この“と”の間表示させたい画像へのパスを書きます。
上の例では、imgフォルダ内にあるgazo1.png画像を表示させるという意味になります。パスについての説明は絶対パスと相対パスのページをご覧ください。
alt属性
alt=”~”のこと。この“と”の間に、何かしらの理由で画像が表示されなかった場合に画像の代わりに表示させる文字を書きます。
ブラウザは画像表示しないという設定が出来ますし、目の不自由な方向けのホームページ読み上げソフトではこのalt属性に書かれた文字を読むので、書いておくと親切です。
title属性
title=”~”のこと。この“と”の間に、画像の上にマウスカーソルを合わせた時に表示させる文字を書きます。
画像の補助説明的な言葉を書いたりすると良いでしょう。(例:花の写真のtitle属性に花の名前を書く。)

他にも色々指定できる項目はあるんですが、上の3つを押さえておけば普通はOK。画像表示に関してはばっちりです。

10月 112011
 

ホームページに文章を載せる時に絶対必要になるのが改行です。
読みやすい文章にする為には、改行を効果的に使いましょう。

また、改行と似た感じで使える水平線もあわせて紹介します。

改行[<br/>]

行の途中で文章を切り、次の文字を行頭にもっていきたい時に使います。

使用するタグは<br/>
前章で説明した「空要素タグ」という単独で使うタグです。

以下灰色背景がサンプルソース薄緑背景が実際の見た目

良いホームページにする為には、<br/>やはり見た目も大事ですよね!
良いホームページにする為には、
やはり見た目も大事ですよね!

このように、自分が思ったとおりのところで改行してくれるのが改行タグ(<br/>)です。

2つ連続で改行タグを書けば改行後もう1行改行するので、空白の何も書いてない行が1行出来ます。
但し、たくさんの空白を確保したいからといって改行タグをたくさん連続で書くのはあまり綺麗ではありません。
右メニューCSSリファレンスにあるmargin(余白)を使うと、思ったとおりの高さ・幅の空白スペースを確保できるのでそちらをご利用下さい。

水平線[<hr/>]

文章を視覚的に切りたい時、境界線を引きたい時等に使用することが多いのが水平線です。

使用するタグは<hr/>
これも前章で説明した「空要素タグ」という単独で使うタグです。

以下灰色背景がサンプルソース薄緑背景が実際の見た目

詳細については次の章で説明します。<hr/>第2章
詳細については次の章で説明します。


第2章

このように、横棒の区切りを入れたいときに使うのが水平線タグ(<hr/>)です。

上のサンプルでは黒い点線ですが、右メニューCSSリファレンスにあるボーダー/枠線を使えば、色をつけたりや直線・点線といった線の種類を指定した水平線を表示させることも出来ます。