テキストレイアウトの最近のブログ記事

新着情報やニュースリリースなどのコンテンツは、tableタグやdlタグを利用するのが、一般的です。

定義リストを横並びにする - CSSデザインノート

ただし、以下のようなレイアウトにしようとすると、tableタグやdlタグではうまく実装できません。

問題は、日付とテキストに同一のアンカーをつけなければならないということです。

tableタグのtd要素やdlタグのdd要素はブロック要素であり、アンカーはインライン要素です。インライン要素であるアンカーの中に、ブロック要素であるtd要素やdd要素を入れることはできません。

そのため、文字の部分のみにアンカーをつけようとすると、tableタグやdlタグを使用するのはふさわしくないということになります。

もうひとつの問題は、テキスト部分が長くなったら、日付の下にテキストが回りこまずに、テキスト部分の頭をそろえないといけないということです。

ひとつの例ですが、以下のような方法があります。

(X)HTMLコード

<div id="information">
   <h2>新着情報</h2>
   <ul">
      <li><a href="index.html"><span>2011/01/20</span>新着情報です。</a></li>
      <li><a href="index.html"><span>2011/01/10</span>新着情報です。新着情報です。新着情報です。新着情報です。新着情報です。</a></li>
      <li><a href="index.html"><span>2011/01/03</span>新着情報です。</a></li>
      <li><a href="index.html"><span>2011/01/01</span>新着情報です。新着情報です。新着情報です。新着情報です。新着情報です。</a></li>
   </ul>
</div>

CSSコード

#information h2 {
   padding:3px;
   background:#ddd;
}

#information ul {
   margin:0;
   padding:0;
   list-style:none;
}

#information li {
   padding:15px 0 15px 7em;
   text-indent: -7em;
   border-bottom:1px solid #ddd;
}

#information li span {
   display:inline-block;
   width:7em;
   text-indent:0;
}

#information li a {
   text-decoration:none;
   color:#000;
}

#information li a:hover {
   text-decoration:underline;
   color:#AB0404;

}

ポイントとしては、text-indentを駆使することと、spanにwidthを適用するためにdisplayをinline-blockにすることです。

spanは、インライン要素なのですが、インライン要素はwidthやpadding、marginといったものを指定しても有効になりません。そこで、CSSにてdisplayプロパティの値を、文法的にはインラインでありながらも、ブロック要素的な振る舞いもできるinline-blockに変更します。

hrタグは、デフォルトで使用するとデザイン的に味気ないですよね。画像を使用するのが一番見栄えのよいものになりますが、少しだけスタイリッシュにしたい場合などCSSを使用すると便利です。ここでは、1pxの線を引く方法を紹介します。

単純に、borderを使って、上線だけ1pxの線を表示すればよいのですが、IE6ではうまくいかないので、「height:1px」と「clear:both」を追加します。

CSSコード

hr {
   border:solid #000;
   border-width:1px 0 0 0;
   height:1px;/* for IE6 */
   clear:both;/* for IE6 */
} 

前回の記事で改行の方法を指定する「word-wrapプロパティ」について述べました。

改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 - CSSデザインノート

もうひとつ、改行の方法を指定するプロパティに「word-breakプロパティ」というのがあります。

word-breakプロパティとは？

word-breakプロパティとは何かと申しますと、簡単に言えば、文章の改行方法を指定するものです。例えば、表示範囲に合わせて改行するか、あるいは単語の切れ目で改行するかなどです。

値には、narmal、keep-all、break-allの３種類があり、意味は以下のとおりです。

normal

日本語は表示範囲で単語の途中でも改行されるが、英語は単語の切れ目で改行される。

keep-all

全ての言語で単語の途中で改行せず、単語の切れ目で改行される。

break-all

全ての言語で単語の途中でも改行される。

ただ、各ブラウザで動作が若干異なります。例えば、keep-allは、IE6や7では、そのとおりの動作をするのですが、他のブラウザでは日本語は表示範囲に合わせて単語の途中でも改行されます。

word-breakプロパティの実装状況

サンプル

各ブラウザで確認してみてください。

表にしてみました。

基本的に、値がnarmalの場合はどのブラウザでも同じ動作をします。

