[B! サイト作成] saavedraのブックマーク

ホームページで画像を横に並べるには？

<img src="画像ファイルのURL"><img src="画像ファイルのURL"><img src="画像ファイルのURL">・・・とした場合、横に並びますよただし、画像のサイズとブラウザサイズにもよりますが・・・ブラウザサイズを無視して横に並べたいのであればTableを組んでしまうのも手です <table> <tr> <td><img src="画像ファイルのURL"></td> <td><img src="画像ファイルのURL"></td> <td><img src="画像ファイルのURL"></td> </tr> </table> これで、横に並べれますあと、アドバイス <img src="画像ファイルのURL">　→　<img src="画像ファイルのURL" width="横寸法" height="縦寸法" alt="画像の名前"> のように、width、heigh

saavedra 2010/10/19

サイト作成

リンク

キャプション付き画像を横向きに並べて配置する方法 [ホームページ作成] All About

写真をたくさん掲載したい場合、単に写真だけを並べるのではなく、何か一言タイトル(キャプション)やコメントを書いておきたいと思うことがあります。画像だけを横方向に並べるのはとても簡単ですが、「画像とキャプション」を1セットにして、複数のセットを横方向に配置するにはどうすれば良いでしょうか？表組み(テーブル)を使う方法もありますが、横方向に並ぶ個数(＝列数)が固定されてしまうデメリットがあります。ここはやはり、閲覧者のウインドウ幅に合わせて、横方向に並ぶ個数が自動的に変化する「リキッドレイアウト」が望ましいでしょう。例えば、下図のように。スタイルシートを使ってレイアウトを作れば、こんなことも簡単に実現可能です。今回は、「キャプション付き画像」を、横方向にリキッドレイアウトで並べる方法をご紹介いたします。【本記事の目次】 1. 画像とキャプションをセットにしたボックスを作る (p.