2009-07-22から1日間の記事一覧
＜HTML＞listの記述<ul id="globalNavi"> <li><img src="a.jpg" width="120" height="30" alt="" /></li> <li><img src="b.jpg" width="120" height="30" alt="" /></li> <li><img src="c.jpg" width="120" height="30" alt="" /></li> <li><img src="d.jpg" width="120" height="30" alt="" /></li> <li></li></ul>
ブロックレベル要素のセレクタにmargin-right: auto;とmargin-left: autoにすることでその要素全体を中央寄せにすることができる。例）ページ全体を中央寄せにする。 wapper部分（大外）に margin-right: auto; margin-left: auto; を適用。 ※もしくは margi…
・上下左右margin：時計回りに margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;※autoにすると左右中央そろえ。 ・上下左右padding：時計回りに padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;※上下のパディン…
・自分で作ったid →基本的に{margin:0;padding:0;}はつけておく。
・bodyセレクタに直接widthプロパティを指定しては駄目。 →子要素にブロックレベル要素、インライン要素があるから。必ずdivラッパー設定にする。■HTML<body> <div id="wrapper"> </div> </body>■CSS div#wrapper{width: 600px;}
ボックスモデル図解ブロックレベル要素は、矩形（長方形）の領域を生成します。この領域をブロックボックスなどと呼びます。例p { margin:30px; padding:20px; width:200px; height:50px; border:10px solid; } ※一部ブラウザではwigth,heightをボーダーの範…
①aのHTML<p id="siteMap"><a href="sitemap.html">Sitemap</a></p> ②背景画像アイコン を配置。 p#siteMap a{ background-image: url(images/top/icon.gif); background-repeat: no-repeat; } ③位置を調整p#siteMap a{ background-image: url(images/top/icon_arrow_02.gif); background-repeat: no-repeat; …
①ラッパー部分に横幅指定div#wrapper{ width: 760px;②ラッパーに背景画像配置 div#wrapper{ width: 760px; background-image: url(images/top/body_bg.jpg);③背景画像を縦に繰り返し div#wrapper{ width: 760px; background-image: url(images/top/body_bg.j…
"top left"、"left top" "0% 0%"と等価。 "top"、"top center"、"center top" "50% 0%"と等価。 "right top"、"top right" "100% 0%"と等価。 "left"、"left center"、"center left" "0% 50%"と等価。 "center"、"center center" "50% 50%"と等価。 "right"…
→これでdiv#pageBodyは適用されなくなる。一時的な検証で使用する。
・コメントアウト /* CSSの記述 */ （セレクタはスタイルに適用されなくなる。）例）/*div#pageBody{ width: 760px; margin: 20px auto 0px; background-color: #FFFFFF; background-image: url(images/top/body_bg.jpg); background-repeat: repeat-y; } */…
・background-repeatプロパティ repeat １つの画像を埋め尽くし repeat-y １つの画像を縦に並べて繰り返し repeat-x １つの画像を横に並べて繰り返し no-repeat 繰り返さないで１つだけ配置
background-imageプロパティURL →url（画像のURL） none →背景に画像をしない例） {background-image: url(images/top/body_bg.jpg);}
例１）区切り線を非表示にする。hr { display: none; } ※幅高さ等指定している場合、面積も非表示なので詰まってしまうので注意。 ・displayプロパティ none 非表示 block ブロックボックス要素のように表示 inline インライン要素のように表示 list-item リ…
