まわるフリフリのフリ＞メニュー（nav）周りのメモ

　ページに配置する画像などの要素を、絶対的・相対的に配置する場合の初歩的CSSメモ書き。上から下へ、左から右へ…という順序でレイアウトする以外に「狙った場所へピンポイントに配置する！」というルールがあるという事は以前から何となく察知していたのですが、昨年秋ごろに実際に使ってみたのが初めてです。もう既にすっかり忘れてしまっているので、今回必死に思い出しながら書き留めておきます。

　上は現状のトップページ外観。昨年後半から全く変化していませんが、温泉マークに「ふ」と書かれた適当なロゴの下にある数個の○に（↓）、それを使っています。というか、使ってみたかったのでテストしてみて、とりあえず動作確認した後は満足してしまいそのまま放置しているという、世間でよく見る風景。

当初の予定

　これまでは「position」というプロパティを使ったことがありませんでしたから、当初、ページ上部のナビゲーション部分は下図のような感じにしようと考えました（各エリア毎に枠線入れてます）。上から下へ、左から右へ順番に…という感じ。

nav周りのCSS

header {
	width: 940px;
	height: auto;
	margin: 0px auto 0px auto;
	background-color:  #f5f6f7;
	border: solid 5px pink;
}

nav {
	display: block;
	display: -webkit-box;
	display: -moz-box;
	display: -o-box;
	-webkit-box-align: center;
	-moz-box-align: center;
	width: 940px;
	height: 60px;
	margin: 0px auto 0px auto;
	padding-top: 20px;
	background-color: transparent;
	border: 3px solid yellowgreen;
}

div#Thunderbolt {
	width: 60px;
	height: auto;
	border: 1px solid red;
}

div#Thunderbolt img {
	width: 60px;
	height: 60px;
}

div#Macmini {
	width: 60px;
	height: auto;
	border: 1px solid orange;
}

div#Macmini img {
	width: 60px;
	height: 60px;
}

div#VPS {
	width: 60px;
	height: auto;
	border: 1px solid yellow;
}

div#VPS img {
	width: 60px;
	height: 60px;
}

div#RADIO {
	width: 60px;
	height: auto;
	border: 1px solid green;
}

div#RADIO img {
	width: 60px;
	height: 60px;
}

div#MOVIE100 {
	width: 60px;
	height: auto;
	border: 1px solid blue;
}

div#MOVIE100 img {
	width: 60px;
	height: 60px;
}

div#flflme {
	width: 60px;
	height: auto;
	border: 1px solid purple;
}

div#flflme img {
	width: 60px;
	height: 60px;
}

div#LOGO {
	width: 100px;
	height: auto;
	border: 1px solid green;
}

div#LOGO img{
	width: 100px;
	height: auto;
}

ロゴをはみ出させたかった

　そしてバランスを整えるためにサイズや位置を微調整しつつ、液晶画面をぼんやり眺めているうち、ヘッダーとかnav等のエリア内におとなしく収まっているのが面白くないというか、その枠を超えてはみ出してしまうのはどうだ？…と思ったのがpositionの目覚めのきっかけです。

nav周りのCSS

nav {
	display: block;
	display: -webkit-box;
	display: -moz-box;
	display: -o-box;
	-webkit-box-align: center;
	-moz-box-align: center;
	width: 940px;
	height: 60px;
	margin: 0px auto 0px auto;
	padding-top: 20px;
	border: 0px solid BLACK;
	background-color: transparent;
}

div#nav_spacer {
	width: 620px;
}

div#Thunderbolt {
	width: 36px;
	height: auto;
	position:relative;
	top:80px;
	left:400px;
	border: 0px solid red;
}

div#Thunderbolt img {
	width: 30px;
	height: 30px;
}

div#Macmini {
	width: 36px;
	height: auto;
	position:relative;
	top:110px;
	left:340px;
	border: 0px solid orange;
}

div#Macmini img {
	width: 15px;
	height: 15px;
}

div#VPS {
	width: 36px;
	height: auto;
	position:relative;
	top:190px;
	left:330px;
	border: 0px solid yellow;
}

div#VPS img {
	width: 20px;
	height: 20px;
}

div#RADIO {
	width: 36px;
	height: auto;
	position:relative;
	top:130px;
	left:310px;
	border: 0px solid green;
}

div#RADIO img {
	width: 24px;
	height: 24px;
}

div#MOVIE100 {
	width: 36px;
	height: auto;
	position:relative;
	top:230px;
	left:320px;
	border: 0px solid blue;
}

div#MOVIE100 img {
	width: 30px;
	height: 30px;
}

div#flflme {
	width: 36px;
	height: auto;
	position:relative;
	top:280px;
	left:190px;
	border: 0px solid purple;
}

div#flflme img {
	width: 44px;
	height: 44px;
}

div#LOGO {
	width: 100px;
	height: auto;
	position:relative;
	top: 0px;
	left: 150px;
	border: 0px solid green;
}

div#LOGO img{
	width: 100px;
	height: auto;
}

23〜25行目：position:relative;と書いて、topとleftで飛ばす距離を指定。

外部サイト参考記事

positionプロパティの値の種類、意味（CSS Lecture）
CSS レイアウトを学ぶ「position」（CSS レイアウトを学ぶ）

　とまあ、こんな感じで今回はただの備忘録でした。つづく。

2015-02-22 ＞ VPS＆WordPress引っ越しメモ