人気ブログランキングの応援
をして頂けると励みになります。
ヘッダー画像、ヘッダーメニューを含め、
画像やバナーを好きな場所に配置する方法は、
いろいろあると思いますが、
次のやり方が簡単でよく使われています。
まず、基点を設定します。
次に、配置をしたい画像が上記の基点からみてどのような位置にあるかを設定します。
では、具体的に、
私のブログでご説明致します。
上記の赤枠で囲まれた部分が「wrap」と呼ばれています。
この左上の赤丸部分を基点に設定します。
CSSを次のように入力しました。
#wrap {
position: relative;/*--positionの基準をwrapに設定--*/
}
そして、ヘッダーメニューを配置するCSSは、
次の通り入力しました。
ul.gnavi {
position: absolute;/*--メニューバーの位置の設定--*/
left:0px;/*--positionの基準wrapから左側0に位置を設定--*/
top:0px;/*--positionの基準wrapから上側0に位置を設定--*/
}
上記のように、
position: relative;で基準を設定し、
position: absolute;で画像等を配置します。
このようにすると、
画像等がどこでも好きなところに
配置できるようになります。
これは、すごく便利ですよね。
いろんなことに応用ができそうです。
今回は、以上です。
最後まで読んでいただき、
ありがとうございました。
少しでもお役に立ちましたら、
応援お願いします!!
