ページのレイアウト HTMLワンポイント

　 文章や画像など、文書内のすべての要素は、ボックスと呼ばれる四角形の領域を生成します。レイアウトの指定をしなければボックスは縦に並べられます。floatプロパティを指定して文章や画像を画面のいろいろな位置に置く方法を説明します。

floatを指定しない場合

<img src="tess1.jpg" alt="テッセン"<br>
<p>画像、文章共にfloatは指定してありません。<br>
最初のボックス領域である画像の下に2番目のボックス領域の文章が表示されます。</p>

↓ このコードを実行すると・・・

floatを指定して横に並べる

<img src="tess1.jpg" alt="左寄せで表示" width="180" height="135" style="float:left;margin:16px;border:1 solid #000000;">
<p> 最初のボックス領域（画像）は floatで左寄せを指定しました。<br>
2番目のボックス領域（文章）は前のボックス（画像）に引き続いてその横に表示されます。<br>
表示の箇所が終われば、clearプロパティで floatを解除しておきます。 </p>
<br style="clear: both;">

↓ このコードを実行すると・・・

最初のボックス領域（画像）は floatで左寄せを指定しました。
2番目のボックス領域（文章）は前のボックス（画像）に引き続いてその横に表示されます。
表示の箇所が終われば、clearプロパティで floatを解除しておきます。

左右に画像を配置して中央に文章を表示　（ 舞子の浜のタイトルはこの方法で書いています ）

↓ このコードを実行すると・・・

　 舞子の浜は・・・　広辞苑 第6版には『神戸市垂水区にある約１キロメートルの白砂青松の海浜。東に須磨の浦があり、西は明石の浦に接し対岸に淡路島を望む。風光明媚。』とあります。松林の間から明石海峡を隔てて、淡路島を望む景観はすばらしいところです。
　 1900（明治33）年に初の県立公園として、「舞子公園」が開設されました。「鳳凰の舞うがごとき」と賞された老松の林と海峡の風景が広がる公園でした。

ブラウザの幅を広くしたり、狭くして文字と写真の配置がどう変わるか試してください。

直前のページに戻る