【22-2】要素を絶対位置に指定する position: absolute

前回は、positionプロパティと、top、right、bottom、leftプロパティの紹介。
そして、positionプロパティの値のうちの staticrelative を見てみました。
★前回の記事はこちら→【22-1】位置指定の positionと top, right, bottom, leftプロパティ

今回は positionプロパティの値の中でも一番良く使う absolute を見ていきましょう。
これは切り貼りするように 要素を好きな位置に置くことができます。

本日のINDEX
  1. position: absolute の親要素には position指定が必要
  2. 表示は上の方にしたいけど、さほど重要じゃないモノに
  3. プルダウンメニューに position: absolute
  4. 要素の装飾に position: absolute はよく使います
    1. 画像がめくれたようなシャドウをつけるアレも position: absolute
    2. 見出しのアクセントにも大活躍な position: absolute

positionプロパティ は、記事を4つに分けました。

【22-1】位置指定の positionと top, right, bottom, leftプロパティ
positionプロパティの値と、top, right, bottom, leftプロパティの値の紹介。positionプロパティのうち static, relative を使います。
【22-2】要素を絶対位置に指定する position: absolute ←今日はココ
position: absolute を使う時のコツと、コレを使った要素の装飾をいくつか。
【22-3】要素を固定位置に指定する position: fixed
position: fixed の特徴や 使用例、<header> を固定位置にした時のページ内リンクのズレの解消など。
【22-4】スクロールしていくとピタッと固定する position: sticky
position: sticky はまだ草案の値ですが、Chrome、Safari、Firefox では対応しています。

参考:
こちら↓はドラフト。
CSS Positioned Layout Module Level 3 -- W3C Working Draft, 17 May 2016
勧告済みの CSS2 はこちら↓
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
W3C Recommendation 07 June 2011, edited in place 12 April 2016 to point to new work -- 9 Visual formatting model

position: absolute の親要素には position指定が必要

position: absolute は、絶対位置指定と言います。
absolute(アブソリュート)とは「絶対的な」といった意味。

この指定をされた要素は、他の要素との位置関係から切り離され、本来置かれる場所のスペースは詰められ、親以外の他の要素とは互いに位置的な影響を受けなくなります。
そして親要素からの上下左右の距離で位置が決められます。

親要素に position: static 以外の position指定をすることで、position: absolute は それを親要素と認識して機能します。これ重要。
たいていの場合は position: relative を指定してあげればOK。
この場合の親は 一番近い先祖の要素になるので、すぐ上の親でなくても、お爺さん、ひい爺さん、ひいひいひい爺さん要素でもOK。
言い換えれば、先祖で position指定されているものが親になるってことです。

そして、特に指定しなければ、親要素は <body> になります。
先祖に position指定されている要素が無ければ、親は <body>要素になるというルールです。

サンプルを見ていきましょう。
下のサンプルはまだ何にも position指定してません。<div>要素を3つ並べています。

1
2
3

3番目のボックスに「position:absolute; bottom:30px; left:30px」を指定してみると...ボックスが無くなりましたね。でも違うんです。一番下にいるんですよ。
(お手数ですが、このページの一番下へスクロールしてみると左の方にいます。戻ってきてね)

<div class="smp1">
 <div class="smp1box">1</div>
 <div class="smp1box">2</div>
 <div class="smp1box p-absolute">3(<a href="#">↑サンプルの本文へ戻る</a>)</div>
</div>

<style>
div.smp1 {margin:0; 
	padding:10px;
    border:solid 1px #ccc;
    font-size:0}
.smp1box {
	-webkit-box-sizing: border-box;
    box-sizing: border-box; /*box-sizing*/
	display:inline-block; /*横並びに*/
	width:25%; /*幅を25%にしてるので、親が<body>になって大きくなったら幅も広がります*/
	margin:0 10px 0 0;
	background:#FC9;
	text-align:center;
	padding:1em;
	font-size:large}
.p-absolute {
	position:absolute;
    bottom:30px;
    left:30px}
</style>

これは親要素を指定していない(先祖の要素に position指定されたものが無い)ので、自動的に親要素が <body> になっているから、それを基準に「bottom:30px; left:30px」の位置に表示されたんです。
★本サイトは footer部分に FC2の広告タグがあって、正確に「bottom:30px」にはなってませんけどね。わかりにくくてごめん。

