A.T-MOON

contents

パンくずリスト

メッセージエリア



    表示と配置の指定B

メッセージエリア

マーク 表示形式の設定 display: A;

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


display属性で、表示形式を指定します。
指定した要素を非表示にしたり、ブロックレベル要素として扱ったりすることができます。
ブロックレベル要素、インラインレベル要素についてはコチラ→ブロックレベル要素とインラインレベル要素

Aにはnoneblockinlinelist-itemなどが入ります。

A 表示形式
none 非表示
block ブロックレベル要素として扱う
inline インラインレベル要素として扱う
list-item リスト項目用のボックスを生成

※例)
埋め込みスタイルシートでdisplay:noneの指定になっている文章です。
この上に表示されていない文章があります。
インラインスタイルシートでdisplay: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

マーク 表示・非表示を指定 visibility: A;

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


visibility属性の値を使って要素の表示、非表示を設定します。
上で説明したのdisplay: noneも非表示の設定ですが、この場合要素の表示領域は確保はされませんが
visibility: hidden;を使うことにより要素の表示領域は確保されての非表示になります。

Aにはvisiblehiddenが入ります。

A 表示・非表示の設定
visible 表示(デフォルト)
hidden 非表示

※例)
この上には表示されていない画像があります

この下には表示されていない文字があります

この文字は表示されません

<html>
 <head>
 <style type="text/css">
 <!--

 .hidden{
  visibility :hidden;
  }
 -->
 </style>
  <title>ココにタイトル</title>
 </head>
 <body>
  <font color=red>※例</font><br>
  <img src="画像ファイルのURL" alt="画像の名前" class="hidden">
  <div>
  この上には表示されていない画像があります
  </div>
 <br>
  この下には表示されていない文字があります
  <p style="visibility: hidden">
  この文字は表示されません
  </p>
  </div>

 </body>
</html>

非表示の設定というのは上の【表示形式のの設定】と似ていますが
display: nonevisibility: hiddenとでは大きく違います。
display: noneは、はじめからその要素そのものが生成されず、ないものとされます。
visibility: hiddenは、そこにあるけれど表示しないようにしている、という事です。

ではまずは埋め込みスタイルシートです。
クラスセレクタ.hiddenを作ります。
.hidden{
.visibility: hidden;

とすることにより、クラスセレクタが指定された部分の要素にプロパティの値が適応されます。

セレクタの種類の所で説明しましたが
クラスセレクタはひとつの文章内で重複して使用することができますが
IDセレクタはひとつの文章内で重複して使用することはできません。
よってここではクラスセレクタを使用します。

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

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

ページTOP

マーク はみ出る部分の処理方法を設定 overflow: A;

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


overflow属性の値を使ってはみ出る部分の処理方法を設定します。
Aにはvisiblehiddenscrollautoなどが入ります。

A 処理のされ方
visible ボックスのサイズを自動調節して表示
hidden はみ出した部分は表示しない
scroll スクロールして見られるようにする
auto 必要に応じてスクロールできるようにする

※例)
幅200px、高さ10pxの
赤地のボックスです。
visibleなので
ボックスに収まりきらないテキストは
ボックスの高さを自動調節して
そのまま表示されていきます。

幅200px、高さ50pxの
灰色地のボックスです。
autoなので
ボックスに収まりきらないテキストは
スクロールして見られるように
表示されていきます。

<html>
 <head>
 <style type="text/css">
 <!--
 .sample_box11{
  width: 200px;
  height: 25px;
  background-color: red;
  overflow: visible;
  }
 -->
 </style>
  <title>ココにタイトル</title>
 </head>
 <body>
  <font color=red>※例</font><br>
  <div class="sample_box11">
  幅200px、高さ10pxの<br>
  赤地のボックスです。<br>
  visibleなので<br>
  ボックスに収まりきらないテキストは<br>
  そのまま表示されていきます。
  </div>
  <p style="overflow: auto; width: 200px; height: 50px; background-color: gray;">
  幅200px、高さ50pxの<br>
  灰色地のボックスです。<br>
  autoなので<br>
  ボックスに収まりきらないテキストは<br>
  スクロールして見られるように<br>
  表示されていきます。
  </p>

 </body>
</html>

まずは埋め込みスタイルシートです。
要素名を付けましょう。ここでは.sample_box11と名付けました。
overflow: visibleを指定する事により
内容を表示できるように自動でボックスのサイズを調節します。
ただし、Firefoxの場合はボックスのサイズはそのままで
ボックスの外にはみ出した部分を記述することになります。
セレクタの種類の所で説明しましたが
クラスセレクタはひとつの文章内で重複して使用することができますが
IDセレクタはひとつの文章内で重複して使用することはできません。
よってここではクラスセレクタを使用します。
埋め込みスタイルシート内のsample_box11を指定することにより
記述した部分にoverflow: visibleが適用されます。

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

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

ページTOP

表示と配置の指定A 位置の指定に戻る