iPentec.com  /  Doc  /  CSS  /  position プロパティ

目次

文字や枠の表示位置を指定する - CSS

スタイルシートを用いて文字や枠の表示位置を指定するコードを紹介します。

概要

表示位置はCSSのTop,Leftプロパティで指定できます。枠の大きさはwidth,heightプロパティで設定できます。Positionプロパティにより表示位置のモード指定を選択できます。

以下では、Positionプロパティのモードの違いによる表示の変化を確認します。

Positionプロパティの動作

  • position:static
    • 既定の位置に配置されます。top,leftプロパティは無視されます。
  • position:relative
    • 相対位置に配置されます。top,leftプロパティの位置はPosition:staticの場合に表示される位置を基準とした座標になります。
  • position:absolute
    • 絶対座標の位置に配置されます。top,leftプロパティを指定しない場合はtop:0,left:0 の座標となります。
  • position:fixed
    • 絶対座標の位置に配置されます。top,leftプロパティを指定しない場合はtop:0,left:0 の座標となります。absoluteモードとの違いは、fixedはスクロールした場合も同じ位置に固定され続けます。

Position:static

コード1

position-static.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="position-static.css">

</head>
<body>
  <div class="box01">box1</div>
  <div class="box02">box2</div>
  <div class="box03">box3</div>
  <div class="box04">box4</div>
</body>
</html>
position-static.css
.box01 {
  background-color:#1995ee;
  position:static;
  width:64px;
  height:64px;
}

.box02 {
  background-color:#ff6a00;
  position:static;
  width:64px;
  height:64px;
}

.box03 {
  background-color:#ffd800;
  position:static;
  width:64px;
  height:64px;
}

.box04 {
  background-color:#26b138;
  position:static;
  width:64px;
  height:64px;
}

実行結果

上記のHTMLファイルを表示します。下図の表示結果となります。

コード2

以下のコードを記述します。
position-static2.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="position-static2.css">

</head>
<body>
  <div class="box01">box1</div>
  <div class="box02">box2</div>
  <div class="box03">box3</div>
  <div class="box04">box4</div>

</body>
</html>
position-static2.css
.box01 {
  background-color:#1995ee;
  position:static;
  width:64px;
  height:64px;

  left:64px;
  top:24px;
}

.box02 {
  background-color:#ff6a00;
  position:static;
  width:64px;
  height:64px;

  left:32px;
  top:48px;
}

.box03 {
  background-color:#ffd800;
  position:static;
  width:64px;
  height:64px;

  left:256px;
  top:128px;
}

.box04 {
  background-color:#26b138;
  position:static;
  width:64px;
  height:64px;

  left:192px;
  top:144px;
}

実行結果

上記のHTMLファイルを表示します。下図の表示結果となります。スタイルシートでleft,topを指定していますが、無効になっていることがわかります。

Position:relative

コード1

position-relative.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="position-relative.css"></head>
<body>
  <div class="box01">box1</div>
  <div class="box02">box2</div>
  <div class="box03">box3</div>
  <div class="box04">box4</div>

</body>
</html>
position-relative.css
.box01 {
  background-color:#1995ee;
  position:relative;
  width:64px;
  height:64px;
}

.box02 {
  background-color: #ff6a00;
  position: relative;
  width: 64px;
  height: 64px;
}

.box03 {
  background-color:#ffd800;
  position:relative;
  width:64px;
  height:64px;
}

.box04 {
  background-color:#26b138;
  position:relative;
  width:64px;
  height:64px;
}

実行結果

上記のHTMLファイルを表示します。下図の表示結果となります。Position:staticと同じ表示結果になっています。。

コード2

position-relative2.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="position-relative.css"></head>
<body>
  <div class="box01">box1</div>
  <div class="box02">box2</div>
  <div class="box03">box3</div>
  <div class="box04">box4</div>

</body>
</html>
position-relative2.css
.box01 {
  background-color:#1995ee;
  position:relative;
  width:64px;
  height:64px;

  top:24px;
  left:36px;
}