では、3つの <div> を囲んでいる 親要素に position: relative を指定します。
static 以外で一番無難な relative を指定。同時に top や leftプロパティなどを指定しなければ親要素の位置は変わりません。

<div class="smp2">
 <div class="smp1box">1</div>
 <div class="smp1box">2</div>
 <div class="smp1box p-absolute">3</div>
</div>

<style>
div.smp2 {
	margin:0;
    padding:10px;
    border:solid 1px #ccc;
    font-size:0;
	position: relative}

/*これ以降の指定はさっきのと同じです*/
</style>

プレビューはこちらです。3番目のボックスの色も、わかりやすいように変えてみました。
ちゃんと親要素のエッジから、bottom: 30px、left: 30px になっています。

1
2
3

表示は上の方にしたいけど、さほど重要じゃないモノに

position: absoluteを どんな時に使うか なんですが、やはり HTML上での位置とプレビューの位置を変えられることが一番の特徴なので、アクセシビリティ的なことに利用されるのが多いかと思います。

例えば、レイアウト的には 上の方に表示したいけど、内容的にはさほど重要じゃないので HTMLでは下のほうに書きたいものに、position: absolute を使います。
音声読み上げソフトだと、毎ページ最初に同じことを読み上げてウザイですからね。

プルダウンメニューに position: absolute

以前の記事【17-1】displayプロパティでボックスの表示形式を自由に変えよう の display: none の箇所でも紹介しましたが、position: absolutedisplay: none を使って、CSSだけでプルダウンメニューを作れます。

ただし「:hover」を使うのでPCサイトのみ。
スマホの場合のプルダウンメニューは、jQueryの「.toggleClass」などを使うとイイですね。

マウスオーバーしてみてください。

<ul>要素を入れ子にし、子供のほうの<ul> をプルダウンするメニューにします。
これを position: absolute で親メニューの真下に位置調整し、普段は display: none で非表示に、親メニューをマウスオーバーしたら display: block で表示するという仕組みです。

<ul id="smp2_4">
  <li><a href="#">MENU1</a>
    <ul>  <!-- li要素の中に ulを入れ子にします。これが肝心-->
      <li><a href="#">Sub menu1</a></li>
      <li><a href="#">Sub menu2</a></li>
      <li><a href="#">Sub menu3</a></li>
    </ul>
  </li>
</ul>
ul#smp2_4 {
	position:relative; /*親のulにposition:relativeを指定しておきます*/
	z-index:10;        /*他のコンテンツより上のレイヤーにしておきます。*/
	margin:0;
	padding:0}
ul#smp2_4 li {         /*子孫セレクタで、すべてのli(孫も)への指定です*/
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
	display:inline-block; /*親のliは横に並ぶ指定です*/
	text-align:center;
	line-height:1em;
	margin:0 5px 0 0;
	padding:0;
	width:110px;
	background:#fdf5a0;
	border-radius:0.5em}
ul#smp2_4 li a {display:block; padding:1em}
ul#smp2_4 li ul li a {display:block; padding:0.5em 1em}
ul#smp2_4 li ul {
	display:none;      /*通常は非表示にしておきます*/
    position:absolute; /*絶対位置指定すれば、表示されても他の要素に影響を与えずに済みます*/
	top:2.5em;
	margin:0;
	padding:0}
ul#smp2_4 li ul li {
	display:block;     /*サブメニューのliはブロックレベルに戻して縦に並べます*/
	border:solid 2px #fdf5a0;
	border-top:none;
	background:#fff;
	border-radius:0}
ul#smp2_4 li ul li:last-child {border-radius:0 0 0.5em 0.5em}
ul#smp2_4 li:hover > ul {
	display:block} /*親のliにマウスオーバーしたら、その中のulを表示します*/

要素の装飾に position: absolute はよく使います

position: absolute は要素の装飾にもよく使われます。
他の要素に影響を与えずに、好きな位置に要素を表示できるので、切り貼りのような感覚で使えます。

画像がめくれたようなシャドウをつけるアレも position: absolute

画像がめくれたようなシャドウってありますよね。
これは 擬似要素「::after」「::before」にボックスシャドウを付けて、position: absolute で強制的に下のほうに持っていってるんです。

上のサンプルでは、擬似要素「::before」で左のシャドウを作り「position: absolute; bottom: 7px; left: 15px」で親の左下に配置。「transform: rotate(-3deg)」で時計逆回りに3°回転しています。
右半分のシャドウは 擬似要素「::after」で同様に作って、時計回りに3度回転させています。

