positionプロパティについて

今webの勉強中でpositionプロパティについて学んでいるのですが、絶対配置も相対配置も表示位置も、位置はピクセルなどの値で位置を指定するのでしょうか。

辞書を見ても参考サイトを見ても分かりにくかったので質問させていただきました。

宜しくお願いします。

No.2 ベストアンサー 回答者： Ogre7077 回答日時： 2015/09/28 11:30

position で

* absolute(絶対)
* fixed(固定)
* relative(相対) - ただし、絶対配置のための包含ブロックとして使用する場合を除く
の位置指定をしたら、top/bottom/left/right にて具体的な値を指定しましょう。
さもなければ指定する意味がありません。

値の指定方法は色々あります。よく使うのは以下の三種類でしょうか。
320px -- ピクセル単位、固定幅画像を扱うのに便利
2.5em -- 文字 'M' の高さ単位、かな漢字の縦横と同じなため、和文の読み物系に便利
8ex -- 文字 'x' の高さ単位、英小文字の一般的な縦横であるため、英文の読み物系に便利

参考
https://developer.mozilla.org/ja/docs/Web/CSS/po …
https://developer.mozilla.org/ja/docs/Web/CSS/le …

余談ではありますが、
最近の携帯電話は小さい画面で高解像度を使うため、
CSS でピクセル指定した数値が、そのまま物理的なピクセル数に対応しない場合も有ります。
http://www.paintcodeapp.com/news/ultimate-guide- …

この回答へのお礼

わかりやすく、ありがとうございます。
参考サイトも見てみます！

お礼日時：2015/10/17 20:36

No.1 回答者： ORUKA1951 回答日時： 2015/09/26 17:44

＞今webの勉強中で・・・【中略】・・・

＞辞書を見ても参考サイトを見ても
　psitionの取りうる値は、psitio自体の取りうる値は、(static | relative | absolute | fixed | inherit)です。
　そして、位置指定top,bottom,left,rightの値は、 <length> | <percentage> | auto | inheritです。
　lengthは長さですから、
Length　単位をつける
　相対サイズ　em,ex
　絶対サイズ　in,cm,mm,pt,pc,px
%
　どこを基準にするかは、決まりがあります。
auto
　自動
inherit　　親要素の値を引き継ぐ

のいずれかを取りえます。

　どんなサイトや本をごらんなのか分かりませんが、サイトや参考書はほとんど役立ちません。サイトで正しい情報を探そうとするのは、藁の山から針を探すようなものです。本は少しは確率が高いかも。
　必ず仕様書（原文がベストだけど邦訳でも）を学ぶべきです。
　仕様書には厳密に、かつ正確にすべて書かれている。その仕様だけでなく、それに関連するすべての情報が得られやすい。

　現在のWEB標準は、今から２０年以上も前にHTMLがおかしな方向に進んでいた反省から確立したものです。その当時、HTMLがまるでDTPやワープロのような使い方をされて、データとしての意味を成さなくなっていました。
14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
その反省から、構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )となった。

　本題のpositionですが、仕様自体は
9.3 位置決め方式( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　にあります。
　それぞれについて、値は数値以外に%も利用可能というか%を使うことがとても多いプロパティです。
{
　psitin:relative;
　top:-2em;
　left:10%;
}
とか・・

　ごらんになると分かるように、positionだけ見てもチンプンカンプンの所があるようでしたら、---たとえば「算出値」とか「static以外の抱合ブロック」---それを理解するための基礎ができていないということです。仕様書の最初からまず全体を読んで概略を理解して、あとはそれぞれの項目に置いて用語にすべてリンクがあるはずですからそれをたどります。

この回答へのお礼

ありがとうございます。
仕様書確認してみました。
助かります！

お礼日時：2015/10/17 20:37