TopCSS > 2012年8月
2012年8月20日

CSSでtable幅を設定するためのまとめ

August 20,2012 12:55 AM
Tag:[, ]
Permalink

CSSでtable幅を設定するためのまとめです。

CSSでtable幅を設定するためのまとめ

以前、tableをレイアウトしたときに表示幅がなかなか思い通りにならず苦労したことがあったので、このエントリーにまとめてみました。

うまくまとまっていなかもしれませんが参考になれば幸いです。認識誤りがありましたらどこかでつぶやいてください。

記事中で使ったサンプルの表示は、Firefox/Google Chromeで確認しています。

1.table要素に幅を設定

table要素にwidthプロパティを設定すると、th要素/td要素の幅は次のようになります。

  • th要素/td要素の内容の幅が同じ場合は均等割りつけ
  • th要素/td要素の内容の幅が異なる場合は長さに応じて割りつけ
  • th要素/td要素にwidthプロパティを設定した場合、table要素に設定したwidthプロパティの値を超えない範囲で適用

例として、次のtable要素を利用します。

HTML

<table>
  <tr>
    <th class="a">a</th>
    <th class="b">b</th>
    <th class="c">c</th>
    <th class="d">d</th>
    <th class="e">e</th>
  </tr>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
    <td>ccc</td>
    <td>ddd</td>
    <td>eee</td>
  </tr>
</table>

table要素に次のCSSを設定します。ポイントはtable要素に設定しているwidthプロパティです。

CSS

table {
  width: 300px;
}
table,th,td {
  border: 1px solid #bbb;
}

上記を実行すると、1行のth要素/td要素は均等に割り付けられます。

実行結果
実行結果

次に、td要素に異なる内容幅のコンテンツを設定してみます。CSSの設定は先程と同じです。

HTML

<table>
  <tr>
    <th class="a">a</th>
    <th class="b">b</th>
    <th class="c">c</th>
    <th class="d">d</th>
    <th class="e">e</th>
  </tr>
  <tr>
    <td>aaaa</td>
    <td>bb</td>
    <td>ccc</td>
    <td>d</td>
    <td>eeeee</td>
  </tr>
</table>

上記を実行すると、1行のth要素/td要素は長さに応じて割り付けられます。

実行結果
実行結果

日本語を設定すると、いい感じで改行されます。下の例では2行におさまるように幅が割り付けられます。

実行結果
実行結果

次に「th要素/td要素にwidthプロパティを設定した場合、table要素に設定したwidthプロパティの値を超えない範囲で適用」を検証します。最後のth要素(class属性値「e」)に「width: 100px」を追加します。

CSS

.e {
  width: 100px;
}

すると、全体の幅は300pxのまま、最後のth要素の幅が100pxになりました。

実行結果
実行結果

さらに最後のth要素の幅について、300pxを超える値(例えば400px)を設定します。

CSS

.e {
  width: 400px;
}

すると、最後のth要素の幅はさらにひろがりますが、table要素幅の300pxを超えることはありません。

実行結果
実行結果

th要素/td要素の内容に連続した半角文字があると上記の限りではありません(=300pxを超える)が、それについては4項で説明します。

2.th要素/td要素に幅を設定

th要素/td要素にwidthプロパティを設定すると、th要素/td要素の幅は次のようになります(table要素にwidthプロパティは設定しません)。

  • コンテンツ幅に関係なくth要素/td要素に指定した幅を適用
  • 同じ列のth要素/td要素に異なる幅を設定した場合、長い方の値を適用

th要素/td要素に幅を設定すると、指定した幅で表示されます。

例として、次のtable要素を利用します。td要素の各コンテンツ幅を異なるものにしています。

HTML

<table>
  <tr>
    <th>a</th>
    <th>b</th>
    <th>c</th>
    <th>d</th>
    <th>e</th>
  </tr>
  <tr>
    <td>aaaa</td>
    <td>bb</td>
    <td>ccc</td>
    <td>d</td>
    <td>eeeee</td>
  </tr>
</table>

これに下記のCSSを適用します。ポイントはth要素に設定しているwidthプロパティです。

CSS

th {
  width: 60px;
}
table,th,td {
  border: 1px solid #bbb;
}

実行すると、1行のすべてのth要素/td要素に指定した幅が適用されます。

実行結果
実行結果

次のようにtd要素にth要素と異なる値を設定すると、長い方の値が適用されます。この例では「100px」が適用されます。

CSS

th {
  width: 60px;
}
td {
  width: 100px;
}
table,th,td {
  border: 1px solid #bbb;
}

1項と同様、th要素/td要素の内容に連続した半角文字があると上記の限りではありませんが、それについては4項で説明します。

