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でシェアする