ゆーみんさんの方法は「テーブル」を使った方法で、むしろ難しい方法です。
ただ単に２枚並べるのであれば、次の方法でもできます。但し、欠点もあります。
-
- 各写真の下に、説明文を入れることはできない。
- 写真の幅が大きいと２段になる。
- ウィンドウの幅をせまくすると、２段になる。
ヒントは、写真は「フォントサイズが大きな１文字」と考えます。そう、Word の黒いハンドルの状態と同じです。
入力１
<div align="center">文字の場合</div>
<div align="center"><font size=+3>Ａ Ｂ</font></div>
<div align="center">写真の場合</div>
<div align="center"><img src="http://www.geocities.jp/hhnbf557/hatena/2005/20051206a.jpg"> <img src="http://www.geocities.jp/hhnbf557/hatena/2005/20051126a.jpg"></div>
<div align="center"><span style="font-weight:bold;">やったぁ〜〜〜</span><br>写真が２枚並んで入りました〜〜<br>ちょっと<残念なのは同じサイズでないこと。<br>これからは何時もサイズは３６０にきめよう。</div>
- ２行目： “Ａ”と“Ｂ”の間には全角スペースを入れてあります。
- ４行目： 同じように左の <img> と次の <img> の間にも全角スペースを入れてあります。---> 写真と写真の間にスペースが入ります。
- ５行目： 文字の間の <br> は、「段落を変えないで改行する」タグです。Word の［Shift］＋［Enter］と同じ機能です。
次のように表示されます（たぶん）
写真が２枚並んで入りました〜〜
ちょっと<残念なのは同じサイズでないこと。
これからは何時もサイズは３６０にきめよう。
入力２
ユーミンさんも悩んでいますが、トリミングすると、写真の縦横比が変わるので、並んだ写真の大きさを揃えるのは、それなりの技術が必要です。
テーブルを使うと大きさが違うことが強調される結果に‥‥
上の例で、画像のプロパティを見ると、左の写真が、３００×２０８ピクセル、右が３００×２２５ピクセルです。そこで、右の写真の高さを HTML タグで２０８に変えてごまかします。
４行目： 右の写真の img タグに height=208 を追加します。
<img height=208 src="http://www.geocities.jp/hhnbf557/hatena/2005/20051126a.jpg">
次にように見えるでしょう。
