バカネコ日記

本日のバカネコ講座は、ひさびさにHTML編。
画像を横に並べる方法について解説する。

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

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



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



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




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

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



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



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

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






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

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

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





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

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

<table border="0" width="600"><tr><td><img src="画像１">□□□<img src="画像２"．．．></td></tr></table>

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


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

　　１日１回、ポチッとね！



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

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


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

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




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


１日１票！　ブログランキング↓



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


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

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


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