【22-3】要素を固定位置に指定する position: fixed

最終更新日:2017年11月16日  (初回投稿日:2017年08月15日)

今回は position: fixed を使ってみます。
前々回は、positionプロパティ全体の「」と、デフォルト値の position: static、 position: relative を使ってみました。そして前回は、position: absolute を使ってみましたね。
今回の position: fixed もよく利用する便利な指定です。

本日のINDEX
  1. position: fixed は「画面」に対しての固定位置
    1. <iframe> による position: fixed のサンプル
  2. スクロールしても固定させたいモノに position: fixed
    1. ページのトップへ戻るボタンに position: fixed
    2. <header> や <footer> の固定に position: fixed
    3. <header> を固定位置にした時のページ内リンクのズレを解消する

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 はスクロールしていくと必要なところで要素がピタッと止まります。

参考:
こちら↓はドラフト。
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: fixed は「画面」に対しての固定位置

position: fixed は、固定位置指定と言われます。
fixed(フィックスト)とは「固定的な」といった意味。

この指定をされた要素は position: absolute と同じように他の要素との位置関係から切り離され、スペースも詰められ、他の要素とお互いに位置的な影響を受けなくなります。

ちなみに、W3Cの仕様書で Absolutely positioned elements(絶対位置指定された要素)という呼び方(カテゴライズ的な)があるんですが、これにはこの position: fixed を指定された要素も含まれます。
他のCSSプロパティを使う条件で「絶対位置指定された要素に適用」ということがあるので一応書いておきます(めったに無いけど。clipプロパティだけかも?)

絶対位置指定された要素(Absolutely positioned elements)とは、
position: absolute を指定された要素か、position: fixed を指定された要素です。両方とも、他の要素との位置関係から切り離されるからでしょうね。

position: absolute との違いは、
位置決めの基準になるものが要素ではなく画面(ビューポート)なこと。

position: absolute だと、特に親要素の指定をしなければ、基準は <body>でしたね。
position: fixed は <body> のもっと外側(って言うのかな?)。<body> にマージン指定とかしてたら、そのマージンも含めた画面(ビューポート)全体が親になるんです。

画面(ビューポート)は、具体的には、
PCサイトなら、ブラウザのウィンドウ
スマホやタブレットなら ディスプレイ内の表示部分

★そして <iframe>要素を使って表示したら<iframe>の表示部分もビューポートになります。
(これは次の項でサンプルを紹介します↓)

<iframe>要素に関しては、こちらをご覧ください ↓
[63] インライン・フレームで 他のHTMLファイルを組み込もう <iframe>

で、そのビューポートの上辺、右辺、下辺、左辺を基準に top, right, bottom, leftプロパティ で指定した位置に固定表示されるので、画面をスクロールしても動かなくなります

<iframe> による position: fixed のサンプル

<iframe> によるサンプルを作ってみました。

下の枠が <iframe>要素でできています。(この枠内が position: fixed の位置基準になります)
左側の「FIXED」と書かれたボックスposition: fixed を指定しています。
スクロールしてみてください。ビューポート(<iframe> の範囲)に対して固定表示されています。

上の iframe 部分のHTML

<iframe src="http://ex.com/sample/fixed_ifrm.html" width="100%" height="220px"></iframe>

iframe 内に表示したHTMLファイルのソースです(CSSはhead部分に書いてます)。

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  
  <style>
html,body,div,span,p{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline}
body {
	background:#fbfff5;
    color:#666;
    font:14px/1.6 Century Gothic,'Hiragino Kaku Gothic ProN', Meiryo, sans-serif}
#container {
    width:650px;
    padding-left:130px}
#container p {
    margin:2em 1em 2em 0}
#container p.height500 {height:500px}
#fixed {
    position:fixed;
    bottom:55px;
    left:20px;
    background:#c69;
    color:white;
    font-weight:bold;
    width:90px;
    height:90px;
    line-height:90px;
    border-radius:50%;
    text-align:center}
  </style>
  
  </head>
  <body>
    <div id="container">
      <p>左側の「FIXED」と書かれたボックスは....</p>
      <p>このサンプルは &lt;iframe&gt;要素で...</p>
      <p class="height500">フレーム内をスクロールすると、...</p>
    <div id="fixed">FIXED</div> 
    </div>
  </body>
</html>

固定位置にした要素の botttom: 55px は(26行目)、HTMLファイルの「bottom」でなく、<iframe>の領域での「bottom」の位置になっているのがわかります。

スクロールしても固定させたいモノに position: fixed

以降は、position: fixed の使用例です。
ページをスクロールしても、画面の固定位置にいて欲しいブロックに使用します。

ページのトップへ戻るボタンに position: fixedに

よく使うのが、「ページのトップへ戻るボタン」の表示です。
画面の端っこに固定表示しておくと、上のほうに戻りたいときに便利だから。

本サイトも、PCページだけですが、position:fixed を使って右下に固定表示しています。

HTML

<div id="sidefloat">
  <div id="gototop"><a href="#container" title="ページの最上部へ"></a></div>
  <div id="gotobtm"><a href="#footer" title="ページの最下部へ"></a></div>
</div>

CSS

#sidefloat {
	height: 100px;
	width: 110px;
	position:fixed;
	right:0;
	bottom:50px}
#sidefloat #gototop a,
#sidefloat #gotobtm a {
	height:50px;
	width:110px;
	display:block;
    opacity:.65}
#sidefloat #gototop a {background: url(image/sidebtn_a.gif) no-repeat 0px 0px}
#sidefloat #gotobtm a {background: url(image/sidebtn_a.gif) no-repeat 0px -50px}
#sidefloat #gototop a:hover,
#sidefloat #gotobtm a:hover {opacity:1}

こちら↓は「*Web Design 覚え書き*」の ページのトップへ戻るボタン。これも position:fixed を使っています。

これは jQuery を使って、少しスクロールするとふわっと現れるボタンです。ページの一番上を表示していたらボタンは見えなくなります。
作り方をざっとこちら↓に書いていますので、ご興味あったらご覧ください。
スクロールしたらフェイドインで表示される「TOPへ戻る」ボタンをjQueryで | *Web Design 覚え書き*

<header> や <footer> の固定に position: fixed

この他よく使うのは、ページレイアウトで <header> や <footer> を固定にするときなどですかね。

これはサンプルを作ってみたので ご覧ください。
(画像クリックで別ウィンドウで開きます)

このサンプルページの CSSの一部です。(HTML や、CSSの全体はサンプルでご覧ください)

header, footer {
    width:100%;
    position:fixed;
    background:rgba(0,0,0,.5);
    color:#fff;
    z-index:11}
header {
    top:0;
    padding:10px}
footer {
    bottom:0;
    padding:3px}

<header> も <footer> も、幅は左右いっぱい(width:100% 2行目)にしていますので、left や rightプロパティの指定はしてません。
(この場合は、<html>要素・<body>要素に「margin:0; padding:0」の指定を忘れずに)
<header> は「top:0」だけ、<footer> は「bottom:0」だけ指定しています(8、11行目)

「z-index:1」という指定もしています(6行目)
これは本来なら無くていいんだけど、このサンプルページに使っている「Prism」が、pre要素の中身を装飾表示し、スタックコンテキストが1つ上がるため。<header> や <footer>がそれより上になるように「z-index:1」と指定しています。
z-indexプロパティについては、近いうち詳しくやります。

<header> を固定位置にした時のページ内リンクのズレを解消する

サンプル内でテストしていますが、
<header> を固定位置にした時、必ず起こる問題がページ内リンクのズレです。

ページ内リンクは 画面の上辺にリンクさせた箇所が来るので、そこに固定位置指定した要素があると重なってしまうんです。まあ当たり前っちゃ当たり前なんですけどね。

これを解消するのによく使われているのが「<header>の高さ分を足した「ネガティブマージン + padding」の組み合わせ」です。
固定した <header>の高さを、リンク先にあらかじめ加えておくんです。

例えば、固定した <header>の高さが 100px、リンク先の要素の上マージンが 20px だったとします。(2emとかでやってたら ピクセル換算して)
合計の 120px を、
margin-top: -120px;(←ネガティブマージン)
padding-top: 120px;
リンク先の要素に指定します。
padding のおかげで、固定位置指定の要素の下に隠れずに済み、ネガティブマージンのおかげでプラスマイナスゼロになるというわけです。

リンク先要素に padding-top がもともと指定してあったら、その分も足します。
padding-top が 30px だったなら、上の例に加算して、
margin-top: -120px;(←ネガティブマージン)
padding-top: 150px;
とします。

次回予告

position: fixed も知っておくと便利ですね。
ページのレイアウトでけっこう活躍することが多いと思います。

さて次回は、positionプロパティの値の最後です。
position: sticky を使ってみましょう。
これはまだドラフトなんだけど、けっこうオモシロイ表示ができるのでサンプルを作ってみます。

その次の記事で、今日も出てきた「z-indexプロパティ」をじっくりやろうと思います。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2017/11 | 12
- - - 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 - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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