A.T-MOON

contents

パンくずリスト

メッセージエリア



    表示と配置の指定A

メッセージエリア

マーク 左右への配置と回り込みの指定 float: A;

 埋め込み: {float: A;}
 インライン: <○○ style="float: A;">ここに配置したいもの</○○>


float属性で、指定した要素を左、または右に配置し
その反対側にその後に続く要素を回り込ませます。
Aにはleftrightnoneが入ります。

A 表示の設定
left 指定した要素を左側に
right 指定した要素を右側に
none 左右への配置、回り込みを行わない

※例)
埋め込みスタイルシートで
画像を左に表示して
あとに続くテキストを
反対側に回り込ませてます。

ここでは画像を使って説明していますが、他の要素に対しても有効です。

インラインスタイルシートで
画像を右に表示して
あとに続くテキストを
反対側に回り込ませてます。

ここでは画像を使って説明していますが、他の要素に対しても有効です。
<html>
 <head>
 <style type="text/css">
 <!--

 img.left{
  float: left;
  }
 -->
 </style>
  <title>ココにタイトル</title>
 </head>
 <body>
  <font color=red>※例</font><br>
  <img src="画像ファイルのURL" alt="画像の名前" class="left">
  <div>
  埋め込みスタイルシートで<br>
  画像を左に表示して<br>
  あとに続くテキストを<br>
  反対側に回り込ませてます。<br>
  <br>
  <font class="point_r">※</font>ここでは画像を使って説明していますが、他の要素に対しても有効です。<br>
  </div>

 <br>
  <img src="画像ファイルのURL" alt="画像の名前" style="float: right;">
  <div>
 インラインスタイルシートで<br>
 画像を右に表示して<br>
 あとに続くテキストを<br>
 反対側に回り込ませてます。<br>
  <br>
  <font class="point_r">※</font>ここでは画像を使って説明していますが、他の要素に対しても有効です。<br>
 </div>

 </body>
</html>

まずは埋め込みスタイルシートです。
要素名を付けましょう。ここではimg.leftと名付けました。
<img>を表示する場合、クラスセレクタ.leftを指定する事により
img.leftで指定されたスタイルが適用されます。
セレクタの種類の所で説明しましたが
クラスセレクタはひとつの文章内で重複して使用することができますが
IDセレクタはひとつの文章内で重複して使用することはできません。
よってここではクラスセレクタを使用します。
埋め込みスタイルシート内のimg.leftで画像の配置と回り込みを指定をします。

body内の表示したい所に範囲を指定して記述します。(範囲の指定はコチラ→範囲の指定

次にインラインスタイルシートです。
body内の表示したい所に範囲を指定して記述するのは同じなのですが、指定範囲に直接、styleの記述します。
<style="">という形で記述していきます。
それぞれのプロパティを;(半角セミコロン)で区切って記述します。

ページTOP

マーク 回り込みを解除する clear: A;

 埋め込み: {clear: A;}
 インライン: <○○ style="clear: A;">ここに文字</○○>


clear属性の値を記述し
どちら側の要素に対して解除するのかを設定します。
上の【左右への配置と回り込みの指定】のところで出てきたfloatを使用した場合
それを解除するためにclear属性を利用します。
Aにはleftrightbothnoneが入ります。

A 表示の設定
left 左側の要素に対する回りこみを解除
right 右側の要素に対する回りこみを解除
both 両側の要素に対する回りこみを解除
none 回り込みを解除しない


※例)
埋め込みスタイルシートで
画像を左に表示して
あとに続くテキストを
反対側に回り込ませ
※以降のテキストを回り込み解除してあります。

ここでは画像を使って説明していますが、他の要素に対しても有効です。


インラインスタイルシートで
画像を右に表示して
あとに続くテキストを
反対側に回り込ませ
※以降のテキストを回り込み解除してあります。
ここでは画像を使って説明していますが、他の要素に対しても有効です。
<html>
 <head>
 <style type="text/css">
 <!--

 img.left{
  float: left;
  }

 p{
  clear: both;
  }
 -->
 </style>
  <title>ココにタイトル</title>
 </head>
 <body>
  <font color=red>※例</font><br>
  <img src="画像ファイルのURL" alt="画像の名前" class="left">
  <div>
  埋め込みスタイルシートで<br>
  画像を左に表示して<br>
  あとに続くテキストを<br>
  反対側に回り込ませ<br>
  ※以降のテキストを回り込み解除してあります。<br>
  <p>
  <font class="point_r">※</font>ここでは画像を使って説明していますが、他の要素に対しても有効です。
  </p>
  </div>

 <br>
  <img src="画像ファイルのURL" alt="画像の名前" style="float: right;">
  <div>
  インラインスタイルシートで<br>
  画像を右に表示して<br>
  あとに続くテキストを<br>
  反対側に回り込ませ<br>
  ※以降のテキストを回り込み解除してあります。<br>
  </div>
  <div style="clear: both;">
  <font class="point_r">※</font>ここでは画像を使って説明していますが、他の要素に対しても有効です。
  </div>

 </body>
</html>

上の【左右への配置と回り込みの指定】とほぼ同じサンプルですが
どこが変わっているかわかりますね。

まずは埋め込みスタイルシートです。
指定する要素はpです。
p{
clear: both;

とすることにより、<p>〜</p>に挟まれた部分にプロパティの値が適応されます。
<img>を表示する場合、クラスセレクタ.leftを指定する事により
img.leftで指定されたスタイルが適用されます。
セレクタの種類の所で説明しましたが
クラスセレクタはひとつの文章内で重複して使用することができますが
IDセレクタはひとつの文章内で重複して使用することはできません。
よってここではクラスセレクタを使用します。
埋め込みスタイルシート内のimg.leftで画像の配置と回り込みを指定をします。

body内の表示したい所に範囲を指定して記述します。(範囲の指定はコチラ→範囲の指定

次にインラインスタイルシートです。
指定する要素をpにすると、埋め込みスタイルシートの値が適応されてしまうので
ここでは <div style="clear: both;">〜</div>
とすることにより、<div style・・・>〜</div>に挟まれた部分にプロパティの値が適応されます。
body内の表示したい所に範囲を指定して記述するのは同じなのですが、指定範囲に直接、styleの記述します。
<style="">という形で記述していきます。
それぞれのプロパティを;(半角セミコロン)で区切って記述します。

ページTOP

表示と配置の指定@ 表示と配置の指定B