Run, BLOG, Run

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

タグで遊ぼう - イメージ

2004年05月21日 17時00分00秒 | 薀蓄(タグ)
●画像を縦にふたつ並べる方法


 【写真その一】

 

 ↑ は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。



 【写真その二】

 

 ↑ は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。



 ソース

 【写真その一】

 <img src="https://blogimg.goo.ne.jp/user_image/3f/03/ef2c999378580f5a5e57b4d9bf7ff134.jpg">

 ↑ は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。



 【写真その二】

 <img src="https://blogimg.goo.ne.jp/user_image/04/37/19e7a64064e7b4313ed71bc1e58c3fdf.jpg">

 ↑ は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。



 赤字の src="" のなかが、画像ファイルの URL (画像の保存場所のアドレス ... といえばいいのでしょうか)。

 じぶんが表示させたい画像の URL を入力します。

 goo BLOG の画像フォルダにアップした場合は、管理画面の [画像フォルダ] を開き、任意の画像をクリックすると、画像が別ウィンドウで表示されます。 その表示されたウィンドウのアドレスバーの URL をコピーして、src="" の引用符のなかに貼り付ければ、OK.





●画像を横にふたつ並べる方法


【写真その一】
 ← は、某公園にて。 董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。




【写真その二】
 → は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。



 ソース

<img src="https://blogimg.goo.ne.jp/user_image/3f/03/ef2c999378580f5a5e57b4d9bf7ff134.jpg" align="left">【写真その一】
 ← は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。

<br style="clear: both;">

<img src="https://blogimg.goo.ne.jp/user_image/04/37/19e7a64064e7b4313ed71bc1e58c3fdf.jpg" align="right">【写真その二】
 → は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。



 画像をテキストの左側に表示させたい場合、赤字のように align="left" を指定。 画像をテキストの右側に表示させたい場合、align="right" を。

 <br clear="all"> <br style="clear: both;"> (* 2004.10.7 変更) の指定もわすれずに。 このタグを挿入することで、テキストの回りこみを解除します。

 * tom-chan さんの blog 『なせば成る』 - 「写真をうまくレイアウトしてみよう!」 のコメント欄を拝見し、<br clear="all"> とした場合、goo ブログ仕様により、clear 要素が無効となってしまうということがわかったので、変更しました。





●テキストの回りこみ解除指定なし


【写真その一】
 ← は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。

【写真その二】
 → は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。



 ソース

<img src="https://blogimg.goo.ne.jp/user_image/3f/03/ef2c999378580f5a5e57b4d9bf7ff134.jpg" align="left">【写真その一】
 ← は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。

<img src="https://blogimg.goo.ne.jp/user_image/04/37/19e7a64064e7b4313ed71bc1e58c3fdf.jpg" align="right">【写真その二】
 → は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。


 <br style="clear: both;"> の指定をしない場合、画像の底辺まで、テキストが回り込まれます。





●画像のサイズ (高さ・幅)


 なお、画像の高さ (height)、幅 (width) などを指定したほうが、読み込みが早くなります。
 (容量や、高さ・幅が大きい場合は、指定しておいたほうがヨイ)

 高さ・幅を指定することで、表示時のサイズを変えることができます。
 (下の例、もとは、120 × 120 ピクセル)



【写真その二】
 → は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。



 ソース

<img src="https://blogimg.goo.ne.jp/user_image/04/37/19e7a64064e7b4313ed71bc1e58c3fdf.jpg" align="right" height="80" width="80">【写真その二】
 → は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。






●div 要素 (タグ) との組み合わせ


 【写真その一】

 


 ↑ は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。



 【写真その二】

 


 →↑ は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。



 ソース

 【写真その一】

 <div align="center"><img src="https://blogimg.goo.ne.jp/user_image/3f/03/ef2c999378580f5a5e57b4d9bf7ff134.jpg"></div>

 (<center><img src="https://blogimg.goo.ne.jp/user_image/3f/03/ef2c999378580f5a5e57b4d9bf7ff134.jpg"></center> でも可)

 ↑ は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。



 【写真その二】

 <div align="right"><img src="https://blogimg.goo.ne.jp/user_image/04/37/19e7a64064e7b4313ed71bc1e58c3fdf.jpg"></div>

 →↑は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。









 その他、表組み (テーブル) を利用すると、さらに柔軟なレイアウトが可能です。

 詳しい解説がなされている web ページや、拙筆の 「タグで遊ぼう - テーブル編 2」 を参照いただければ、さいわいです。








 関連リンク:
 ・「初めてのホームページ講座 - 逆引きHTMLリファレンス - イメージ」

 ・「初めてのホームページ講座 - 逆引きHTMLリファレンス - テーブル」

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

