元・地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

センタリングさせるデザインで「absolute」が使えない【CSS】

先日、CSSでセンタリングさせる方法を説明しました。
実は、この記事は今回の記事のための布石に過ぎなかったりします。

「absolute」(絶対位置指定)はデザインをする上で非常に便利です。
好きな場所にオブジェクト(タグ)を移動させることができますものね。
ただ、センタリングさせたデザインで、その配下にあるオブジェクト(タグ)に対して「absolute」(絶対位置指定)をするとHTML全体を基準にしてしまうため、画面を大きくしたときにレイアウトに崩れが起きてしまうことがあります。
今回説明するのはこれを解決させるための方法。

なんとも過去にはこんな記事も書いてました。
プルダウンメニューを全体的にセンタリングさせる方法
これも、これから紹介する方法を使えばCSSだけで解決させることができます。

WEB02
>> 続きを読む

CSSでWebサイトをセンタリングさせる方法

まあ、今さら感漂いますが一応自分に対しての覚書としてちゃんと残しておくことにしました。

僕の作るサイトは大概ウインドウがある程度大きくなるとセンタリングして表示させるようなデザインになっています。
いろいろ理由はありますが、スペースの無駄が嫌いなのと、シンメトリーが好きなのが主な理由。
かつてはTABLEタグでレイアウトして大本のTABLEタグに「align="center"」を入れれば済んだことなのですが今となってはTABLEでのレイアウトなんてありえない時代。
ただ、これをCSSで実現するにはちょっとコツがいります。
以下その方法を解説します。

WEB
>> 続きを読む

プルダウンメニューを全体的にセンタリングさせる方法

InternetExplorer7(以下IE7)での表示バグにてんやわんや。
そもそもIE6のバグを利用したレイアウトで、たまたまSafariでも表示されちゃったのでそのまま放って置いた部分なのですが、そうは問屋がおろしませんでした。
>> 続きを読む




    最新コメント