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

ウェビメモさんのブログ記事を読んでたら知ったんですけど、「指定した長さからはみ出した文字列を省略表示するCSS」っていうのがあったのですね・・・。こういうのってPHPとか使わないとできないと思ってました・・・。

「text-overflow」というプロパティでテキストを省略表示するかどうかを指定します。

(X)HTMLコード

<ul>
   <li>ああああああああああああああああああああああああああああ</li>
   <li>いいいいいいいいいいいいいいいいいいいいいいいいいいいい</li>
   <li>うううううううううううううううううううううううううううう</li>
   <li>ええええええええええええええええええええええええええええ</li>
   <li>おおおおおおおおおおおおおおおおおおおおおおおおおおおお</li>
</ul>

CSSコード

 li{
   width:300px;
   overflow:hidden;
   text-overflow:ellipsis;
   -webkit-text-overflow:ellipsis;
   -o-text-overflow: ellipsis;
   white-space:nowrap;
}

どうやら、ブラウザによってはプレフィックス(接頭辞)を付けないと適用されないようで、あと、「white-space:nowrap;」も併せて記述しないと適用されないようです。

テキスト中に小さい画像をきれいに縦方向を揃えて表示したい場合は、vertical-alignを使用します。

(X)HTMLコード

<p>
あいうえお<img src="image.gif" alt="" class="middle" />かきくけこ
</p>

CSSコード

.middle {
   vertical-align:middle;
}

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

ただし、以下のようなレイアウトにしようとすると、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-breakプロパティ」というのがあります。

word-breakプロパティとは?

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

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

normal
日本語は表示範囲で単語の途中でも改行されるが、英語は単語の切れ目で改行される。
keep-all
全ての言語で単語の途中で改行せず、単語の切れ目で改行される。
break-all
全ての言語で単語の途中でも改行される。

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

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

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

表にしてみました。

ブラウザ/値narmalkeep-allbreak-all
Firefox 3.6.3××
Safari 4.0.5
Google Chome 4.1
Opera 10.51××
IE6
IE7
IE8××

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

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

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

また、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-wrap:break-word;が有効なのか!と嬉々としました。特に、お問い合わせフォームなどで、英数字が強制改行されないとレイアウトが崩れる原因になって、よくプログラム側で制御していたので、これは嬉しい。

word-wrapプロパティとは?

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

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

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

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

サンプル

朝起きると体がだるく感じた。とりあえず起きてみたものの、段々気分が悪くなってきた。熱を測ってみると39度7分もあった。「Oh, my God!」と僕はふざけて天を仰いだ。今日はどうしても外せない用事があるのだ。 abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789@com.abcdefghijklmnopqrstuvwxyz0123456789@com. abcdefghijklmnopqrstuvw-xyz0123-456789@com.abcdefghijklmnop/qrst/uvwxyz0123456789@com.abcdefghijklm_nopqrstuvwxyz0123456789@com.

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

禁則処理

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

ブラウザによってもこの禁則処理に若干の違いがあります。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では原因はわからないのですが、英数字のみなどのテキストを入れると罫線がおかしくなったりするみたいです。

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タグが成型できるツールを紹介します。

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

ちなみに上記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ライブラリを紹介します。

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換算したものです。

表示したい文字サイズ(px) CSSで指定する値(%)
10 77
11 85
12 93
13 100
14 108
15 116
16 123.1
17 131
18 138.5
19 146.5
20 153.9
21 161.6
22 167
23 174
24 182
25 189
26 197

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

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

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

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

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

CSSコード

p {
   line-height:1.4;
}