タグで遊ぼう - 希望要望つっこみ? 編

2004年05月21日 16時51分27秒 | 薀蓄(タグ)
 goo BLOG において、先日から追加された使用可能な要素、属性について、じぶん用の覚書、および実験/検証用として書いております。

 前回までに、テーブル要素、アンカー要素 (リンクタグ. 2004.5.21 追記あり) について書きました。

 あとは、<img> 要素に追加された属性について書こうかな、と思いましたが、いまさら私が取り上げて書くまでもないだろうか ... という気もします。

 <img> 要素の詳細および style 属性でおもに使われると思われる filter については、識者の方がすでに書かれたものを ... ?




 さて。 今回は、追加された要素や属性の一覧を見ていて、気になった点などをいくつか ... 。

■ <div> があるのに、なぜ <span> がないのか

 ブロック要素 <div> に対するインライン要素 <span>、両方あったほうがいいのでは ... という気がしますが ... 。

 (ちなみに、ブロック要素 <blockquote> に対して、インライン要素 <q> は存在していますね。 (いずれもタグで挟まれた部分が引用であることを指し示します))

■ <div> 要素に、なぜ style 属性がないのか

 <div> 要素は、さまざまな style を指定できるからこそ生きるのでは、という気がしますが ... 。

 (ちなみに、<b> 要素、<i> 要素、<u> 要素などの style 属性は有効のようですね ... あまり意味がないような気も ... ?! )

■ <blink> があるなら、<marquee> があってもよい ?!

 <blink> は、Netscape Navigator で拡張された独自の要素ですが、それなら、Internet Explorer の独自要素 <marquee> があってもいいのでは ... ?

 ( ... と言っても、<blink> (テキストの点滅) も、<marquee> (文字列の自動スクロール) も、それほど必要とは思わないのですが ... )

 あたらしめのバージョンの IE では、テキストだけでなく、画像のスクロールも可能とのこと。 これはちょっとおもしろそうですね。

■ 文字参照した場合

 これは、以前から見受けられたのですが ... 。


 タグなどに利用され、タグなのか文字なのか混同されやすい記号などを記述する 「キャラクタ・エンティティー」 ...

実体名文字内容
&lt;<右大不等号
&gt;>左大不等号
&amp;&アンパサンド
&quot;"引用符.ダブルクォーテーション
&nbsp; 空白文字.半角スペース


 その他、特殊文字の 「キャラクタ・エンティティー」 ...

実体名文字内容
&copy;©コピーライトサイン
&reg;®登録商標サイン
&trade;トレードマークサイン
&spades;スペード
&clubs;クラブ
&hearts;ハート
&diams;ダイヤ


 入力して保存すると、ブラウザ上で問題なく表示されるのですが。

 これらの入力された記事に修正や追記を加える為に、編集画面で開いてみると、キャラクタ・エンティティーが文字化されてしまっています。 それに気づかずに、そのまま保存してしまうと、文字参照が無効となってしまうのですが ... どうにかならないものでしょうか?

 (元記事のバックアップをとっているので、まあ、なんとかなるのですが ... )


 [追記]: (2004.5.21 PM 6:00)
 あ。 これは、ブラウザの仕様のような気もしてきました。 goo BLOG のシステムに限らず、起こる現象のような ... 。 申し訳ありません。






 ... 以上、とりあえず、思いつくのはこんな感じなのですが ... 。
 (また、なにかあったら、追記するかもしれません ... )



 ともあれ、今回の追加は、たいへんありがたいと思います。 また、折を見てご検討いただき、変更・追加くださいましたら幸いです。

 (ぜひとも、スタイルシートを外部ファイルで定義できるようにしていただきたいです ... )

 今後とも、どうぞよろしくお願いいたします。 > goo BLOG スタッフさま



 参照:
 『とほほのWWW入門』
コメント (5)
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

タグで遊ぼう - リンク編

2004年05月20日 18時45分23秒 | 薀蓄(タグ)
 goo BLOG において、先日から追加された使用可能な要素、属性について、じぶん用の覚書、および実験/検証用として書いております。

 今回は、アンカー要素 (リンクタグ) に追加された属性について。 ほんとうに機能するのか? ... と相変わらず失礼な疑念をもっております。
 (プレビューではうまくいくのに、実際のページでは無効化される要素、属性が見受けられたことがあるので ... )

 はてさて。