<div class="smp3"><img src="image.jpg"></div>
.smp3 {
	line-height:0;
	position:relative;  /*親要素にposition:relative*/
	width:60%;
	z-index:1}
.smp3 img {width:100%;  height:auto}
.smp3::before, .smp3::after {  /*「::before」「::after」両方に指定。親のdivの疑似要素です*/
	content: "";
	box-shadow: 0 0 8px 10px rgba(0,0,0,0.3);
	width: 50%; /*幅や高さのないので、幅のみ親要素の50%に伸ばします*/
	position: absolute;
	z-index:-1;
	bottom: 7px}  /*親の下から7pxの位置にします*/
.smp3::before{  /*疑似要素before(左側のシャドウ)*/
	left: 15px;  /*親の左から15px*/
	transform:rotate(-3deg)}  /*時計逆回りに3度回転*/
.smp3::after{  /*疑似要素after(右側のシャドウ)
	right: 15px;  /*親の右から15px*/
	transform:rotate(3deg)}  /*時計回りに3度回転*/

7行目で「.smp3::before, .smp3::after」というセレクタがありますが、
これは「.smp3::before」というセレクタと「.smp3::after」というセレクタを「,(カンマ)」で連結させて、2つ同時に指定しています。
共通する指定がある場合、このようにセレクタを連結させると、同じことを何度も書かなくて済みます。3つでも4つでもいくつでも連結することができます。

box-shadow の値は「0 0 8px 10px rgba(0,0,0,0.3)」になっていますが(9行目)
これは「右への水平方向の移動」「 下への垂直方向の移動」「ぼかす幅」「拡張(縮小)させる幅」 「色」の順になってます。
ここでは、右や下へは動かさず、ぼかしの幅を8px、拡張幅を10px、色は黒の透明度0.3にしてます。
box-shadow の詳細は [18-2] CSS3で、ボックス要素にシャドウをつけよう(box-shadow)を、
色指定は、[14-4] 色指定について(16進数, 色名, 10進数, HSL, accessibility)をご覧ください。

擬似要素「::before」「::after」は、float の Clearfix にも使いましたが、指定した要素の 内側インライン要素としてコンテンツを生成します。

★擬似要素については、【3】id とか classって何?(セレクタの「種類」を知っておこう)でざっくりメモっています。
(たいして詳しくないですけどね。疑似要素や擬似クラスについては、いずれ ちゃんとまとめます)

上のサンプルのコードでは z-indexプロパティも使っていますね(5、12行目)
これはシャドウを画像の下に持って来るための指定です。コレが無いと うまくいきません。
まず親要素divに新しく「重なりの前後関係(スタック コンテキスト)」を作り、シャドウ(疑似要素)にそれより低いスタックレベルを与えて、シャドウだけ後ろに持って行ってます。(<img>要素は親と同じスタックレベル「1」のままです)
って、何言ってんだかサッパリですよね。z-indexについては後日詳細に説明します。

ちなみに、サンプルの<img>要素に「visibility: hidden」を指定してみると、こんな舞台裏です。
こんなもんが画像の下にあるだけで、ちょっとめくれて見えるって、人間の目って不思議ですね。

見出しのアクセントにも大活躍な position: absolute

見出しやメニュー部分の装飾にもよく position: absolute が使われます。やっぱり擬似要素「::after」「::before」を同時に使うんですけどね。
見出しの装飾のCSSをいくつかご紹介しときます。原理がわかればいろいろアレンジできておもしろいよね。

四角を2つアクセントに

リボンっぽい見出し

リボンっぽいクリップ付きの見出し

吹き出しっぽい見出し

四角を2つアクセントに

