Run, BLOG, Run

http://d.hatena.ne.jp/bluescat/

タグで遊ぼう - テーブル編 2

2004年05月19日 16時09分33秒 | 薀蓄(タグ)
 goo BLOG で使用できる要素 (以下、「タグ」 とする) が増えたので、じぶん用の覚書、および実験/検証用として、「タグで遊ぼう - テーブル編」 を書きました。

 第二弾ということで、今回は、「テーブル編 2」 で、表を使ったレイアウトについて。


■セルを並べる 1

Bob Dylan Rolling Stones Kinks



<table border="1">
    <tr>
        <td>Bob Dylan</td>
        <td>Rolling Stones</td>
        <td>Kinks</td>
    </tr>
</table>




■セルを並べる 2

love: cat
like: bird
hate: roach



<table border="0" cellspacing="1" cellpadding="5">
    <tr>
        <td bgcolor="#808080" align="right" style="color: #ffffff">love:</td>
        <td>cat</td>
    </tr>
    <tr>
        <td bgcolor="#808080" align="right" style="color: #ffffff">like:</td>
        <td>bird</td>
    </tr>
    <tr>
        <td bgcolor="#808080" align="right" style="color: #ffffff">hate:</td>
        <td>roach</td>
    </tr>
</table>




■テーブルを並べる

cat
某所で見かけた子

 まったく関係ないが、わたしは、冷やし中華は好きだが、「冷たいラーメン」 は なんとなくいやだ。 「ラーメン」 は、あったかいほうがいい。 ところで、ビール飲みたい。





<table border="1" cellspacing="0" bordercolor="#000080" align="left">
    <tr>
        <td><img src="http://userimage.gaiax.com/goo/byrdie/Pht05151736.jpg" alt="cat" title="かわいい?"></td>
    </tr>
    <tr>
        <td bgcolor="#000080"><font size="-1" color="#ffffff">某所で見かけた子</font></td>
    </tr>
</table>
<table border="0">
    <tr>
        <td> まったく関係ないが、わたしは、冷やし中華は好きだが、「冷たいラーメン」 は なんとなくいやだ。 「ラーメン」 は、あったかいほうがいい。 ところで、ビール飲みたい。</td>
    </tr>
</table>
<br style="clear: both;">





 うまくいくかな ... 。

 * ちなみにいろいろ実験してみてわかったこと ... あたりまえのことだけれど、タグの閉じ忘れに要注意 !
  実際、とんでもなくレイアウトがくずれてしまいました ... 。


[追記]: <br> 要素のナゾ
 自動改行されるはずなのに、なぜ <br> タグがあるのかな ... と思っていましたが。

 テーブルの側面への回り込みを設定した際 (align 属性を指定すると、改行が自動的に挿入されず、テーブルや画像、テキストが回りこんで表示される)、回り込みを解除したいときに利用するもよう。 (検証中)

 【例1】
ID: byrdie
height: 1.6 m
weight: 0.045 t


きょうは、これから踊りに行きます。



<table border="1" bordercolor="#808080" cellspacing="2" align="left">
    <tr>
        <td bgcolor="#000000" align="right"><font color="#ffffff">ID:</td>
        <td>byrdie</td>
    </tr>
    <tr>
        <td bgcolor="#000000" align="right"><font color="#ffffff">height:</td>
        <td>1.6 m</td>
    </tr>
    <tr>
        <td bgcolor="#000000" align="right"><font color="#ffffff">weight:</td>
        <td>0.045 t</td>
    </tr>
</table>

きょうは、これから踊りに行きます。
<br>




 【例2】
ID: byrdie
height: 1.6 m
weight: 0.045 t



きょうは、これから踊りに行きます。



<table border="1" bordercolor="#808080" cellspacing="2" align="left">
    <tr>
        <td bgcolor="#000000" align="right"><font color="#ffffff">ID:</td>
        <td>byrdie</td>
    </tr>
    <tr>
        <td bgcolor="#000000" align="right"><font color="#ffffff">height:</td>
        <td>1.6 m</td>
    </tr>
    <tr>
        <td bgcolor="#000000" align="right"><font color="#ffffff">weight:</td>
        <td>0.045 t</td>
    </tr>
</table>
<br style="clear: both;">
きょうは、これから踊りに行きます。



 参照:
 『とほほのWWW入門』 - 「スタイルシート」 - 「clear 設定値」


[追記2]: コメントは挿入できるのか? (2004.5.20)

 「<>」 ← 中身が表示されていなければ OK!


「<!-- (ここにオモテには表示できないようなことを書こう)-->」 ← 中身が表示されていなければ OK!



コメント (3)
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

タグで遊ぼう - テーブル編

2004年05月19日 12時39分01秒 | 薀蓄(タグ)
 goo BLOG.

 ユーザー登録はしてみたものの、使える要素 (以下、「タグ」 とする) のあまりの少なさ、カスタマイズのあまりのできなさに、正直がっかりしてしまったのも事実 ... 。 しかし、住めば都、とでもいうのか、郷に入れば郷にしたがえ、とでもいうのか、できる範囲で見映えを良くしようと (これでも) 苦心し、そのうち、こんなもんさ ... と思っておりました。

 その矢先に、使用できるタグが一気に追加されたとの、うれしい知らせが。 (スタッフの方々、ありがとうございます)

 あまりにもたくさん追加されたので、じぶん用の覚書、および実験/検証用として、すこし書いてみることに。

 では。 グタグタ言ってないで、タグりましょう。 とりあえず、「テーブル (表組み)」 から ...



 昨夜投稿した記事には、背景画像を挿入してみたのですが。


<table border="0" background="http://userimage.gaiax.com/goo/byrdie/wallpaper.jpg" style="color: #223d08"><tr><td>


・・・本文・・・


</td></tr></table>


 ... という感じに。
 (「<」 「>」 は、実際は半角)rd-xs40user さんのページを拝見し、&lt;,&gt; 記述に変更しました。 2004.5.20)



 「テーブル」 (<table></table>)、 「行」 (<tr></tr>)、 「列」 (<td></td>) それぞれのタグは、


<table border="0" background="http://userimage.gaiax.com/goo/byrdie/wallpaper.jpg" style="color: #223d08">
    <tr>
        <td>


        ・・・本文・・・


        </td>
    </tr>
</table>


 のように改行を入れて、インデントをつけたほうが、ソースとして見やすいのですが、goo BLOG の場合、物理的な改行が表示上の改行となってしまう (自動改行?) なので、改行を入れずに書いてみました。


 [追記]:
 「html タグの利用について」 にきちんと注意書きがありました。


 ※「注意」※記事編集画面内では、「table」「pre」「ruby」「url」に囲まれた部分は、自動改行されませんが「td」「th」タグ内は自動改行されます。


 <table></table>,<tr></tr> 内でいくら改行、インデントをしても表示に影響はないもよう。
 ( ---> 実験用エントリ1 - 実験9実験用エントリ1 - 実験10参照)



■ border 属性

 <table> タグで指定している border 属性は、いちおう 「0」 に。 無指定の場合、デフォルト 「0」 が設定されるようですが、ブラウザの種類によっては 「1」 が設定されてしまう場合もあるかもしれません。 その場合、枠線が表示されてしまうので。
 ( ---> 実験用エントリ1 - 実験1 参照)


■ background 属性 / bgcolor 属性

 background 属性には、背景にしたい画像の URL を入力。
 goo BLOG に標準でついている画像アップロードへ送信したものはなく、自サーバーの URL をフルパスで。
 ちなみに、私は、goo のメンバー登録で開設できる web サービスに標準でついている 「画像アップローダー」 というものを利用し、そこへ送信したものを使っています。

 なお、画像は、Gimp という無料画像作成ソフトを利用し、自作しました ( ... というほどのものではないのですが)。

 以上で、本文の書かれている部分の背景が、指定した画像となって表示されるはず。 (HTML の仕様に準拠していれば)

 プレビューしたときは問題なかったけれど、送信して、実際のページを見てみると、がっかり、ということが何度かあったが、きちんと表示されていたので、安心。

 なお、background 属性を bgcolor 属性にし、背景色を指定することも可能。
 ( ---> 実験用エントリ1 - 実験2 参照)


 但し、background 属性および bgcolor 属性は、テンプレートを変更したときに見映えが変わる場合があるので、指定する際に注意が必要。

 現在のテンプレートではきれいに見えても、変更したら ..... ということもありえます。

 それから、背景画像があると、ごちゃごちゃして文字が読みづらくなってしまうことがあります。 ちょっとおとなしめすぎるかな ... くらいのひかえめな柄がおすすめ、かもしれません。 (実際、例のじぶんの記事が、じぶんでも読みづらい ... と思います)


■ style 属性

 style 属性では、各種スタイルが指定できます。

 ここでは、文字色を指定しています。 (style="color: #223d08;")

 背景画像や背景色を指定している場合、現在のテンプレートではきれいに見えたとしても、テンプレートを変更した場合、文字色が変わってしまうことがあるので、固定値を指定しておきます。 これで、テンプレートを変更しても、文字色が変わりません。

 どんなテンプレートにも合うような色 (黒: #000000 など?) を指定しておくと無難かもしれません。

 じぶんの現在のテンプレートの内容を知るには ...

 Windows 版 Internet Explorer 6.0 での話になりますが、[ファイル] - [名前をつけて保存] をすると、ページ情報がローカルに保存されます。 保存先に、じぶんのページ名のついたフォルダが作成される (例: [Run, BLOG, Run.files]) ので、そこに保存された [*****.css] ファイル (ファイル名はテンプレートによって可変) を開き、BODY 要素


BODY {
    MARGIN: 0px; COLOR: #223d08; BACKGROUND-COLOR: #5b912f
}


 の COLOR スタイルで指定されている色を見ました。


 [追記]:

 スタイルシートの URL を直接たたいても、いけるようです。

 右クリックの [ソースの表示] で、じぶんのページのソースを開き、


<link rel="stylesheet" type="text/css" charset="euc-jp" href="/skin/templates/8b/ec9a1a7185ff68f69bfb7366ef538bb5.css" />


 の href 属性に指定されている値をコピー。

 http://blog.goo.ne.jp 以下にペーストして、ブラウザのアドレス欄に入力すると、css ファイルを読み込んでくれました。

 http://blog.goo.ne.jp/skin/templates/8b/ec9a1a7185ff68f69bfb7366ef538bb5.css

 charset が EUC なので、「メモ帳」 で開くと読みづらいため、文字コードを自動判別してくれるテキストエディタで開きました。 (私は、Peggy Pad というのを使っています。)



■ cellpadding 属性 / cellspacing 属性

 cellpadding 属性は、枠線から枠内部の余白をピクセルで指定。 無指定の場合、Internet Explorer では、「2」。
 ( ---> 実験用エントリ1 - 実験3 参照)

 cellspacing 属性は、内枠の太さをピクセルで指定。 無指定の場合、Internet Explorer では、「2」。
 ( ---> 実験用エントリ1 - 実験4 参照)


■ width 属性 / height 属性

 width 属性は、表の幅を指定。 ピクセルか、パーセントで指定。
 ( ---> 実験用エントリ1 - 実験5 参照)

 heigth 属性は、表の高さを指定。 ピクセルか、パーセントで指定。
 ( ---> 実験用エントリ1 - 実験6 参照)


 それぞれ無指定の場合、セル内部のデータ量に応じて、自動的に設定されます。


■ align 属性

 表の位置を指定。 (left/center/right)
 ( ---> 実験用エントリ1 - 実験7 参照)

 無指定の場合、left となります。


■ bordercolor 属性 追加 ← <blink> 使用中。 IE で機能するのか ... ?!

 表の枠線の色を指定。
 ( ---> 実験用エントリ1 - 実験8 参照)


■ cols 属性 追加 ← <blink> 使用中。 IE で機能するのか ... ?!

 表の列数を指定。
 テーブルは、すべての読み込みが完了するまで表示されないゆえ、表示速度が体感的におそく感じられることがあるのですが、cols 属性を指定しておくことで、表示が若干速くなる場合がある、そうです。





 以上、いくつかの属性についてだけ、Windows 版 Internet Explorer 6.0 での表示をもとに記述しました。

 [追記]: (2004.5.20)
 * Windows 版 Opera 6.0 および Netscape Navigator 4.7 でも、思ったとおりの表示がされていました。
  但し、NN 4.7 では異常に読み込みに時間がかかりました ... 。



 じぶん用に書いたものですが、活用してくださる方がいましたら、もっけの幸いです。(いちおう、それも念頭において書いてみました ... )

 また、まちがいなどありましたら、ご指摘いただけましたら、たいへんありがたいです。





 * 追記・修正する可能性があります。



 参照:
 『とほほのWWW入門』 - 「HTMLリファレンス」、「スタイルシート」
コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする