HPB19 | HPB18 コンテンツ一覧
ホーム > HPB19 > HTML 画像 バナーを横に並べて表示する 任意の位置に表示する
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

HTML 画像 バナーを横に並べて表示する 任意の位置に表示する


HTML 画像 バナーを横に並べて表示する 任意の位置に表示する



画像にしろバナーにしろ、通常表示できるだけのスペースがあれば、並べて記述していくだけで、横に並んで表示されます

意図しない改行が発生する理由として、記述した要素がブロック要素である場合、または、スクリプトで制御されている場合があります



ブロック要素とは



ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素です
ブロック要素タグを使用した場合、 一般的なブラウザでは前後に改行が入ります
インライン要素タグは、主に文章の一部として利用される要素であり、その前後に改行は入りません

例えば、<p>タグは、<p>~</p>で囲んだ範囲をひとかたまりの要素として、 align属性で位置を指定したり、スタイルシートを適用するのに用いるブロック要素タグの為、その前後で改行されます

それに対して、<apan>タグは、<p>タグ同様、囲んだ範囲をひとつのかたまりとしてまとめますが、<span>タグは、インライン要素タグの為、その前後で改行されません




ブロック要素で改行させない(インライン表示する)方法



ブロック要素を使用する場合で、インライン要素のように、前後と同一行に表示したい(改行させたくない)場合、<form>タグ、<p>タグ等のブロック要素タグに、「 style="display: inline" 」 を追記して、<form style="display: inline"> と記述します



inline 説明



inline パラメータは、displayプロパティ等の中で、インライン表示を行うため、つまり、改行されないよう、同一行に表示させるために指定します



inline 書式



<p style="display: inline"></p>





画像を横に並べて表示する



画像を並べて記述する



横方向に並んで表示できるスペースがある場合、画像を続けて記述すれば、横に並んで表示されます
スペースが足りなくなった時点で改行されて表示されます




画像表示例 きつねさん1号画像表示例 きつねさん2号画像表示例 きつねさん3号


<img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん1号">
<img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん2号">
<img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん3号">



align 属性を使用して画像を位置決めする



align="左右"を追加すると、横方向の位置を指定できます
最後に、<br clear="both">で解除します
一部のブログなど、<br clear="both">が使えない場合は、<div style="clear:both;"></div>でalignを解除します




画像表示例 きつねさん1号画像表示例 きつねさん2号


<img align="left" src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん1号">
<img align="right" src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん2号">
<br clear="both">



style 属性を使用して画像を横に並べる





画像表示例 きつねさん1号
画像表示例 きつねさん2号
画像表示例 きつねさん3号



<div style="float:left;"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん1号"></div>
<div style="float:left;"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん2号"></div>
<div style="float:left;"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん3号"></div>
<br clear="both">



style 属性を使用して、横間隔を調整する





画像表示例 きつねさん1号
画像表示例 きつねさん2号
画像表示例 きつねさん3号



<div style="float:left; margin: 20px;"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん1号"></div>
<div style="float:left; margin: 20px;"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん2号"></div>
<div style="float:left; margin: 20px;"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん3号"></div>
<br clear="both">



style 属性を使用して、縦横間隔を調整する





画像表示例 きつねさん1号
画像表示例 きつねさん2号
画像表示例 きつねさん3号



<div style="float:left; margin: 20px; margin-top: 0px;"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん1号"></div>
<div style="float:left; margin: 20px; margin-top: 40px;"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん2号"></div>
<div style="float:left; margin: 20px; margin-top: 80px;"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん3号"></div>
<br clear="both">



table タグを使用して、画像を自由に配置する





画像表示例 きつねさん1号 画像表示例 きつねさん2号 画像表示例 きつねさん3号
画像表示例 きつねさん4号 画像表示例 きつねさん5号 画像表示例 きつねさん6号
画像表示例 きつねさん7号 画像表示例 きつねさん8号 画像表示例 きつねさん9号