しかし、値がkeep-allの場合、Safari、Chomeは、日本語は表示範囲に合わせて単語の途中でも改行され、英語は単語の切れ目で改行されます。一方、IE6と7は、日本語も英語も単語の切れ目で改行されます。

また、値がkeep-allの場合、Safari、Chomeは禁則処理が無効になるのに対し、IE6と7では禁則処理は有効のままです。禁則処理に関しては、以下の記事で説明しています。

改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 - CSSデザインノート

また、IE6、7で使えたword-breakプロパティがIE8で使えなくなっているのは、改行の方法をword-wrapプロパティのみにしたということでしょうか？

word-breakプロパティとword-wrapプロパティの「break-all」の違い

word-breakプロパティにもword-wrapプロパティにも「break-all」という強制的に改行する値を指定できるのですが、この違いは何なのでしょうか。

IEやSafari、Google Chomeはどちらのプロパティの「break-all」も使えるのですが、その差を見てみると、日本語に違いはありませんが、英語のショートセンテンスにおいて、 word-breakプロパティは単語の途中でも強制的に改行してしまいますが、word-wrapプロパティは単語の後の半角スペースで改行してくれるようです。

word-wrapプロパティは最新のブラウザならほどんど使える事、また、英単語の途中で強制的に改行しないことを考えると、word-wrapプロパティを使うのが望ましいと言う事ですね。

それにしても、似たようなプロパティがあるというのもとても変ですね。

最近はword-breakするのにJSは使わないほうがいいみたい - Webtech Walker

という記事を見て、おお！全てのブラウザでword-wrap:break-word;が有効なのか！と嬉々としました。特に、お問い合わせフォームなどで、英数字が強制改行されないとレイアウトが崩れる原因になって、よくプログラム側で制御していたので、これは嬉しい。

word-wrapプロパティとは？

まず、word-wrapプロパティとは何かと申しますと、簡単に言えば、文章の改行方法を指定するものです。単語の途中で改行するかどうかを指定します。

word-wrapプロパティは確かIEが独自先行で実装してたと思ったのですが、CSS3で草案されていて、主要の最新のブラウザで実装されているようですね。

値には、narmal、break-allの２種類があり、意味は以下のとおりです。

normal

英単語の途中で改行しない。表示範囲をはみ出す場合は表示範囲を拡張する。日本語は表示範囲に合わせて強制的に単語の途中でも改行する。

break-all

日本語も英語も表示範囲からはみ出す場合は強制的に単語の途中でも改行する。

サンプル

ハイフンとかスラッシュがある場合は、場所によってはそこで強制的に改行するみたいです。

禁則処理

文字のレイアウトで重要なのは、禁則処理です。禁則処理とは、例えば日本語で言えば、句読点が行頭にこないなど、作文を書くときによく注意された、文章を書く上での決まりごとですね。

ブラウザによってもこの禁則処理に若干の違いがあります。Safari、Chome、Operaでは、一般的な禁則処理は行われます。

しかし、firefoxでは、｢段々｣などの｢々｣が行頭にきてしまうことがあります。また、IEでは小さい｢っ｣が行頭にきてしまうことがあります。

あと、似たようなのに、word-breakプロパティというのもあります。これも同様に改行方法を指定するものなのですが、ブラウザで実装状況が異なるようです。詳しくは別の機会に。

例えば、以下のようなデザインにしたいとき、liにborder-bottomを指定して、最後のliだけborder-bottomをなしにしなければなりません。

特定のclassを使用したくない場合、first-childあるいはlast-childセレクタを使用すると簡単に実現できるのですが、IE6ではそれらが実装されていないため使用することが出来ません。

｢over-flow:hidden」とネガティブマージン「margin-bottom:-1px」、それとIE6のバグを回避するための「zoom:1」を駆使することでIE6でも無駄にclassを振らずに最後のliのborderを消すことが出来ます。

(X)HTMLコード

<div class="memo">
<h2>メモ</h2>
<ul>
<li>abcdefghijklmn</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>abcdefghijklmn</li>
</ul>
</div>

CSSコード

div.memo {
   border:1px solid #ddd;
}

div.memo h2 {
   margin:10px;
   font-size:160%;
}

div.memo ul {
   overflow:hidden;
   margin:10px 10px 0 10px;
   padding:0;
   list-style-position:inside;
   zoom:1;
}
 