.box02 {
  background-color:#ff6a00;
  position:relative;
  width:64px;
  height:64px;

  top:0px;
  left:0px;
}

.box03 {
  background-color:#ffd800;
  position:relative;
  width:64px;
  height:64px;

  top:0px;
  left:0px;
}

.box04 {
  background-color:#26b138;
  position:relative;
  width:64px;
  height:64px;

  top:0px;
  left:0px;
}

実行結果

上記のHTMLファイルを表示します。下図の表示結果となります。Position:staticの場合に表示される位置を基準として、left,topプロパティの値で指定された位置に表示されます。

Position:absolute

コード1

position-absolute.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="position-absolute.css" />
</head>
<body>
  <div class="box01">box1</div>
  <div class="box02">box2</div>
  <div class="box03">box3</div>
  <div class="box04">box4</div>
</body>
</html>
position-absolute.css
.box01{
  width:64px;
  height:64px;
  background-color:#2baff2;
  position:absolute;
}

.box02{
  width:64px;
  height:64px;
  background-color:#2bf28a;
  position:absolute;
}

.box03{
  width:64px;
  height:64px;
  background-color:#ea81b4;
  position:absolute;
}

.box04{
  width:64px;
  height:64px;
  background-color:#ed9b2a;
  position:absolute;
}

実行結果

上記のHTMLファイルを表示すると下図の表示結果となります。

コード2

position-absolute2.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="position-absolute2.css" />
</head>
<body>
  <div class="box01">box1</div>
  <div class="box02">box2</div>
  <div class="box03">box3</div>
  <div class="box04">box4</div>
</body>
</html>
position-absolute2.css
.box01{
  width:64px;
  height:64px;
  background-color:#2baff2;

  position:absolute;
  left:16px;
  top:32px;
}

.box02{
  width:64px;
  height:64px;
  background-color:#2bf28a;

  position:absolute;
  left:24px;
  top:48px;
}

.box03{
  width:64px;
  height:64px;
  background-color:#ea81b4;

  position:absolute;
  left:96px;
  top:48px;
}

.box04{
  width:64px;
  height:64px;
  background-color:#ed9b2a;

  position:absolute;
  left:106px;
  top:32px;
}

実行結果

上記のHTMLファイルを表示します。下図の表示結果が得られます。画面の左上を基準点としてTop,Leftプロパティで指定された位置に要素が表示されます。

コード3 : スクロール時の動作

position-absolute3.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="position-absolute3.css" />
</head>
<body>
    <div class="box01">box1</div>
    <div class="box02">box2</div>
    <div class="box03">box3</div>
    <div class="box04">box4</div>

  <div style="height:250px; border:dashed 2px #C0C0C0;">枠1です。</div>
  <div style="height:250px; border:dashed 2px #C0C0C0;">枠2です。</div>
  <div style="height:250px; border:dashed 2px #C0C0C0;">枠3です。</div>
  <div style="height:250px; border:dashed 2px #C0C0C0;">枠4です。</div>
  <div style="height:250px; border:dashed 2px #C0C0C0;">枠5です。</div>
  <div style="height:250px; border:dashed 2px #C0C0C0;">枠6です。</div>
  <div style="height:250px; border:dashed 2px #C0C0C0;">枠7です。</div>
  <div style="height:250px; border:dashed 2px #C0C0C0;">枠8です。</div>
  <div style="height:250px; border:dashed 2px #C0C0C0;">枠9です。</div>
  <div style="height:250px; border:dashed 2px #C0C0C0;">枠10です。</div>

  </body>
</html>
position-absolute3.css
.box01{
  width:128px;
  height:128px;
  background-color:#2baff2;
  position:absolute;
  left:64px;
  top:32px;
}

.box02{
  width:128px;
  height:128px;
  background-color:#2bf28a;
  position:absolute;
  left:32px;
  top:144px;
}

.box03{
  width:128px;
  height:128px;
  background-color:#ea81b4;
  position:absolute;
  left:144px;
  top:255px;
}