<table border="0" cellspacing="1" bgcolor="#999999">
<tbody>
<tr>
<td bgcolor="#ffffff" width="100" height="100" valign="top" align="left"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん1号"></td>
<td bgcolor="#ffffff" width="100" height="100" valign="top" align="center"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん2号"></td>
<td bgcolor="#ffffff" width="100" height="100" valign="top" align="right"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん3号"></td>
</tr>
<tr>
<td bgcolor="#ffffff" width="100" height="100" valign="middle" align="left"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん4号"></td>
<td bgcolor="#ffffff" width="100" height="100" valign="middle" align="center"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん5号"></td>
<td bgcolor="#ffffff" width="100" height="100" valign="middle" align="right"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん6号"></td>
</tr>
<tr>
<td bgcolor="#ffffff" width="100" height="100" valign="bottom" align="left"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん7号"></td>
<td bgcolor="#ffffff" width="100" height="100" valign="bottom" align="center"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん8号"></td>
<td bgcolor="#ffffff" width="100" height="100" valign="bottom" align="right"><img src="../img/HP_HTML_000001.gif" width="52" height="60" border="0" alt="きつねさん9号"></td>
</tr>
</tbody>
</table>




スクリプト <script type="text/javascript"> で改行される場合の対処法



広告の貼り付け等で、貼り付け要素が、<script type="text/javascript">になっていて、「style="display: inline"」指定が効果なく、改行されてしまう場合もあります

その場合、「src="http://~」で定義される呼び出し先で制御されているため、こちらの「style="display: inline"」定義で制御できません





テーブル構成にすれば自由自在にレイアウトできますが、セルとセルの間に隙間ができてしまいます
通常の文章であれば、気になることのない程度の隙間も、広告画像とかの場合等、隙間なく、ぴったりくっつけて表示したい場合もあることと思います


隙間なく、ぴったりくっつけて表示したい場合は、スタイルシートの 「 float 」 指定を利用します

「 float 」を使用して思うような場所に表示されない場合は、「width」 も併せて指定する必要があり、また、指定サイズの横幅が確保できていない場合、改行されてしまいます

下記の例では、300 x 250 サイズの広告を横に並べて表示しています


記述例
<head> 部定義
<style type="text/css">
<!--
cl_inline_in{
  float: left;
  width:300px;
}
cl_inline_out{
  clear: both;
}
-->
</style>
<body> 部
<div class="cl_inline_in"><script type="text/javascript" src="http://~.js"></script></div>
<div class="cl_inline_in"><script src="http://~"></script></div>








ブロックレベル要素 (Block-Level Elements) と インライン要素 (Inline Elements)

HTMLで定義されている要素のうち、<body>~</body>の中で使用される要素の多くは、 ブロックレベル要素(Block-Level Elements)か、インライン要素(Inline Elements)に分類され、それぞれの要素の中に配置できる要素が決まってきます

ブロックレベル要素(Block-Level Elements)

ブロックレベル要素は、見出し、段落、表など、文書を構成する基本となる要素で、一つのブロック(固まり)として認識されます ブラウザでの表示も一つの固まりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります

ブロックレベル要素タグ <address> <blockquote> <center> <div> <dl>
<fieldset> <form> <h1>-<h6> <hr> <noframes>
<noscript> <ol> <p> <pre> <table>
<ul>

インライン要素(Inline Elements)

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます
例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です
一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます

インライン要素タグ <a> <abbr> <acronym> <b> <basefont> <bdo>
<big> <br> <cite> <code> <dfn> <em>
<font> <i> <img> <input> <kbd> <label>
<q> <s> <samp> <select> <small> <span>
<strike> <strong> <sub> <sup> <textarea> <tt>
<u> <var>


配置ルール

ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置できます
インライン要素の中には、文字データや他のインライン要素を配置することができますが、 ブロックレベル要素は配置できません

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > HTML 画像 バナーを横に並べて表示する 任意の位置に表示する
   

© 2014 abhp.net All Rights Reserved.

参考情報


floatで崩れた?コレでなおせ! m-School
「float」指定によるレイアウト崩れを回避する方法「overflowhidden;」「clear」「clearfix」

ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP