絶対配置とは

HTLM は、基本的に Web ブラウザには記載された順番に上から表示されます。CSS で、絶対配置の指定をすると、HTLM の順番とは別に、Web ブラウザの指定した位置に表示させることが出来ます。

CSS 絶対配置の例

絶対配置の例を示します。メニューバーなどは、Web ブラウザの上のほうなど、目立つ位置に配置したいものです。絶対配置を使わない場合は、ブラウザの上の方に表示する場合、HTLM の最初の方に記述する必要があります。
人間が見る場合、これでもぜんぜん問題はありませんが、検索エンジンなどが見た場合、そのページの本文の前に、メニューバーがありますので、順番に読んでいくと、本文になかなかたどり着けません。検索エンジンには、そのページの本文(そのページの内容)に早くたどり着いてもらった方が、着実にキーワードを拾ってもらうことが出来ます。
そこで、CSS の 絶対配置を使えば、HTLM では、本文の後に書いたメニューを Web ブラウザ上では、本文より前の位置に表示することが出来ます。
サンプルを、クリックして、ご確認ください。
なお、ドキュメントタイプ( Document Type Definition 以下 DTD )の指定をしてありませんので、Web ブラウザによって、表示の位置などが変わります。全ての Web ブラウザで表示位置を合わせたい場合、DTD を指定して、DTD にあわせた CSS の指定をしてください。
サンプル: CSS 絶対配置のサンプル
ソースコードは次の通りです。

CSS 絶対配置の HTLM ソースコード

<html>
<head>
<link rel="stylesheet" href="css_abslayt.css" type="text/css">
<title>CSS で絶対配置</title>
</head>
<body>

<h1>見出し</h1>

<div id="main">
<p>
絶対配置の例です。<br/>
HTLM では、メニューは、この次に書いてあります。
</p>
</div>

<div id="nav">
<h2><a href="#">メニュー1</a></h2>
<h2><a href="#">メニュー2</a></h2>
<h2><a href="#">メニュー3</a></h2>
</div>

</body>
</html>
 

css_abslayt.css のソースコード

/* 絶対配置 */

/* ナビバー設定 */
/* h2幅121+2×2 */
#nav    {
    width:375px;    /* ナビバー全体の幅 */
    position:absolute;/* 絶対位置指定 */
    top:40px;        /* 配置する上からのピクセル数 */
    left:0px;
    }
#nav h2{
    margin:0px;
    float:left;
    }

/* mainの位置指定 */
h1    {
    width:375px;
    height:38px;
    border:1px solid green;
    background-color:lime;
}
#main    {
    width:750px;
    margin-top:40px;  /*h1とナビのスペースが入る場所*/
}


/* ブラウザの body 初期設定をキャンセル */
body    {
    margin:0px;
    padding:0px;
}    
/* メニューの装飾 */
#nav h2 a{
    display:block;
    width:121px;
    background-color:#eeffcc;
    border:2px solid;
    border-color:#efffdd #00aa00 #00aa00 #efffdd;
    text-align:center;
    text-decoration:none;
    font-size:14px;
    color:#115533;
    font-weight:900;
    }
#nav h2 a:hover{
    background-color:#ffffd8;    /* マウスオンの背景色 */
    }
#nav h2 a:active{
    background-color:#ffcc77;    /* マウスクリックの背景色 */
    }

この例では、<div class="nav"> に対して、絶対してをしています。<div id="nav"> の親要素は、<body> になりますので、

    position:absolute;/* 絶対位置指定 */
    top:40px;        /* 配置する上からのピクセル数 */
    left:0px;

の指定で、body の上から 40px 、左から 0px の位置に配置されます。このままですと、絶対配置された位置に書いてある <div id="main"> の HTLM は隠れてしまいますので、

    margin-top:40px;

というように指定して、<div id="main"> の 表示位置を下げて隙間を空けておきます。ポイントは、ここまでです。

/* ブラウザの body 初期設定をキャンセル */

から下の記述は、絶対配置とは直接関係ありませんので、興味のある方はよく読んで理解してみましょう。

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

ロリポップ! レンタルサーバーは、高機能なのに236円/月~
月額125円からの「さくらのレンタルサーバ
レンタルサーバー

スポンサード リンク

このページは 

トップページ > CSS > 絶対配置