.box04{
  width:128px;
  height:128px;
  background-color:#ed9b2a;
  position:absolute;
  left:255px;
  top:160px;
}

実行結果

上記のHTMLファイルを表示します。下図の実行結果が得られます。


画面をスクロールすると、枠もスクロールされてしまうことがわかります。

コード4 : ネストする場合

position-absolute-nest.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="position-absolute-nest.css" />
</head>
<body>
  <div class="box-outer">
    <div class="box-inner-01">box2</div>
    <div class="box-inner-02">box3</div>
  </div>

</body>
</html>
position-absolute-nest.css
.box-outer {
  width:256px;
  height:256px;
  background-color:#E0E0E0;

  position:absolute;
  left:128px;
  top:64px;
}

.box-inner-01{
  width:48px;
  height:48px;
  background-color:#2bf28a;

  position:absolute;
  left:24px;
  top:48px;
}

.box-inner-02{
  width:48px;
  height:48px;
  background-color:#ea81b4;

  position:absolute;
  left:64px;
  top:32px;
}

実行結果

上記のHTMLファイルを表示します。下図の実行結果が得られます。

Position:fixed

コード1 : Top,Leftを指定しない場合

position-fixed.css
.box01{
  width:128px;
  height:128px;
  background-color:#2baff2;
  position:fixed;
}

.box02{
  width:128px;
  height:128px;
  background-color:#2bf28a;
  position:fixed;
}

.box03{
  width:128px;
  height:128px;
  background-color:#ea81b4;
  position:fixed;
}

.box04{
  width:128px;
  height:128px;
  background-color:#ed9b2a;
  position:fixed;
}
position-fixed.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="position-fixed2.css" />
</head>
<body>
    <div class="box01">box1</div>
    <div class="box02">box2</div>
    <div class="box03">box3</div>
    <div class="box04">box4</div>
  </body>
</html>
実行結果
上記のHTMLファイルを表示します。下図の実行結果が得られます。一見すると、position:absolute;の場合と同じ表示結果になります。

コード2 : Top,Leftを指定

position-fixed2.css
.box01{
  width:128px;
  height:128px;
  background-color:#2baff2;
  position:fixed;
  left:64px;
  top:32px;
}

.box02{
  width:128px;
  height:128px;
  background-color:#2bf28a;
  position:fixed;
  left:32px;
  top:144px;
}

.box03{
  width:128px;
  height:128px;
  background-color:#ea81b4;
  position:fixed;
  left:144px;
  top:255px;
}

.box04{
  width:128px;
  height:128px;
  background-color:#ed9b2a;
  position:fixed;
  left:255px;
  top:160px;
}
position-fixed2.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="position-fixed2.css" />
</head>
<body>
    <div class="box01">box1</div>
    <div class="box02">box2</div>
    <div class="box03">box3</div>
    <div class="box04">box4</div>

    <div style="height:250px; border:dashed 2px #C0C0C0;">枠1です。</div>
    <div style="height:250px; border:dashed 2px #C0C0C0;">枠2です。</div>
    <div style="height:250px; border:dashed 2px #C0C0C0;">枠3です。</div>
    <div style="height:250px; border:dashed 2px #C0C0C0;">枠4です。</div>
    <div style="height:250px; border:dashed 2px #C0C0C0;">枠5です。</div>
    <div style="height:250px; border:dashed 2px #C0C0C0;">枠6です。</div>
    <div style="height:250px; border:dashed 2px #C0C0C0;">枠7です。</div>
    <div style="height:250px; border:dashed 2px #C0C0C0;">枠8です。</div>
    <div style="height:250px; border:dashed 2px #C0C0C0;">枠9です。</div>
    <div style="height:250px; border:dashed 2px #C0C0C0;">枠10です。</div>
  </body>
</html>
実行結果
上記のHTMLファイルを表示します。下図の実行結果が得られます。


画面をスクロールしても、position:fixedに設定した枠は位置が固定されていることがわかります。


著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

掲載日: 2013-12-13
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.