AX
【HTML/CSS】エキサイトブログでテーブルタグを使いたい
以前にも書いたような気がしますが、エキサイトブログではtableタグを使えません。
HTMLで文書を書いたことがある人ならよく知っていると思うが、
tableタグはかなり便利で誰しもが使いまくったことがあるであろうと思われます。

tableタグは文字通り、テーブル(和訳:表)を表現するためのタグです。
しかし、実際はテーブル以外の表現方法と用いられることもよくあります。
その方法とはレイアウトである。

Webサイト設計にうるさい詳しい人ならテーブルを用いたレイアウトはするべきではない
と考えている方も多いと思いますが、実際 数多くのサイトでページレイアウトを整えるために利用されています。

その一つがここのブログ。Excite Blogです。
Excite Blogではこの文書(メイン記事)を羅列するのにtableタグを使ってレイアウトしています。
そのため、ExciteBlogではtableタグを禁止しているのではないかと勝手に想像。

ちなみに記事にtableタグ(とそれに関連するタグ。td,trなど)を使うと投稿時に勝手に削除されてしまいます。

HTML記述の例



<table border="1">
<tr><th>イヌ</th><th>ネコ</th></tr>
<tr><td>ブードル</td><td>アメリカン・ショートヘア</td></tr>
<tr><td>チワワ</td><td>スコティッシュ・フォールド</td></tr>
<tr><td>ダックスフンド</td><td>ロシアンブルー</td></tr>
<tr><td>ポメラニアン</td><td>ペルシャ</td></tr>
<tr><td>ヨークシャー・テリア</td><td>日本猫</td></tr>
<tr><td>パピヨン</td><td>アビシニアン</td></tr>
<tr><td>シー・ズー</td><td>メイン・クイーン</td></tr>
<tr><td>フレンチ・ブルドッグ</td><td>ラグドール</td></tr>
<tr><td>柴犬</td><td>ソマリ</td></tr>
<tr><td>シュナウザー</td><td>ベンガル</td></tr>
</table>

Excite Blogで投稿した後の状態の例



イヌネコ
ブードルアメリカン・ショートヘア
チワワスコティッシュ・フォールド
ダックスフンドロシアンブルー
ポメラニアンペルシャ
ヨークシャー・テリア日本猫
パピヨンアビシニアン
シー・ズーメイン・クイーン
フレンチ・ブルドッグラグドール
柴犬ソマリ
シュナウザーベンガル

じゃあ Excite Blogでテーブル(表)を書きたい時はどうすればいいのか。
答えはスタイルシート(CSS)を使う。
CSSはWebページのデザインを行う時に使うもので、色やフォントなどを変えたい場合は
こちらを使うことが好ましいとされています。

たぶん、私以外の エキサイトブロガー(笑)も同じような手法でテーブルを表現していて
それでいてやはり同じように記事にしている人が多いと思います(^^;

具体的なやり方を説明する前に先に注意点。
今回のスタイルシートはインターネットエクスプローラ(IE)では動かないと思います。
(私はIEを動かす環境がないので未確認)
今回のスタイルシートのポイントは display 属性の設定で、リストタグをテーブルタグとして
無理矢理スタイルシートで表現しています。
で、この方法はIEでは使えなかったと記憶しています(FireFox、OperaはOK。IE9なら大丈夫かも!?)
将来的にはIEにも使えるようになる可能性大ということで、こんな対応で。



まず、はじめに。
Excite Blogのスタイルシートは「マイブログ設定」の「基本設定 - スキン変更」から編集を行います。
スキン変更画面に「現在使用中のスキン」が表示されていて、そこに「編集」のボタンがあると思います。
そのボタンを押した先のページの下の方に「CSS編集」があるのでそこを修正する。
今回 使用するCSSは以下の通り。既存のスタイルシートの記述の一番下に追記して下さい。


div.table { display:table;border:1px solid #000;padding:0;margin:0;list-style-type:none; }
div.table ul { display:table-row;border:1px solid #000;width:100%;list-style-type:none;padding:0;margin:0; }
div.table ul li { display:table-cell;border:1px solid #000;margin:0;line-height:120%; }
div.table ul li.head { font-weight:bold;text-align:center; }


「一番下に」と書いたのは自分のスタイルシートの設定を優先的に使ってもらうため。

以上で終了。編集内容を保存する。

続いて、HTMLの書き方。
これがまた一つ面倒(==;

先ほどのテーブルを例に。

  • イヌ
  • ネコ
  • ブードル
  • アメリカン・ショートヘア
  • チワワ
  • スコティッシュ・フォールド
  • ダックスフンド
  • ロシアンブルー
  • ポメラニアン
  • ペルシャ
  • ヨークシャー・テリア
  • 日本猫
  • パピヨン
  • アビシニアン
  • シー・ズー
  • メイン・クイーン
  • フレンチ・ブルドッグ
  • ラグドール
  • 柴犬
  • ソマリ
  • シュナウザー
  • ベンガル


こういうテーブルを書きたいとする。

今回のスタイルシート使った書き方



<div class="table">
<ul><li class="head">イヌ</li><li class="head">ネコ</li></ul>
<ul><li>ブードル</li><li>アメリカン・ショートヘア</li></ul>
<ul><li>チワワ</li><li>スコティッシュ・フォールド</li></ul>
<ul><li>ダックスフンド</li><li>ロシアンブルー</li></ul>
<ul><li>ポメラニアン</li><li>ペルシャ</li></ul>
<ul><li>ヨークシャー・テリア</li><li>日本猫</li></ul>
<ul><li>パピヨン</li><li>アビシニアン</li></ul>
<ul><li>シー・ズー</li><li>メイン・クイーン</li></ul>
<ul><li>フレンチ・ブルドッグ</li><li>ラグドール</li></ul>
<ul><li>柴犬</li><li>ソマリ</li></ul>
<ul><li>シュナウザー</li><li>ベンガル</li></ul>
</div>


言葉にして説明すると、
  • tableをdivに置き換える。開始タグにはclass="table"を追記。
  • trをulに置き換える。
  • tdをliに置き換える。
  • thをliに置き換える。開始タグにはclass="head"を追記。


以上の4手順。
と言いたいところですが、実はこれだけだとまだ足りない。Excite Blogに投稿すると改行が brタグに置き換えられるのだ。
なので、上記内容から改行を除かなければならない。テキストエディタの置換機能などをうまく使って改行を取り除いてください。

というわけで。なかなか大変なわけです。(これでも簡単にしたつもりですが。)

ケータイで閲覧した場合は別のスタイルシートを使っている模様で、表示が普通のリストになってしまいます。
でも、DIVタグだけでテーブルを表現しているわけではないので、なんとなく伝わる感じにはなるのかなぁ・・・なんて。( ̄▽ ̄;)
ケータイ用のスタイルシートってどこで設定するの?(´・ω・` )
[PR]
by manodeldio | 2011-11-05 16:27 | プログラミング


<< 【iPhone】ホーム画面アイ... 【iPhone】iOS5.0.... >>