<div class="smp4">
<h3 class="hlsmp1">四角を2つアクセントに</h3>
</div>
.smp4 {margin:0; padding:30px; border:solid 1px #ccc}
.smp4 h3 {margin:0 0 30px; font-size:20px}

h3.hlsmp1 {
	position:relative;
	padding:0 0 .2em 1.5em;
	border-bottom:dotted 2px #d682a9}
h3.hlsmp1::before, h3.hlsmp1::after {
	content: "";
    position:absolute;}
h3.hlsmp1::before{  /*大きいほうの四角*/
	background: #e6b2ca;
	bottom:1em;
	left:.4em;
	height:13px;
	width:13px;
	transform: rotate(45deg)}
h3.hlsmp1::after{  /*小さいほうの四角*/
	background:#d682a9;
	bottom:.4em;
	left:.2em;
	height:8px;
	width:8px;
	transform:rotate(15deg)}

リボンっぽい見出し

<div class="smp4">
<h3 class="hlsmp2">リボンっぽい見出し</h3>
</div>
.smp4 {margin:0; padding:30px; border:solid 1px #ccc}
.smp4 h3 {margin:0 0 30px; font-size:20px}
h3.hlsmp2 {
	position:relative;
	background:#b2c5e6;
	color:white;
	margin-left:-40px;  /*ネガティブマージンで左にはみ出させます*/
	margin-right:-40px;  /*同じく右にはみ出させます*/
	padding:.5em 2em;
	box-shadow: 0 1px 2px rgba(73, 113, 182,.5)}  /*立体感を出すために*/
h3.hlsmp2::before, h3.hlsmp2::after {
	content: "";
	position:absolute;
	top:100%;  /*上辺がh3の一番下辺になります*/
	width:0;
	height:0;
	border:5px solid;
	opacity:0.5}
h3.hlsmp2::before {  /*リボンの裏側が見えてるっぽい小さい三角形の左側のやつ*/
	left:0;
    border-color:#4971b6 #4971b6 transparent transparent} /*上と右だけ色付き、他は透明*/
h3.hlsmp2::after {  /*リボンの裏側が見えてるっぽい小さい三角形の右側のやつ*/
	right:0;
    border-color:#4971b6 transparent transparent #4971b6} /*上と左だけ色付き、他は透明*/

リボンの裏側が見えてるっぽい小さい三角形は、幅や高さのないボックスに border を指定することで作っています。

小さい三角形を作る原理は 【13-1】borderと borderのショートハンド で説明しています。

リボンっぽいクリップ付きの見出し

<div class="smp4">
<h3 class="hlsmp3">リボンっぽいクリップ付きの見出し</h3>
</div>
.smp4 {margin:0; padding:30px; border:solid 1px #ccc}
.smp4 h3 {margin:0 0 30px; font-size:20px}
h3.hlsmp3 {
	position:relative;
	background: #d1f0e2;
	box-shadow: 0 0 0 4px #d1f0e2;  /*borderよりも輪郭をはみ出させています*/
	color:white;
	border-radius: 8px;
	border:dashed 2px #f0faf5;
	padding:.5em;
	padding-left:1em}
h3.hlsmp3::before, h3.hlsmp3::after {
	content: "";
	position:absolute}
h3.hlsmp3::before {
	top:12px;
    left:-10px;
    width:15px;
    height:20px;
    background: #88ceae}  /*リボンの色*/
h3.hlsmp3::after{
    top: 12px;
    left:-5px;
    width: 0;
    height: 0;
    border:10px solid;
    border-color:#88ceae transparent}  /*リボンの端っこ(上下が色付き、左右は透明)*/

リボンの端っこの三角形2つは、幅や高さのないボックスに border を指定することで作っています。

小さい三角形を作る原理は 【13-1】borderと borderのショートハンド で説明しています。

吹き出しっぽい見出し

<div class="smp4">
<h3 class="hlsmp4">吹き出しっぽい見出し</h3>
</div>
.smp4 {margin:0; padding:30px; border:solid 1px #ccc}
.smp4 h3 {margin:0 0 30px; font-size:20px}
h3.hlsmp4 {
	position:relative;
	background: #f1decb;
	color:white;
	padding:.5em 1em;
	border-radius:20px}
h3.hlsmp4::after{
	content: "";
	position:absolute;
	width:0;
    height:0;
	top:100%;
	left:2em;
	border:8px solid transparent;
    border-top:8px solid #f1decb}

吹き出しの小さい三角形は、幅や高さのないボックスに border を指定することで作っています。

小さい三角形を作る原理は 【13-1】borderと borderのショートハンド で説明しています。

次回予告

position: absolute って慣れるとオモシロイことがいろいろできて便利ですね。
使い方のコツは「親要素にしたいヤツに position 指定をする」ことですかね。

さて次回は、position: fixed を使ってみましょう。
これは、要素を画面(ビューポート)に対して固定位置に指定します。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.