ワードプレスをやろう!と決めてから何日も過ぎている・・・

ようやく初めてログインできても全く進まない・・・

なんとかブログの投稿を始めたが全然稼げない・・・

これ以上時間を無駄にしたくない・・・

そんなあなたには下記の書籍がおすすめです!

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ワードプレスで初心者が覚えておくべきpositionプロパティの2つの使い方

CSSのpositionプロパティは、ひと言でいうと『要素(コンテンツ)の位置を決める』プロパティです。

ワードプレスでカスタムCSSを使用するときもよく使うので、ぜひ覚えておきたいですね。

本記事では、初心者のあなたがpositionプロパティを使いこなすために覚えておくべき2つの使い方を解説していきます。

この記事でわかること

・positionプロパティを使うことで、コンテンツの配置を自由に変更できるようになる
・positionプロパティを使えば、コンテンツとコンテンツを重ねて配置することもできるようになる

このように、positionプロパティを使えば、あなたのワードプレスサイトもカスタマイズできる幅がぐっと広がります。

目次

positionプロパティの値

そもそもpositionプロパティには次の4つがあります。

  • position: static;
    デフォルト値。何も指定しなければ、このstaticな状態にあります。
  • position: relative;
    要素の配置を相対値で決定する
  • position: absolute;
    要素の配置を絶対値で決定する
  • position: fixed;
    要素をスクロールに対して固定させる
  • position: sticky;
    要素をスクロールに追従させる

このうち、初心者がまず押さえておくべきはposition:relative;position:absolute;の2つです。

そして、要素の位置をコントロールするtop,right,bottom,leftプロパティ
重ね合わせの順番をコントロールするz-indexプロパティ

と合わせて使用することになります。

  • top・・・上からの位置を指定する
    top:20px; なら上から20pxのところに要素の上端が配置される
  • left・・・左からの位置を指定する
    left:20px; なら左から20pxのところに要素の左端が配置される
  • bottom・・・下からの位置を指定する
    bottom:20px; なら下から20pxのところに要素の下端が配置される
  • right・・・右からの位置を指定する
    right:20px なら右から20pxのところに要素の右端が配置される
  • z-index・・・要素を重ねる順番を指定する
    (z-index:10; など。数字の小さいものが下となる)

理解しやすいためにposition:absolute;の使い方から紹介していきましょう。

position:absolute

準備としてHTMLとCSSで、

・bodyエリア(グレー)・・・paddingで50pxの余白がある
・黄色のボックス(300×300px)
・緑のボックス(200×200px)
・緑のボックスの中に青ボックス(100×100px)

の構成を作成しておきます。

初期のHTMLとCSS状態
<body>
    <div class="yellow"></div>
    <div class="green">
        <div class="blue"></div>
    </div>
</body>
body {
    margin:0;
    padding:50px;
    background-color: #aaa;
}
.yellow {
    background-color: #ff0;
    width:300px;
    height:300px;
}
.green {
    background-color: #0f0;
    width:200px;
    height:200px;
}
.blue {
    background-color: #00f;
    width:100px;
    height:100px;
}

青のボックスにposition:absolute;を追加してみましょう。
このとき、同時にtop:0; left:0; と左上に配置指定の記述もします。

すると、青のボックスは親要素の緑ボックスから抜け出て、body全体の左上に移動します。

青ボックスにposition_absoluteをかける

このように、position: absolute;は、top,leftなどで指定した位置に自由に配置することができます。

この場合、配置プロパティの基準となるのはbodyタグで指定したエリアであることに注目してください。

配置指定をbottom:0; right:0; に変更するとbodyタグで指定したエリアの右下に配置されます。

bottomとrightで位置指定

position:relative

先ほどの青ボックスの位置を今度はtop:50px; left:50px;の位置にしておきます。
bodyエリアの上から50px、左から50pxのところに配置されます。

top50px_left50pxの位置

この状態で、青ボックスの親要素である緑ボックスにposition:relative;をかけてみましょう。

すると、青ボックスはbodyエリアでなく親要素の緑ボックスを基準に配置されるようになります。

親要素にposition_relative

このように、親要素にposition:relativeがかかっているかどうかで、配置の基準が変わります

positionプロパティの使い方

position:absoluteをかけてtop,leftなどで位置指定することで、自由に要素の位置を変更することができる。

②配置位置の基準は、親要素にposition:relativeをかければ親要素が基準となり、かけなければbodyエリア全体が基準となる。

※②でいう親要素とは、直上の親だけでなく、親の親など複数階層上も含めた親となります。

すなわち、要素の親をずっと遡って、どこかでposition:relativeがかかっていればその要素が基準となり、なければ最後にbody要素が基準となるわけです。

ワードプレスでpositionプロパティを使う場合は、上記①②の2点を覚えておくだけで、ぐっとレイアウトの幅が広がります。

position:relativeでも位置配置は変更できる

では、position:relative;とtop,leftなどの配置プロパティを併用するとどうなるでしょうか?

先ほどposition:relativeをかけた緑ボックスにtop:-20pxとしてみましょう。
すると、緑ボックスが元の位置から20px上へ移動しました。

このように、positionプロパティでは、要素の上に要素を重ねて配置することもできます

position_relativeにtopで位置変更

上の例でもわかるように、position:relativeにtop,leftなどで位置指定すると、元々の位置を基準として相対的に位置変更をすることになります

これが、親要素やbody要素などの基準から絶対値で位置変更するposition:absoluteとの違いでもあります。

  • position: relative;・・・要素の配置を元の位置からの相対値で決定する
  • position: absolute;・・・要素の配置を基準要素からの絶対値で決定する

しかし実際は、position:relativeをかけて位置変更をする、という使い方はほとんどありません。

したがってやはり、position:absoluteで位置変更をする。その基準位置はposition:relativeが親要素にあるかどうかで決まる、というのが基本的な使い方だと覚えておけばよいでしょう。

z-indexで要素の重なりをコントロールする

先の例では、黄色ボックスの上に緑ボックスが重なりました。

このように要素が重なるときは、HTMLで後から記述された要素が上に重なることになります。

しかしz-indexを使用すれば、この重なる順番をコントロールすることができるので紹介していきましょう。

黄色ボックスが上になるように変更するには次のようにします。

黄色ボックスにposition:relativeをかけた上で、黄色ボックスと緑ボックスにz-indexを指定する。
z-indexの値は黄色ボックスの方を大きくする。

z-indexで重なる順番を変える

このように、z-indexで値を指定すると、値の大きい要素の方が上に重なるようになります。

ただしz-indexを適用するには、position:static以外のpositionプロパティがその要素にかかっている必要があります。そのために、黄色ボックスにもposition:relativeをかけておいたわけです。

対象要素にposition:static以外のpositionプロパティがかかっている場合、z-indexで値の大きい要素が上に重なる。

まとめ

positionプロパティで非常によく使われるrelativeとabsoluteの使い方について解説してきました。

もう一度要点だけ書きだしておきましょう。

positionプロパティの使い方

position:absoluteをかけてtop,leftなどで位置指定することで、自由に要素の位置を変更することができる。

②配置位置の基準は、親要素にposition:relativeをかければ親要素が基準となり、かけなければbodyエリアが基準となる。

対象要素にposition:static以外のpositionプロパティがかかっている場合、z-indexで値の大きい要素が上に重なる。

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる