スタイルシート


レイアウトを posision プロパティで配置する

Google Chrome ではこのページは正しく表示されません。 親要素が無視されるので、ページの先頭からの位置が適用となるようです。 正しく表示させたい場合は IEで表示させてください。
  1. static (初期値)
  2. relative (相対位置)
  3. absolute (初期値)

positionプロパティ

値:static

   position: static で指定すると配置はHTMLの記述順になる。
   static は初期値なので記述しない場合は static が適用される。

   * css
       #Static_Left{
            posision:           static;
            width:              100px;
            height:             100px;
            background-color:   #FFE6B6;
       }

       #Static_Center{
            posision:           static;
            width:              200px;
            height:             100px;
            background-color:   #FFE6B6;
       }

       #Static_Right{
            posision:           static;
            width:              100px;
            height:             100px;
            background-color:   #90EE90;
       }


   * HTML
       <div id="Static_Left">
          LEFT
       </div>

       <div id="Static_Center">
          CENTER
       </div>

       <div id="Static_Right">
          RIGHT
       </div>
  
Left
Center
Right

値:relative (相対位置)

   posision: relative は直前に指定した位置からの相対位置。
   Top 位置を 0 にすると 以下のようになってしまうので
   Left の高さ分 マイナス値を指定する。

top: 0px の場合

  
Left
Center
Right
   * css
       #Relative_Left{
               position:           Relative;
               width:              100px;
               height:             100px;
               background-color:   #FFE6B6;
       }

       #Relative_Center{
               position:           Relative;
               top:               -125px;
               left:               125px;
               width:              200px;
               height:             100px;
               background-color:   #6495ED;
       }

       #Relative_Right{
               position:           Relative;
               top:               -250px;
               left:               350px;
               width:              100px;
               height:             100px;
               background-color:   #90EE90;
       }

   * HTML
       <div id="Relative_Left">
          LEFT
       </div>

       <div id="Relative_Center">
          CENTER
       </div>

       <div id="Relative_Right">
          RIGHT
       </div>
  
Left
Center
Right

高さはここまで * ここの部分は3つの合計分の高さが取られるので、 このようなレイアウトを作る場合 Releative はむかない。

値:absolute (絶対位置)

   posision: absolute 親要素からの絶対位置を指定する。
   * css
       #Absolute_Left{
               position:           absolute;
               top:                10px;
               width:              100px;
               height:             100px;
               background-color:   #FFE6B6;
       }

       #Absolute_Center{
               position:           absolute;
               top:                10px;
               left:               125px;
               width:              200px;
               height:             100px;
               background-color:   #6495ED;
       }

       #Absolute_Right{
               position:           absolute;
               top:                10px;
               left:               330px;
               width:              100px;
               height:             100px;
               background-color:   #90EE90;
       }

   * HTML
      <div> ←親要素 青で囲まれた部分
         <div id="Absolute_Left">
            LEFT
         </div>

         <div id="Absolute_Center">
            CENTER
         </div>

         <div id="Absolute_Right">
            RIGHT
         </div>
      </div>
  
Left
Center
Right
   


   


ボタンクリックで重なり合ったレイアウトを切り替える

      

  
1月
2月
3月
   * css
       div.Absolute_Overflow{
               position:           absolute;
               top:                50px;
               left:                 10px;
               width:              200px;
               height:             50px;
               background-color:   #90EE90;
       }

   * HTML
       <button onClick="JanShow()">1月</button>  
       <button onClick="FebShow()">2月</button>  
       <button onClick="MarShow()">3月</button>

       <div id="Jan" class="Absolute_OverFlow">
          1月
       </div>

       <div id="Feb" class="Absolute_OverFlow">
          2月
       </div>

       <div id="Mar" class="Absolute_OverFlow">
          3月
       </div>

   * JavaScript
     <script type="text/javascript">
       function JanShow(){
        $('Feb').hide();
        $('Mar').hide();
        $('Jan').show();
        }
       function FebShow(){
        $('Mar').hide();
        $('Jan').hide();
        $('Feb').show();
        }
       function MarShow(){
        $('Feb').hide();
        $('Jan').hide();
        $('Mar').show();
       }
     </script>


     ※上記のコードは prototype.js を使用しているのが前提。



先頭へ

      Document-Folder          一覧
HP-UX
HULFT
JAVA
JP1
JavaScript
Linux
MAC
PHP
Perl
Python
Ruby
SOA
Solaris
Unix全般
Windows
XML
エクセル
スタイルシート
セキュリティー
データベース
ネットワーク
パソコン
ブラウザ
プログラム構文
仮想化
          RSS-Folder
ニュース
   アットマーク・アイティ(@IT)
   シンクイット(ThinkIT)
   インターネットコム
   インターネットウォッチ
   日経IT-Pro
   日経パソコン
   CNET Japan
   ZD-NetJapan
   MYCOM
   RBB-Today
ベンダー
   日本IBM
   日本HP
   サンマイクロシステムズ
   NEC
   富士通
   日立
ソフトウェア
   マイクロソフト
   トレンドマイクロ
   オラクル
   サイボウズ
   Mozilla
   野村総合研究所
   (その他ソフトウェア企業)
更新履歴 一覧
 07/08 PERF
プログラム構文
 07/07 PERF
プログラム構文
 06/25 オブジェクトプログラミング2
Perl>サンプル
 07/12 クローン作成
仮想化>vCenter
 07/12 vyatta設定
ネットワーク>vyatta
 07/12 vyattaインストール
ネットワーク>vyatta
 07/12 リポジトリサーバ
Linux>サーバ構築
 07/05 VMwareのインストール
仮想化>VMware
 07/05 PXEブート
仮想化>KVM
 07/01 DHCPでのPXEブート
仮想化>KVM
 06/27 qcow2仮想DISK作成
仮想化>KVM
 06/13 NWの設定
仮想化>VMwareEsxi
 06/13 IPアドレスの変更
仮想化>VMwareEsxi
 06/12 自動ssh
Unix全般>シェル>Bash
 06/12 diffプログラミング
Python
Google