【HTML/CSS】positionを駆使!概要・使い方を徹底解説
  • facebookページ
  • twitterページ
  • 2020.03.23

    【HTML/CSS】positionを駆使!概要・使い方を徹底解説

    HTMLで配置した要素の基準位置を定めるプロパティがpositionです。positionプロパティで要素の位置を指定することによって、HTMLの要素の位置を思い通りに配置することができます。本記事では、HTML/CSSにおけるpositionプロパティの概要や使い方を徹底的に解説していきます。

    HTML/CSSにおけるpositionプロパティとは?

    まずはHTML/CSSにおけるpositionというプロパティについて説明していきましょう。positonプロパティについて一言で表すとするとHTMLの要素位置を指定するプロパティと言えるでしょう。

    では、どんな使い方ができるのか。たとえば、以下のようなケースでpositonプロパティは活躍してくれます。

    positionプロパティの活用例
    • ヘッダーやタブメニューなどをスクロールしても固定表示させる
    • ほかの要素の上に、positionプロパティで指定した要素を重ね合わせる
    • positionプロパティで指定した要素をブラウザの端から少しだけ離す

    ただし要素の高さや横位置については、以下のプロパティを併用する必要があります。

    • topプロパティ(頂点からの位置の指定)
    • bottomプロパティ(最下部からの位置の指定)
    • leftプロパティ(左からの位置の指定)
    • rightプロパティ(右からの位置の指定)

    すでに上記4つのプロパティについて知っている方は多いかもしれません。ただ、このプロパティだけでは要素の位置指定にも限界がありますし、要素同士を重ね合わせるということはできません。positionプロパティを上記4プロパティと併用することによって、要素をより思い通りに配置することができるようになるのです。

    positionプロパティの基本的な書き方

    次にpositionプロパティの基本的な書き方について簡単に見ていきましょう。後ほど実践的な使用方法について紹介しますので、こちらではどのようにコードを書けばいいのかについて理解していただければ充分です。

    positionプロパティの基本的な書き方

    セレクタにはpositionプロパティの効果を反映させる要素かnameプロパティ、idプロパティを入れましょう。上記では少し書き方としてイメージがしづらいかもしれません。以下にpositionプロパティを実際に使用した例を記載しますので参考にしてください。

    HTML

     

    これはpositionプロパティの使用例です

     

     

    CSS

    ポイントとしてはpositionプロパティに「relative」を指定し、topプロパティに「100px」と指定したことで、「.example-child」というnameプロパティを持ったp要素が本来あるべき位置から100px下に移動したということです。

    positionプロパティに指定できる値

    さて、ここまでpositionプロパティの概要や簡単な使用例について見てきました。先ほどの例の中でpositionプロパティに「relative」という値を設定しましたね。それではこの値「relative」とは一体なんでしょうか?その点について詳しく説明していくとととも、他に指定できる値についても紹介していきましょう。

    positionプロパティに指定できる値

    positionプロパティを使用したことがない方からすれば「relative」という値は聞き慣れず、しかも他にも値に種類があるとなると理解できるか不安かもしれません。しかし、安心してください。potisionプロパティに指定できる値は4種類だけです。それぞれの特徴や使い所を理解できれば、必ずやpositionプロパティを使いこなすことができるようになるでしょう。

    potisionプロパティに指定できる値
    • static
    • relative
    • absolute
    • fixed

    それぞれの特徴とともに、使い方を具体的に見ていきましょう。

    static

    staticはpositionプロパティを指定しなくてもデフォルトで設定されている値です。要素にpositionプロパティを設定していない場合には自動的にstaticが指定されることとなります。

    要素のpositionプロパティにstaticが指定されているときには、要素に対してCSSでtop / bottom / left / rightを指定したとしても位置に反映されません。以下に実例を記載するので、テキストエディタなどにコピー&ペーストして、要素の位置が変わらないことを確認してください。

    HTML

     

    これはpositionプロパティの使用例です

     

     

    CSS

    positionにstaticを指定しているため、.example-childのp要素の位置は変わりません。前述の通り、要素にはもともと指定しなくても「position: static;」が設定されているため、positionプロパティを指定しなくても結果は同様です。

    relative

    先ほど登場したrelativeです。こちらの値は要素がもともとあるべき位置を基準として位置を指定することができる値です。こちらは実際に使用例を見た方が理解がしやすいでしょう。

    HTML

     

    これはpositionプロパティの使用例です

     

    これはrelativeを使ったpositionプロパティの使用例です

     

     

    CSS

    上記のコードでは「.example-child」というnameプロパティを指定したp要素、何も指定していないp要素の2つを用意しました。すると「.example-child」が指定されているp要素のみ位置が変わりました。このp要素は、何も指定していないp要素の真上にあるべき要素です。そこから「top: 20px;」、「left: 20px;」だけ移動し、現在の位置にあります。

    absolute

    absoluteはrelativeが設定された親要素の位置を基準として、位置を指定することができる値です。こちらも実際に使用例を見た方が理解ができるはずです。いかに見てみましょう。

    HTML

     

    これはpositionプロパティの使用例です

     

    これはrelativeを使ったpositionプロパティの使用例です

     

     

    CSS

    上記で説明した通り、親要素の「example-parent」には「position: relative;」が指定してあります。そして子要素の「example-child」には「position: absolute;」とともに、top / leftの値が指定してあります。このようにすることで、他の要素と重ね合わせることも可能です。

    fixed

    fixedは指定された位置に要素が固定される値です。この値を使用すれば、スクロールしてもブラウザに表示され続けるメニューバーなどを作ることもできます。以下に実例を見てみましょう。

    HTML

     

    これはpositionプロパティの使用例です

     

     

    CSS

    まとめ

    本記事では、HTML/CSSにおけるpositionプロパティの概要や使い方を徹底的に解説していきました。positionプロパティを使いこなすのには慣れが必要ですが、まずはよく使用する値「relative」と「absolute」に慣れていきましょう。特にこの2つを使いこなせば要素を重ね合わせ、より立体的なデザインをすることができます。

    【関連記事】
    ▶︎【HTML】表を作成するときに役立つタグについてわかりやすく解説。
    ▶︎【HTML】HTML5で廃止された属性なども解説。に使用できる属性まとめ
    ▶︎HTMLのoptionを使って選択状態(selected)を設定する方法



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE