バカネコ日記

フリーページ

保存ﾌｧｲﾙ見方

< 新しい記事

新着記事一覧(全963件)

過去の記事 >

全て | カテゴリ未分類 | バカネコＰＣ講座 | バカネコのお話

2006年03月24日

本日のバカネコ講座は、ひさびさに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">　など。

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

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

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

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

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

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

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

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

お気に入りの記事を「いいね！」で応援しよう