文字や枠の表示位置を指定する - 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
<!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>
.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
以下のコードを記述します。
<!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>
.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
<!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>
.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
<!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>
.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
<!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>
.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
<!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>
.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 : スクロール時の動作
<!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>
.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 : ネストする場合
<!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>
.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を指定しない場合
.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;
}
<!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を指定
.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;
}
<!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の作業もする。