2011年08月08日

画像の横に文字を書く。回り込み、floatプロパティ/ 回り込み解除、clearプロパティ

スポンサード リンク

 要素の回り込み指定 / 回り込み解除
floatプロパティ、clearプロパティ

  ここに回り込みさせたい文字を書きます。
float : left;で画像が左に
float : right;で画像が右に
配置されます。
後に続く内容がその反対側に
回り込みます。
clear:both;
回り込みが解除されました。解除した要素の下に配置されます。

サンプルソース

<html>
 <head>
  <title>画像の横に文字を書く、回り込み / 回り込み解除</title>
<style type="text/css">
<!--
.imgLeft {
  float: left; //左フロート
  margin-right: 30px;
  margin-bottom: 10px;
   }

.imgRight {
  float: right; //右フロート
  margin-right: 30px;
  margin-bottom: 10px;
   }

.Clear {
  clear: both; //回り込み解除
   }

.Div {
  width: 450px;
  border: 2px dotted red;
  padding:10px;
   }
-->
</style>
<script language="JavaScript">
<!--
var cngClass = '';
function hoge() {
 cngClass = (cngClass == 'imgRight') ? 'imgLeft' : 'imgRight';
  document.getElementById('img1').className = cngClass;

 }
//-->
</script>
</head>
<body>
<div class="Div">
<img src="../sunset.gif" class="imgLeft" id="img1" width="200" height="200">
ここに回り込みさせたい文字を書きます。<br>
float : left;で画像が左に<br>
float : right;で画像が右に<br>
配置されます。<br>
後に続く内容がその反対側に<br>
回り込みます。
  <div class="Clear">clear:both;<br>
回り込みが解除されました。解除した要素の下に配置されます。
  </div>
</div>
<form style="margin-top : 5px;">
 <input type="button" onclick="hoge()" value="float: left/right ;">
</form>

</body>
</html>

floatプロパティ 値
none
    回り込みは指定しない。デフォルト。
left
    指定要素が左に,後続の内容が右に回り込みます。
right
    指定要素が右に,後続の内容が左に回り込みます。
clearプロパティ 値
none
    回り込みを解除しない。デフォルト。
left
    左フロートに対する回り込み(float: left;)を解除します。。
right
    右フロートに対する回り込み(float: right;)を解除します。
both
    左右両フロート対する回り込み(float: left; | float: right;)を解除します。
条件演算子
(条件式)?statement1:statement2;
// 上の文は条件に一致していればstatement1を そうでなければ
  statement2を実行します。

 サンプルに当てはめると
cngClass = (cngClass == 'imgRight') ? 'imgLeft' : 'imgRight';
  document.getElementById('img1').className = cngClass;

cngClassの値は、条件式(cngClassの値が 'imgRight')であれば'imgLeft'に
そうでなければ'imgRight'になり画像のクラス名を変えることで
左右のフロートを切り替えています。
簡単な条件分岐はif文を使うよりオススメです。

さくらのレンタルサーバ スタンダード
floatプロパティ  float: left; float: right;
vertical-alignプロパティ 画像と横のテキストを縦方向で中央揃え
スタイルシート クラス名の取得、付け替え
JavaScriptで動的にクラス名を付けます。変えます。
サーバーカウボーイ



posted by javaScript at 15:37 | 大阪 ☁ | 画像 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。