■ name 属性

 name 属性については、確認済みです。 昨日の記事で、特定のページの特定の位置にジャンプさせるように指定しているところがあるのですが、きちんと動作しました。

 まず、参照先の位置を <a name="..."></a> で括り ...

 ♪ 音楽のお部屋 ♪ - ROCK 編 -

  ここでは、わたしの好きな ROCK について、語っちゃいます♪

  ・・・


 <a name="rock">♪ 音楽のお部屋 ♪ - ROCK 編 - </a>

  ここでは、わたしの好きな ROCK について、語っちゃいます♪

  ・・・



 その位置へ直接ジャンプさせるには ...


 ♪ 音楽のお部屋 ♪ - ROCK 編 - へ飛ぼう !


 <a href="http://01.members.goo.ne.jp/www/goo/b/r/byrdie/main.html#rock">♪ 音楽のお部屋 ♪ - ROCK 編 - へ飛ぼう ! </a>



 となります。
 (参照先 URL のお尻に # をつけ、<a name="..."></a> で指定した名まえを)


 ところで、プレビューでは、<a name="rock"></a> で囲まれたテキストは通常のテキスト同様の表示でしたが、実際のページで見てみると、下線が引かれてしまいますね。 これは仕様なのでしょうか?

 また、同一ページ内の場合、ファイル名を省略して、


 ♪ 音楽のお部屋 ♪ - ROCK 編 - へ飛ぼう !


 <a href="#rock">♪ 音楽のお部屋 ♪ - ROCK 編 - へ飛ぼう ! </a>



 というように指定できるはずなのですが、果たして機能するのでしょうか ... ?

 * たしか、以前は、http:// から始まる URL でないと、投稿時に href 属性の値が無効化されてしまった記憶が ... 。


 [追記]: (2004.5.21)
 投稿後、ソースを確認してみたところ、やはり、href 属性が無効化されていました。
 たとえば、自ブログ内の参照であれば、相対パスで書いて問題ないはずなのに ... 。
 "mailto:" も無効になるのでしょうか ... 。 (だとしたら、 <address> 要素が追加されてもあまり意味がない (?) ような ... )





■ target 属性

 target 属性は、表示先を指定します。


 ♪ 音楽のお部屋 ♪ - ROCK 編 - へ飛ぼう !


 <a href="http://01.members.goo.ne.jp/www/goo/b/r/byrdie/main.html#rock" target="_brank">♪ 音楽のお部屋 ♪ - ROCK 編 - へ飛ぼう ! </a>



 無指定の場合、デフォルト _self (同一ウィンドウ) となります。

 別ウィンドウを開いて表示させたい場合、_brank などを指定。

 別ウィンドウで表示するか、しないか、は、それぞれ好みによると思いますが。 私は基本的に無指定にしています。

 リンクをクリックするたびに、ウィンドウがポンポンポンポン開くのを嫌う人もいるので ... 。 逆に別窓表示にしないと、いちいち元のページに戻るのがめんどう、という人もいるようで。

 Internet Explorer の場合、[右クリック] - [新しいウィンドウで開く] でじぶんで任意に別窓表示できますが、ブラウザの種類によっては、その動作が非常にめんどうなものもあるかもしれません。 また、逆に、リンク先をすべて別窓表示できるようにカスタマイズできるブラウザもあったような気もします (DonutP がそうだったような ... )。

 別窓指定有無の好みは、個人個人によって意見がわかれるところかもしれません (政治・宗教・プロ野球といっしょ ... ??)。 なので、じぶんの好みでいいのでは、という気がします。



■ title 属性

 リンク上にマウスカーソルをもっていったときにポップアップされる文字列を指定。


 ♪ 音楽のお部屋 ♪ - ROCK 編 - へ飛ぼう !


 <a href="http://01.members.goo.ne.jp/www/goo/b/r/byrdie/main.html#rock" title="お宝情報満載?!">♪ 音楽のお部屋 ♪ - ROCK 編 - へ飛ぼう ! </a>



 Windows 版 Internet Explorer 5.0 以上、Opera 6.0 では動作しました。 (Netscape Navigator 4.7 では機能せず)



■ style 属性 2004.5.21 加筆

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

 下記の例では、下線のないリンクを表示させていますが ...


 ♪ 音楽のお部屋 ♪ - ROCK 編 - へ飛ぼう !


 <a href="http://01.members.goo.ne.jp/www/goo/b/r/byrdie/main.html#rock" style="text-decoration: none;">♪ 音楽のお部屋 ♪ - ROCK 編 - へ飛ぼう ! </a>


 [追記]: (2004.5.21)
 text-decoration で設定できる値 ...

 none (なし), underline (下線), overline (上線), line-through (打ち消し線), blink (点滅), inherit (継承)



 いちいち、リンクひとつずつにスタイルを指定するのはめんどうですね ... 。

 どうしても目立たせたいリンクがある場合は、そこを強調するために利用するのも手ですね。


 [追記]: (2004.5.21)
 せっかくなので、<a> に指定できるスタイルをもうひとつだけ ... 。


 【マウスをのせたときのマウスカーソルの形状】

 ♪ 音楽のお部屋 ♪ - ROCK 編 - へ飛ぼう !


 <a href="http://01.members.goo.ne.jp/www/goo/b/r/byrdie/main.html#rock" style="cursor: crosshair;">♪ 音楽のお部屋 ♪ - ROCK 編 - へ飛ぼう ! </a>


 auto (規定値:自動), crosshair (十字印), default (通常のもの), pointer (ポインタ), move (移動用), e-resize (右リサイズ), ne-resize (右上リサイズ), nw-resize (左上リサイズ), n-resize (上リサイズ), se-resize (右下リサイズ), sw-resize (左下リサイズ), s-resize (下リサイズ), w-resize (左リサイズ), text (テキスト選択), wait (待ち), help (ヘルプ), inherit (継承), または URL 指定





 より詳細な仕様については、web ページ製作者のバイブル、『とほほのWWW入門』 の 「HTMLリファレンス - <a>」 をご参照ください。



  * 追記・修正する可能性があります。
  * 例中のリンク先はサンプルです。
  * 「タグで遊ぼう」 シリーズが続くのかは未定です ... 。
コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

タグで遊ぼう - テーブル編 3 私的総まとめ

2004年05月20日 12時19分54秒 | 薀蓄(タグ)
 goo BLOG で使用できる要素 (以下、「タグ」 とする) が大幅に増えたのですが、実際、ほんとうに機能するのか? 思ったとおりの見映えになるのか? という大変失礼な疑念から、実験/検証するため、「タグで遊ぼう - テーブル編」 (2004.5.20 追記)、「タグで遊ぼう - テーブル編 2」 (2004.5.20 追記) を書きました。

 私的には最大の目玉であろうと思った 「テーブル」 について、もう少し実験を重ねてみようかな、と思いました。

 凝ろうとおもえば、時間がゆるすかぎり、いくらでも、凝れるのですが。

 いろいろ実験してみて思ったのは、テーブルを使用すると、データ量がその分増えるので、
  • 読み込みが遅くなる
  • いちいちの入力がめんどう

 ということでしょうか。
 (もともとデザインのセンスがないので、タグが必要以上に助長になり、効率よく書けません ... )

 らくに更新ができるから、という理由で blog をはじめたのですが。

 とりあえず。 ハイライト的効果を出したいとき、どうしてもレイアウトに凝りたいとき (私にはほぼありえないが、写真や絵をきれいに並べて見せたいとき) などにおいて、上手に使いこなせれば、と思いました。



 * 実際にじぶんでやってみての、個人的見解です。
コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

タグで遊ぼう - テーブル編 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でシェアする

実験用エントリ2

2004年03月27日 12時00分02秒 | 薀蓄(タグ)
■ フォントサイズ変更時の見映え

あああああああああああああああああああああああああああああ

<font size="+5" style="line-height:180%;">あああああああああああああああああああああああああああああ</font>




あああああああああああああああああああああああああああああ

<font size="+5" style="line-height:1.8em;">あああああああああああああああああああああああああああああ</font>




あああああああああああああああああああああああああああああ

<font size="+5">あああああああああああああああああああああああああああああ</font>
コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

実験用エントリ1

2004年03月27日 12時00分00秒 | 薀蓄(タグ)
■ 実験1
Hello, world !



<table border="1"><tr><td>Hello, world !</td></tr></table>




■ 実験2
Hello, world !



<table border="0" bgcolor="#ff0000"><tr><td>Hello, world !</td></tr></table>




■ 実験3
Hello, world !



<table border="1" cellpadding="5"><tr><td>Hello, world !</td></tr></table>




■ 実験4
Hello, world !



<table border="1" cellspacing="5"><tr><td>Hello, world !</td></tr></table>




■ 実験5
Hello, world !



<table border="1" width="75%"><tr><td>Hello, world !</td></tr></table>




■ 実験6
Hello, world !



<table border="1" height="100"><tr><td>Hello, world !</td></tr></table>




■ 実験7
Hello, world !



<table border="1" align="center"><tr><td>Hello, world !</td></tr></table>




■ 実験8
Hello, world !



<table border="1" bordercolor="#000080"><tr><td>Hello, world !</td></tr></table>




■ 実験9
Hello, world !



<table border="1">
<tr>
<td>Hello, world !</td>
</tr>
</table>




■ 実験10

Hello, world !



<table border="1">
<tr>
<td>
Hello, world !
</td>
</tr>
</table>

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