• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Code School

プログラミング初心者向け応援メディア

  • Home
  • Python3
  • Django
  • Ruby
  • Ruby on Rails
  • CSS
  • JavaScript
  • Swift
  • Git
  • Linux
  • How to Study
You are here: Home / Web制作 / CSS / [CSS]positionプロパティについてのまとめ。

[CSS]positionプロパティについてのまとめ。

2018年4月18日 By Code School編集部

Webサイトの配置決めで頻出するpositionプロパティ。

positionプロパティをしっかり抑えておくと、要素の配置に頭を悩ませることもなくなるかもしれません。

CSSのpositionプロパティがうろ覚えの人はこの機会にしっかり抑えておきましょう。

positionとは?

CSSのpositionプロパティとは、要素の場所を決めることができるプロティです。

例えば、よく海外のWebデザインなどで使われる、トップ画像の中央にテキストが入ったデザイン。

この中央の要素はpositionプロパティ(absolute)を使って設定しています。

そのほかにも、ヘッダーやフッターを固定で表示したりもできます。

 

positionの種類

要素の配置には必須のプロパティですが、positionには4つの種類があります。

  • static:初期値
  • relative:英語で相対という意味。相対的に位置を決める
  • absolute:英語で絶対という意味。親要素を基準に絶対的に位置を決める
  • fixed:要素を基準にするのではなく、画面を基準に位置を決める

この中で実際に使うことの多いのはabsoluteでしょうか。

先ほど紹介したデザインでも、absoluteで絶対的に位置を決めてテキストを中央に配置しています。

 

fixedは例えば、スマホ画面の1番下に問い合わせボタンを設置する時などに使えます。

ナビゲーションメニューを上部に固定という使い方もできますね。

 

positionで使える値

positionプロパティでは以下のように値を設定して使用します。

CSS
1
2
3
4
5
6
7
.sample {
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

使うのは、top/bottom/left/right。

これは、トップからいくら離れているのか、ボトム (下側)からいくら離れているのかを設定します。

例えば0に設定すると上部からの距離が0となりぴったりくっつくように表示されます。

これ以外にpxで指定したり、%で指定することもできます。

Filed Under: CSS, Web制作

Primary Sidebar

Categories

  • Git (6)
    • Github (2)
  • iOSアプリ開発 (48)
    • Swift (30)
    • Xcode (13)
  • JavaScript (7)
  • Linux (8)
  • nginx (3)
  • Python3 (74)
    • Django (26)
    • Pycharm (5)
  • Ruby (17)
    • Ruby on Rails (6)
  • Scratch (1)
  • SQL (5)
    • MySQL/MariaDB (4)
    • SQLite3 (1)
  • Unity (2)
  • Web制作 (49)
    • bootstrap4 (1)
    • Brackets (5)
    • CSS (35)
    • HTML (4)
  • プログミラングコラム (12)
  • プログラミングスクール (93)
    • 子供向けプログラミングスクール (58)
    • 社会人向けプログラミングスクール (41)
  • プログラミング学習方法 (8)
  • 開発ツール (20)
    • Atom (1)
    • Mac (1)
    • Sketch (16)
[Django]mysqlでmigrateした時にエラーが発生した場合の対処方法

[Django]mysqlでmigrateした時にエラーが発生した場合の対処方法

私的命名規則メモ

私的命名規則メモ

[JavaScript]replaceで文字列の置換をする

[JavaScript]replaceで文字列の置換をする

[JavaScript]addEventListenerを使う

[JavaScript]addEventListenerを使う

[JavaScript]focusとは?使い方を紹介

[JavaScript]focusとは?使い方を紹介

[JavaScript]classListを使って楽にクラスを操作する

[JavaScript]classListを使って楽にクラスを操作する

[JavaScript]querySelectorで要素を取得する、書き換える

[JavaScript]querySelectorで要素を取得する、書き換える

[JavaScript]少ないコードのif文は三項演算子ですっきり書く

[JavaScript]少ないコードのif文は三項演算子ですっきり書く

[JavaScript]==と===の違い

[JavaScript]==と===の違い

[bootstrap]カラムの順番をPC版・スマホ版で入れ替える

[bootstrap]カラムの順番をPC版・スマホ版で入れ替える

[CSS]fontawsomeが◽︎でうまく表示されない時の確認事項

[CSS]fontawsomeが◽︎でうまく表示されない時の確認事項

[MySQL]ローカルサーバーが停止してしまった場合の復活方法

[MySQL]ローカルサーバーが停止してしまった場合の復活方法

[Django]templatesで掛け算の処理をしたい→ないのでフィルタを作って対応

[Django]templatesで掛け算の処理をしたい→ないのでフィルタを作って対応

[Python]super()で親クラスのメソッドを呼び出す

[Python]super()で親クラスのメソッドを呼び出す

[Django]IntegerFieldで最小値、最大値を決める

[Django]IntegerFieldで最小値、最大値を決める