3.列の幅を固定する

列の幅を固定するには、table要素に「table-layout」プロパティを追加し、固定したい列のth要素またはtd要素にwidthプロパティを設定します。

table-layoutプロパティはtable要素の列幅について、自動レイアウト(auto)、固定レイアウト(fixed)のいずれかを決定します。

このプロパティを設定しない場合は「table-layout: auto;」が設定されたものとみなされます。1項や2項で列幅が自動割り付けされるのはこのためと思われます。

話を戻して、ここでは1項のサンプルにあった日本語表示の例を利用します。

<table>
  <tr>
    <th>a</th>
    <th>b</th>
    <th>c</th>
    <th>d</th>
    <th class="e">e</th>
  </tr>
  <tr>
    <td>あああああ</td>
    <td>いいいいいいいいいいいい</td>
    <td>ううう</td>
    <td>ええ</td>
    <td>おおおおおおおおお</td>
  </tr>
</table>

これで一番右側の列だけを狭くしたい場合は次のように、table要素に「table-layout: fixed;」を追加し、最後の列のth要素のclassセレクタにwidthプロパティを設定します。

table {
  table-layout: fixed;
  width: 300px;
}
table,th,td {
  border: 1px solid #bbb;
}
.e {
  width: 15px;
}

これで指定した列について、コンテンツにかかわらず次のように幅を固定表示できるようになります。なお、幅を指定していない列は均等割り付けになりました。

実行結果
実行結果

よって、かっちりとした表を作りたい場合は、table要素に「table-layout: fixed;」を設定し、各列の幅をきめ細かく設定すると良いでしょう。

あと気がついたことですが、Firefoxではtable要素にwidthプロパティを設定しなくてもclassセレクタのwidthプロパティが有効になりましたが、Google Chromeではtable要素にwidthプロパティの設定を行わないとclassセレクタのwidthプロパティが有効になりませんでした。

4.連続した半角文字でtable要素の幅がひろがる場合の対処

前述したとおり、連続した半角文字がth要素/td要素のコンテンツに存在すると、1項・2項の設定にかかわらず、幅がひろがります。

次の例は、td要素に60pxを指定しているにもかかわらず、td要素の幅が60pxを超えたケースです。

HTML

<table>
  <tr>
    <th>a</th>
    <th>b</th>
    <th>c</th>
    <th>d</th>
    <th>e</th>
  </tr>
  <tr>
    <td>aaaaaaaaaaaaaaaaaa</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
</table>

CSS

th {
  width: 60px;
}
table,th,td {
  border: 1px solid #bbb;
}

実行結果
実行結果

幅がひろがらない対処は、テーブル幅を固定させるために「table-layout: fixed;」をtable要素に追加します。あわせて、widthプロパティをtable要素に追加します。

CSS

table {
  width: 300px;
  table-layout: fixed;
}

この設定でテーブル幅が固定されますが、次のように文字が重なってしまいます。

実行結果
実行結果

連続した半角文字が重ならないようにするために、さらに「word-wrap: break-word;」をtable要素に追加します。

CSS

table {
  width: 300px;
  table-layout: fixed;
  word-wrap: break-word;
}

これで次のように折り返して表示されます。

実行結果
実行結果

5.表のレンダリングアルゴリズム

ということで、table幅を設定したときの振舞いについていくつか検証しました。

自動割り付けの厳密なアルゴリズムについては、CSS 2.1仕様の「17.5.2 Table width algorithms: the 'table-layout' property」に規定されているようです。

Comments [0] | Trackbacks [0]
2012年8月13日

いまさら聞けないCSS font-familyのまとめ

August 13,2012 2:34 AM
Tag:[, ]
Permalink

CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。

font-family

認識誤りがありましたらどこかでつぶやいてください。

1.font-familyとは?

通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。

「Arial」「Vernada」「ヒラギノ角ゴPro W3」「MS Pゴシック」などがフォントファミリー名です。

このフォントファミリー名を指定するためのプロパティが「font-family」です。

サンプル

body {
    font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic",sans-serif;
}

2.フォントファミリー名がずらずらと並んでいるのは?

font-familyプロパティは左に書いたものから優先的に適用され、OS(PC)で利用しているフォントの条件に合致したものを適用します。PCに別のフォントをインストールすればそれも適用対象になるようです。

OS(PC)によって表示できるフォント、あるいはブラウザによって読み込み動作が異なるので、それらに対応できるよう、複数のフォントファミリー名を記述します。

3.記述のお作法は?

フォントファミリー名に空白が含まれる場合、必ずシングル(ダブル)クォーテーションで括ります。

例えば「Times New Roman」は「'Times New Roman'」と記述します。「ヒラギノ角ゴ Pro W3」は「'ヒラギノ角ゴ Pro W3'」と記述します。

日本語フォント名はアルファベット表記も可能です。例えば「ヒラギノ角ゴ Pro W3」は「'Hiragino Kaku Gothic Pro'」と書くことができます。

4.「sans-serif」や「serif」は何?

「総称ファミリー」というもので、指定したフォントファミリーをユーザーが利用できない場合に、最低限のフォントファミリーを提供するためのものです。フォールバック的なものでしょうか。

総称ファミリーには次の5種類があります。

  • sans-serif:ゴシック系のフォント
  • serif:明朝系のフォント
  • cursive:筆記体・草書体のフォント
  • fantasy:装飾的なフォント
  • monospace:等幅フォント

総称ファミリー名は一番最後に記述します。

例えば次のように記述すれば、「Verdana」「Helvetica」「Arial」が適用されなかった(ということはないと思いますが)場合に、「sans-serif」が適用されます。

body {
    font-family: Verdana,Helvetica,Arial,sans-serif;
}

5.欧文フォントと和文フォントの表記順序は?

欧文フォントと和文フォントに、それぞれ別のフォントファミリーを適用したい場合、欧文フォントを和文フォントより先に記述します。

次のように記述すれば、半角英数文字に「Verdana」が適用されます。

body {
    font-family: Verdana,"メイリオ","ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif;
}

欧文フォントを和文フォントより後に記述すると、半角英数文字に和文フォントが適用されてしまうようです(=和文フォントが適用されなかったときにしか欧文フォントが適用されなくなります)。

6.設定でよく使われている和文フォントは?

よく使われているかどうか分かりませんが、OSのデフォルト和文フォントは次のようになっているようです。

  • Windows 7/Windows Vista:メイリオ
  • WindowsXP:MS Pゴシック
  • Mac:ヒラギノ角ゴ Pro W3

Windows 7/Windows Vistaの「メイリオ」と、Macの「ヒラギノ角ゴ Pro W3」は、きれいに表示されます。

なお、Windows 7/Windows Vistaでブラウザに表示されるフォントは、和文フォント指定なし+総称ファミリ「sans-serif」を設定すると、「メイリオ」ではなく「MS Pゴシック」になるので、OSのデフォルトフォントとブラウザのデフォルトフォントは異なるようです。

ブラウザのデフォルトフォントについては以下のページが参考になります。

フォントカタログ5・ブラウザのデフォルトフォント

7.和文フォントの表記順序は?

6項にあげた、3つの和文フォントを並べて記述するケースで考えます。

まず、Windowsできれいなフォントを表示させたい場合、「メイリオ」を「MS Pゴシック」より先に記述します。これで、Windows 7/Windows Vistaには「メイリオ」、Windows XP(メイリオがインストールされていない)に「MS Pゴシック」が適用されます。

あと、「ヒラギノ角ゴ Pro W3」と「メイリオ」のどちらを先にするかですが、

  • 「メイリオ」→「ヒラギノ角ゴ Pro W3」の順で記述すると、Microsoft Officeの入ったMacにメイリオが適用されてしまう
  • 「ヒラギノ角ゴ Pro W3」→「メイリオ」の順で記述すると、ヒラギノをインストールしたWindowsに「ヒラギノ角ゴ Pro W3」が適用されてしまう(Windows+ヒラギノはアンチエイリアスが無効になった状態で表示されてしまう)

ということで、一長一短のようです。

設定のよしあしは別として、どちらを先に設定しているかは下記のページが参考になると思います。

ウェビンブログ - font-familyはメイリオが先かヒラギノが先かという命題を本気で調べた

個人的には「メイリオ」を先にして、次の順番にしています。

「メイリオ」→「ヒラギノ角ゴ Pro W3」→「MS Pゴシック」

8.Safariはフォント名に日本語が含まれるものは無効?

以前はそのような動作だったようですが、Safari 5はどちらでも大丈夫みたいです。

9.Firefoxは日本語フォントのアルファベット表記は無効?

以前はそのような動作だったようですが、最近のFirefoxはどちらでも大丈夫みたいです。

10.当ブログのfont-family

10個のまとめにしようと思いましたが9つしかなかったので、このブログの変更前後の設定を公開してお茶を濁します。

変更前

font-family: Verdana,Arial,sans-serif;

変更前のひとつ前の記事の表示(Windows Vista)
変更前

変更後

font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","MS Pゴシック",sans-serif;

変更後のひとつ前の記事の表示(Windows Vista)
変更後

変更前の設定に和文フォントを3つ加えました。変更前はかなりいい加減でしたね。

11.参考サイト

参考サイトは以下です。ありがとうございました。

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3