CSS

CSS

CSS学習中の方からの質問「position: relative; とposition: absolute; の違いが分かりません!」

地図で東京スカイツリーの位置を考えてみよう absolute(アブソリュートと読みます)は、地図では緯度経度のようなものです。 例えば 「東京スカイツリーは東経139.7713562度、北緯35.6955548度の位置にあります。」 と言えば、スカイツリーがまったくどこにあるのか分からない方も、 日本の位置も知らない海外の方も、 地図上でスカイツリーの場所を見つけることができます。 一方、relative(リレイティブ、レラティブと読みます)は、地図ではどこかを基準点とした位置のようなものです。 例えば、 「たかし君の家は、郵便局から2軒先にある」 というのも分かりやすい例のひとつですが、 「東京スカイツリーは、東京駅から北東に5.1kmの距離にあります。」 という風に言うと、2地点の距離と、東西南北の関係が分かります。 さらに、 「東京スカイツリーは、東京駅から北東に5.1kmの距離にあり、成田空港から西の方向に53kmの距離にあります。」 となると東京スカイツリーは基準とする地点を変えることで、 5.1kmとも、53kmとも表記することができるようになります。 これがrelativeの便利な使い方です。 絶対位置のabsolute、相対位置のrelative このように、absoluteは原点からの位置を表すので、「絶対位置」と、 relativeは2要素の位置関係を表すので、「相対位置」とも呼ばれます。 Web上の原点はどこ? Webサイトの原点とは一体どこでしょうか? ページをブラウザで開いたときの、左上が原点です。 absoluteで四角形を描いてみよう ではこのページで、300px x 200pxの長方形を、原点から右下に作成したいと思います。 Webでは右下が正の向きです。

left, topとありますが、ここは場合に応じて、right(右から)やbottom(下から)としてもOKです。 absoluteの使いやすい点・そうでない点・特徴 position: absolute; は、スクリーンのサイズがいくつであっても、 常に最上部、常に左端に、など固定位置に要素を置きたい場合に便利です。 上の四角形の例の場合、スクリーンサイズが大きなユーザーの場合、 右下にもっと余白ができます。 また、常に原点を基点としているので、ページの真ん中あたりに任意のコンテンツを配置したい場合は、 topやleftの値が大きくなったり、またスクリーンサイズによっては 想定した場所に表示されないなどのケースもありえます。 ここまではposition: absolute;のお話でした。 relativeは親、absoluteは子として使う 次はrelativeとabsoluteの合体技についてお話します。 簡単に言えば、relativeを親要素とし、子要素としてabsoluteを入れ子にします。 まずはHTMLで2つのdivを作り、 子を入れ子にします。

次はCSSですが、親の要素に子要素をかぶせるようにしたいと思います。

実際にブラウザで見るとこんな感じになると思います。 relativeとabsoluteは組み合わせで使うと便利 このように、親relativeに対し、子absoluteは親の原点からに対して、 […]

CSS

【CSS】横並びリストで高さを持たない<ul>に高さをつけよう

【CSS】横並びリストで高さを持たない<ul>に高さをつけよう

グローバルナビや、メニューで、横並びリストをCSSで書くときに

で横並びにする人、多いかと思います。 これは正しいのですが、 困ったことに親要素のulタグが高さ0になってしまうこと、 ありませんか? ▼ 個々のリスト要素は高さがあるのに ▼ 親要素のulタグの高さが0になってしまう これは非常によくあるあるCSSで、マークアップをやっていく段階で 必ずといっても過言でないほど、当たる壁です。 【回避策 その1】親要素にoverflowを指定する 手っ取り早く高さを出すには、親要素のulタグに、overflow: hidden;を 指定してあげます。

本来、overflow: hidden; は、 「要素(ボックス)からはみ出たコンテンツをカットして表示しない」 という意味があるのですが、このような回り込みに適用すると、親要素に高さを与えることができます。 「【回避策 その1】親要素にoverflowを指定する」の場合のCSSソースコード例

【回避策 その2】:before, :after を利用する ulにoverflow: hidden;を使用してもよいのですが、 例えばマウスオーバーで子要素、孫要素のサブメニューが開くような場合、 overflow: hidden;により表示されなくなってしまう場合があります。 そうなると回避策 その1は利用できなくなるため、別の回避策として 疑似要素を利用します。 具体的には次のサンプルコードの通りです。

ul本体には何も指定せず、 ul: before と、ul: after に 空の要素を置いてあげます。 空の要素の指定方法にも様々ありますが、ここでは、 ・中身が空(content: “”;)で、 ・回り込みを解除(clear: both;)し、 ・ブロック要素、つまり横幅100%(display: block;)の 要素を空要素としています。 そうすることで、なんということでしょう […]