バカネコ日記

フリーページ

2006年03月24日
XML
カテゴリ:バカネコPC講座
バカネコ村の記事を検索する
本日のバカネコ講座は、ひさびさにHTML編。
画像を横に並べる方法について解説する。

楽天日記を始め、どのWebサイトでも、画像を表示するにはHTMLを使う。
画像を表示するには、
<img src="画像の場所">
と書けばいいのであった。 覚えているかな?

さて、この画像であるが、2つ以上、横に並べたくても、
並ばないことがある。
これは、画像の幅の合計値が、ページの横幅、あるいはブラウザの
表示幅を超えてしまった場合に起こる。



予め設定されているページの幅を超えたり、表示できる幅を超えると、
ブラウザが、勝手に次の行に折り返してしまうのだ。
おかげで、意図しないのにタテに並ぶ、などということになる。



この現象は、インターネットエクスプローラなど、ブラウザの
横幅を縮めれば、簡単に確認することができる。




これを防ぐには、画像の表示位置を固定してしまえばよい。
絶対配置指定で、固定することも出来るが、計算が面倒だ。
ここはひとつ、汎用性のあるテーブルタグを使って固定してみよう。

余談だが、テーブルによるレイアウトは、いったん覚えてしまえば、
いろんな場面で応用が利く。 ぜひマスターしておこう。



マスは、画像の数だけ用意してもいいのだが、ひとつでも事足りる。
とりあえず、
<table border="0" width="600">
<tr>
<td>ここに画像のHTMLを書く</td>
</tr>
</table>

といった感じで書けばよい。 



ただ、楽天日記ページなど、自動改行される場合は、
間延びする可能性があるから、1行に詰めた形に書き替えておこうか。
<table border="0" width="600"><tr><td>ここに画像のHTMLを書く</td></tr></table>

これに、上記の画像を放り込めば良いのだ。
<table border="0" width="600"><tr><td><img src="画像1"><img src="画像2"...></td></tr></table>






tableタグの中の width="○○" が、テーブルの横幅を指定している。
これが、今日のポイントだ。

この width を省略すると、うまく固定されないことがある。
ブラウザの横幅を縮小すれば、影響されてしまう。
width に設定する数値は、画像の横幅の合計+文字の幅+アルファで
決めればよい。

ちなみに、border="0" は、画像の枠線の幅をゼロにして、
非表示にするための呪文である。





画像と画像の間隔を空けるには、以下のように
それぞれの画像ごとに、マスを用意しても良いが...
<table border="0"><tr><td>画像1</td><td>画像2</td><td>画像3</td></tr></table>
テーブルタグをこれ以上、いじくるのは面倒だ。

こんなことをやるくらいなら、画像と画像のHTMLの間に、
単純に全角のスペースを、いくつか入れる方がカンタンである。
画像の配置法としては、邪道と思われるが、
ややこしいテーブルを組むよりも、はるかにラク。

<table border="0" width="600"><tr><td><img src="画像1">□□□<img src="画像2"...></td></tr></table>

上記は、全角スペースを3つ、入れた例である。
全角スペースは、赤いで示したが、
実際には表示されず、間隔が空いたように見える。


これは筆者もよく使う、バカネコ講座お得意の手抜きテクニックである。
しかし、半角のスペースではダメだ。
半角のスペースはHTMLでは、「区切り」記号として扱われるため、
思うような「すき間」を作ることは出来ない。
全角は「文字」として扱われるため、その文字幅分だけ、
割り込ませることが出来るのである。

  1日1回、ポチッとね!おもしろかったらクリックしてね



【本日のポイント】
1.画像を強制的に横に並べるには、横幅を指定したテーブルが有効。
2.画像と画像のすき間を空けるには、全角スペースが便利。

【補足】
 画像の場所は、楽天の場合、http://から書き始める必要があることに注意。
 例)<img src="http://plaza.rakuten.co.jp/img/temp/3800/106.gif"> など。


【トド短信】
 むぎゃあ~! くそまじめモードなのにゃ~!
 笑いが足りないのにゃ~! 
 ふがふが、みぎゃ~!

【村民の声】
 ゴルァ!
 ネコはどーした、ネコはぁ~っ!




【ダウンロードページ】
・楽天日記専用バックアップツール、バーニャン3号のサンプル版、
 「バーニャン・ミニ」のダウンロードはこちら。
・にゃんタグのサンプル版は、このページの中段付近。
・バカネコ・ビューアのダウンロードはここ。


1日1票! ブログランキング↓
ぜひ、クリックしてね



※バカネコ講座では、安全な方法を選んで紹介していますが、
 途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。


ネコでもわかるPC講座はこちら → バカネコ講座


悲惨なキャンセル事情 バカネコ講座 バカネコソフト バカネコ村 爆笑ガイド 猫砂の研究 パソコン購入費用の削り方 現物の投下位置 ずぼらなアクセスアップ ページを読みやすくする方法 バーニャン・ミニ 楽天日記のバックアップ にゃんこのコスプレ テキストリンク下線の消し方 楽しめるアフィリ 己を知れ 自分のPCを知る バカネコ・ビューア バーニャン3号 にゃんタグ・フルバージョン 文字カウンタ 【楽天トラベル】


画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。
このサイトの新着記事の通知をご希望の方はご利用ください。







最終更新日  2006年03月27日 21時52分04秒
コメント(6) | コメントを書く

PR

バックナンバー

2019年08月
2019年07月
2019年06月
2019年05月
2019年04月

プロフィール


海獣トド

コメント新着

 海獣トド@ Re:意外な一面に触れて。(08/14) 泡雪さんへ >マザーテレサって本当にす…
 海獣トド@ うめぼしがキラリ☆さんへ >ひゃー、ブログさぼってる間にトドさん…
 海獣トド@ 鵜の岬さんへ >これからも・・ヨロシク・・ね こち…
 海獣トド@ sshijimisanさんへ >でも、トド様のおかげで少しの村民は救…
 海獣トド@ もぐらのこさんへ >日記の下書き機能残ってるよ(^-^) …
 海獣トド@ archfelisさんへ >せめて12日一杯残せばいいのに・・・…

Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.