はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS の position の absolute を使いこなす為の基礎知識

2007/10/03 Wed [Edit]

皆さんは CSS の position プロパティを使いこなせていますか?

私はお恥ずかしながら relative (相対指定)はたまにレイアウトの微調整で使用することはあっても、今回のテーマである absolute (絶対指定)を使いこなせずにいました。理由もしっかりあり、ブラウザのウィンドウの左上から指定することにメリットを感じていなかったからなんですが・・・

しかし、今回の記事は position プロパティの特に absolute を使いこなすための基礎知識です。

「えぇぇ!!そんなことも知らなかったの!?」と思われてしまうような内容かも知れませんが、知らなかったと言うか知ろうとしなかったと言うか・・・・包み隠さず言うならまったく知りませんでした。

XHTMLCSS の書籍を久しぶりに読み返し、目から鱗と言えるような基礎知識でした。上の文章を読み『俺も absolute 使ってないぞ・・・』なんて方は憶えておいて損の無い基礎知識です。よくも知らずに今迄頑張ってきたと、ある意味自分を褒めたくなるくらい CSS でのレイアウトの考え方が楽になりました。

まず position プロパティについて簡単に説明すると、position プロパティとは要素の配置方式を指定し、それぞれの配置方式によって配置する位置を指定できるプロパティです。つまり CSS でレイアウトを行う上で、要素の位置を決めるためのプロパティであり top、right、left、bottom の位置プロパティと併せて使用します。
配置方式(position プロパティの「値」)には以下のものがあります。

  • absolute … 親の要素が static 以外の値を持っている時、親の左上を基準として位置プロパティ通りに配置する方式。
  • relative … 本来配置されるべき位置からの移動距離を位置プロパティを使い配置する方式。
  • fixed … absolute と同じ条件で配置する位置を決める方式だが、スクロールアウトせず常に同じ位置を保つ配置方式。
  • static … 初期値であり、この値が適用されると位置プロパティでの指定が無効となる配置方式。

上の position プロパティの「値」の説明で今回重要なのが赤い部分です。
実は先日まで私は absolute は常にブラウザのウィンドウの左上が基準となると解釈(勘違い)していたのですが、それは static つまり初期値の時の基準であり、各要素に static 以外の値を持たすことで親要素の左上を基準として配置できるのです。

それでは下の図をご覧ください。

position の absolute の図

上の図はブラウザのウィンドウを現していて、赤い矢印は親要素が初期値の時に absolute の基準とする位置です。図中のウィンドウ中央にあるグレーのボックスにも書かれている通り position : relative; を指定すると、その中にある子要素の absolute は青い矢印の位置を基準とします。
※位置プロパティで right、bottom を使用すると矢印の位置は右下を基準としますが、基本的には左上が基準です。

上記の内容を理解すると、例えば ul 要素を使ったメニューボタンをレイアウトする時など li 要素を absolute で配置できます。その時、ul 要素に relative の値を持たせる訳ですが、位置プロパティは省略可能です。ul 要素の左上から li 要素を px 単位で配置できるのです。

もっと簡略できますが下がサンプルソースです。


ul {
	width : 600px;
	height:60px;
	list-style:none;
	position:relative;
}

li#btn1 {/*左ボタン*/
	width : 200px;
	height : 60px;
	position : absolute;
	top : 0;
	left : 0;
}

li#btn2 {/*中ボタン*/
	width : 200px;
	height : 60px;
	position : absolute;
	top : 0;
	left : 200px;/*左ボタンの width だけズラす*/
}

li#btn3 {/*右ボタン*/
	width : 200px;
	height : 60px;
	position : absolute;
	top : 0;
	left : 400px;/*左ボタンと中ボタンの width の和だけズラす*/
}

これは私にとってとても便利なレイアウト方法でした。

今迄は li 要素を display : block; とし float で並列させていました。テキストメニューを単純に並列するには display : inline; とすれば良いのですがメニューボタンとしてクリック領域を大きく取りたい時には li 要素をブロックレベル要素にし float させていました。結果は同じなんですが、float 指定をすると予期せぬ問題が発生することも少なくなく、また CSS 内のソースも複雑になりがちでした。

まだ私も position プロパティを使いこなしていると言うレベルではありませんが、デザインを考える時の肩の荷が下りた基礎知識でした。まだまだ日々勉強だなと思うと共に、リファレンス的な本をこうして読み返すことの必要性、基礎知識の大切さを実感しました。

Prev
FC2ブログ変数 ~記事の移動~
Top
はじめてのブログデザイン
Next
完全防水のパソコン

Comments

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

承認待ちコメント

このコメントは管理者の承認待ちです

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。