BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

brタグからの脱却

<br>タグ(*1)は、テキストを強制的に改行します。しかしマーク付けの点では意味を持たない要素であり、例えば音声ブラウザにとっては意味を為さないでしょう。

改行の位置についてはブラウザ側に委ね、段落の変わり目でp要素を用いることが望ましいとされています。

良い例

<p>
私がハンドルネームを「セロリ」としたのは、イメージカラーを緑色にしたいと思ったからです。目に優しい緑色のように、私自身優しくなれればという思いをこめています。野菜の名前として広く認知されており、読み間違えられる恐れが少ないことも考慮しています。
</p>

<p>
理由は他にもあり、機動戦士ガンダムZZに登場するお笑い系(?)キャラクター「マシュマー=セロ」にも関連づけています。が、ガンダムに興味のない人にも親しみをこめていただけるように考えた結果、「セロリ」という名前に決まりました。
</p>

良くない例

<p>
私がハンドルネームを「セロリ」としたのは、イメージカラーを緑色に<br />
したいと思ったからです。目に優しい緑色のように、私自身優しく<br />
なれればという思いをこめています。野菜の名前として広く認知<br />
されており、読み間違えられる恐れが少ないことも考慮しています。
</p>

<p>
理由は他にもあり、機動戦士ガンダムZZに登場するお笑い系(?)<br />
キャラクター「マシュマー=セロ」にも関連づけています。が、<br />
ガンダムに興味のない人にも親しみをこめていただけるように考えた<br />
結果、「セロリ」という名前に決まりました。
</p>

あなたの利用環境では「良くない例」は見やすいですか?環境によっては「適度な位置で改行されていて見やすい」可能性があります。では、視力の弱い人がブラウザ側でフォントのサイズを大きくした場合はどうでしょう。次に、フォントのサイズを拡大した例を挙げてみます。

「良い例」を拡大表示

私がハンドルネームを「セロリ」としたのは、イメージカラーを緑色にしたいと思ったからです。目に優しい緑色のように、私自身優しくなれればという思いをこめています。野菜の名前として広く認知されており、読み間違えられる恐れが少ないことも考慮しています。

理由は他にもあり、機動戦士ガンダムZZに登場するお笑い系(?)キャラクター「マシュマー=セロ」にも関連づけています。が、ガンダムに興味のない人にも親しみをこめていただけるように考えた結果、「セロリ」という名前に決まりました。

「良くない例」を拡大表示

私がハンドルネームを「セロリ」としたのは、イメージカラーを緑色に
したいと思ったからです。目に優しい緑色のように、私自身優しく
なれればという思いをこめています。野菜の名前として広く認知
されており、読み間違えられる恐れが少ないことも考慮しています。

理由は他にもあり、機動戦士ガンダムZZに登場するお笑い系(?)
キャラクター「マシュマー=セロ」にも関連づけています。が、
ガンダムに興味のない人にも親しみをこめていただけるように考えた
結果、「セロリ」という名前に決まりました。

多くの環境において、テキストが不適当な位置で改行されてしまい見づらくなったのではないでしょうか。改行を指定すると、利用環境によっては文章が読みづらくなってしまう恐れがあります。

余白を取るための改行も好ましくありません。余白はスタイルシートで細かく指定することができます。

並列関係にある要素間の余白
良い例

<p>段落1</p>
<p>段落2</p>
<address>連絡先</address>

address{margin-top:2em;}

良くない例

<p>段落1</p>
<p>段落2</p>
<br />
<address>連絡先</address>

親子関係にある要素間の余白
良い例

<address>
連絡先
</address>

address{padding:1em 0;}(*2)

良くない例

<address>
<br />
連絡先
<br />
</address>

要素内の行間を指定
良い例

<p>
1行目
2行目
3行目
</p>

p{line-height:2;}

良くない例

<p>
1行目<br />
<br />
2行目<br />
<br />
3行目
</p>

では、どのような場合にbr要素を用いるのでしょうか。

インライン要素しか含むことのできないp要素及びaddress要素内において、改行の必要がある場合に用います。例えば自作のポエム(詩)を公開したり、HTMLやJavaScriptのソースコードを公開する場合等、1つの段落内において改行を必要とするときに使用します。企業や官公庁のサイトにおいては、連絡先として住所や電話番号、FAX番号等複数の項目を記述する必要があり、これらを視覚的に区別する目的で用います。

<address>
住所:○○県△△市□□町…<br />
TEL:○○○-△△△-□□□□<br />
FAX:○○○-△△△-◇◇◇◇
</address>

1行あたりの文字数があまりに多くなる場合には、適度に改行した方が見やすくなります。フォントのサイズを大きくしても不適当な箇所で改行されないように、余裕を持って改行しておくと良いでしょう。

(*1)
XHTMLでは中身を持たない空要素も閉じる必要があり、<br>ではなく<br />と記述します。「br」と「/」(スラッシュ)の間に半角スペースを入れることにより、古いブラウザでも問題なく改行されます。当ブログでは、XHTMLに準拠した記述を行います。
(*2)
padding,margin及びborderのように上下左右の値を指定可能なプロパティの場合、半角スペースを挟むことで個別に値を指定することができます。この場合address要素内側の上下に1文字分の余白を取り、左右の余白はゼロとなります。
スポンサーサイト

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。