div.memo ul li {
   margin:0;
   padding:10px 0;
   margin-bottom:-1px;
   border-bottom:1px solid #ddd;
}

liにborder-bottomで下線を表示し、margin-bottom:-1px;で下のマージンを1px小さくすると、borderが領域からはみ出ます。ulの領域からはみ出した部分を overflow:hidden;で見えなくしています。こうすることで、最後のliのborder-botomだけ見えなくなります。

同じような考えで、border-topにも適用できます。

IE6では原因はわからないのですが、英数字のみなどのテキストを入れると罫線がおかしくなったりするみたいです。

blogなどをしていると、他サイトの文章を引用したいときがあります。その際、自分が書いた文章なのか引用した文章なのかを、見た目的にわかりやすくする必要があります。

また、引用元のサイト名やURLも明記しておくべきでしょう。

引用元をcontentプロパティで表示

cite 属性やtitle属性の値をcontentプロパティで呼び出せるので、それをblockquoteの前後に表示させる技です。

サンプル

(X)HTMLコード

<blockquote cite="URI" title="引用先サイトのタイトル">
<p>
引用文引用文引用文引用文引用文引用文引用文引用文引用文
</p>
</blockquote>

CSSコード

@charset "utf-8";

blockquote {
   margin:0;
   background:url(qs.gif) 0 2em no-repeat;
}

blockquote p {
   padding: 10px 40px;
   background:url(qe.gif) 100% 100% no-repeat;
}

blockquote[title]:before {
   display: block;
   border-bottom: 1px solid #999;
   content: "｢"attr(title)"｣より引用";
}

blockquote[cite]:after {
   display: block;
   border-top: 1px solid #999;
   text-align: right;
   content: attr(cite);}

ここでの注意点は、｢:before｣｢:after｣擬似要素はIE7以前のブラウザは有効ではないということです。IE8からは使えるとのことです。Firefoxなどのモダンブラウザには有効です。また、Firefoxでは:before擬似要素や:after擬似要素のテキストを選択してコピーできません。Operaではできるようです。

あとは、CSSファイルの中で日本語を使用しているのできちんとエンコード指定をしておかないと文字化けします。

引用元を別に用意する

上記方法ではブラウザによって動作が異なったり、引用元のテキストにリンクをはることができません。そこで少し手間がかかりますが、引用元はテキストにアンカーをはって表示しようと思います。

サンプル

(X)HTMLコード

<blockquote cite="URI" title="引用先サイトのタイトル">
<p>
引用文引用文引用文引用文引用文引用文引用文引用文引用文
</p>
</blockquote>
<p class="resource"><a href="URI">引用先サイトのタイトル</a>より引用</p>

CSSコード

@charset "utf-8";

blockquote{
margin:0;
background:url(qs.gif) 0 0 no-repeat;
border:1px solid #ddd;
}

blockquote p {
padding: 10px 40px;
background:url(qe.gif) 100% 100% no-repeat;
}

p.resource {
margin:0;
padding:3px;
text-align: right;
background:#ddd;
}

画像はご自由にお使いください

サンプルで使用したダブルクォーテーションマークの画像はご自由にお使いください。商用サイトでもお使いいただけます。提供元の表示などは不要です。

Windowsであれば右クリックをして｢名前をつけて画像を保存｣でダウンロードしてください。

引用テキストをワンクリックで作る方法

引用のためのHTMLタグをいちいち組んでいたらblogの書くスピードも落ちてしまいますよね。そこで、簡単にHTMLタグが成型できるツールを紹介します。

Make Link :: Firefox Add-ons

これはFirefoxのアドオンで、引用したい文章をドラッグして右クリックで型を選ぶと成型したかたちでコピーできるという優れものです。ここでは詳しく説明しませんが、以下のサイトが参考になると思います。

新、ブロガー御用達貼り付けツール Make Link - えむもじら

ちなみに上記2番目で説明した引用方法の成型文は以下のように設定します。

<blockquote cite="%url%"title="%title%">
<p>%text%</p>
</blockquote>
<p class="resource"><a href="%url%">%title%</a>より引用</p>

その他にも同様のツールはたくさんあるので試してみてください。

文字サイズは親要素から継承されるため、CSSの設定には注意が必要です。

また、ユーザビリティの観点から、文字サイズはユーザが自由に変更できるように｢%｣あるいは｢em｣など可変できるように設定するのが望ましいです。

まず、基準となる文字サイズをpx単位で決めます。それに対して、個別に%やemで文字サイズを設定していきます。

ここで注意しなければならないのは、｢%｣で指定すると、ブラウザによって文字の大きさが若干違って見えてしまうということです。製作者としてはどのブラウザでも同じ大きさに見えて欲しい、少なくとも文字の大きさの相関性が保たれてほしいですよね。15emで指定した文字と16emで指定した文字が同じサイズに見えてしまうのは困りますよね。

また、%指定した文字あるいはem指定した文字をpx単位に換算した場合、どのような大きさになるかは知りたいですよね。

%指定のCSSライブラリ Fonts CSS

ブラウザによる文字サイズの見え方の差異を調整するCSSライブラリを紹介します。

Yahoo! UI Library: Fonts CSS

CSSライブラリは以下のページにあります。

http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css

CSSコード

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/

body{
   font:13px/1.231 arial,helvetica,clean,sans-serif;
   *font-size:small;*font:x-small;
}

select,
input,
button,
textarea,
button {
   font:99% arial,helvetica,clean,sans-serif;
}

table{
   font-size:inherit;
   font:100%;
}

pre,
code,
kbd,
samp,
tt {
   font-family:monospace;
   *font-size:108%;
   line-height:100%;
}

基本となる文字サイズを｢13px｣とし、特定の%で指定するとブラウザによらず同じ大きさに表示されるようです。

以下の表は、%指定した際のpx換算したものです。

em指定が一目でわかるチャート EmChart

こちらは、自分で基本となる文字サイズをpxで決めたときに、例えば14pxの文字を表示したいとき何%に指定すればよいのか、一目でわかるオンラインチャートです。

EmChart

縦軸が｢基準となる文字サイズ（px）｣で、横軸が｢表示したい文字サイズ（px）｣、交差しているところが｢指定する文字サイズ（em）｣になります。

テキストが含まれる要素、例えばp要素やli要素、td要素には｢line-height｣を指定しておくことで、IE6でたまに起こる｢文字の上部が切れて表示されてしまう｣ことや｢フォントを一部変更したことで文字が重なってしまう｣といったことを解決できます。

その際、line-heightの値の単位は何も指定しないほうが、ブラウザが自動に補正をかけてくれます。

CSSコード

p {
   line-height:1.4;
}

文章を読みやすくする1つの方法に｢行間を空ける｣があります。だいたい、行間を文字の0.4個分から0.8個くらい空けると見やすいです。1文字以上空けてしまうと逆に段落がわかりにくくなってしまうので注意です。

行間の指定には｢line-height｣プロパティを使います。

例えば、1文字分というのは｢1em｣（大文字のMの高さを基準）で表したり、pxでフォントサイズを指定している場合は｢12px｣などとフォントサイズと同じ数値を指定すればよいのですが、段落の中でフォントサイズを変更している場合は、文字が重なって表示されてしまう可能性があります。

よって、単位はあえて指定しないほうが無難です。そうすれば、フォントサイズの異なるテキストが段落内で混在していてもテキストが重なることなく、最も大きなフォントサイズを基準に、指定した行間の高さで表示されます。

CSSコード

p {line-height:1.8;}

最近は、ユーザビリティの観点から、文字サイズを固定せずに「%」表記や「em」表記をするのが望ましいと考えられています。

その際、ユーザがブラウザによって文字サイズを変更してする場合に、文字が重なってしまうことがあります。これは、CSSの設定で、文字の行間（line-height）に単位をつけて指定しているためです。

例えば、以下のように、行間の大きさよりも文字サイズが大きい場合、文字は重なって表示されてしまいます。

CSSコード

p {
   line-height:1.0em;
}

p span{
   font-size:2.0em;
}

(X)HTMLコード

<p>
   あいうえおかきくけこさしすせそたちつてと<br />
   なにぬねの<span>はひふへほ</span>まみむめも
</p>

このような場合には、行間の指定に単位をつけないようにします。

CSSコード

p {
   line-height:1.0;
}

p span{
   font-size:2.0em;
}