2009-07-01から1ヶ月間の記事一覧
・positionプロパティ指定した要素の配置方法を指定するためのプロパティ。 :static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。:relative 相対位置への配置となります。positionプロパテ…
・floatプロパティ指定した要素のボックスを左、または右に寄せて配置し、後に続く要素をその反対側にフロート（浮遊化）指定する。 このプロパティを使用する際にはwidthプロパティで幅を指定する必要がある。（画像などの置換要素に指定する場合は除く。置…
①HTMLヘッダーサイドメニューコンテンツフッター※下記図のようになる ②CSSで全体、レイアウトの設定。pの幅高さ設定。/* 全体の設定ここから */body{background-color: #999999;color: #FFFFFF;}/* 全体の設定ここまで */ /* レイアウト設定ここから */div#w…
＜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 リ…
・list-style-image ：リストの記号を画像にしたいときに使用。ブログでよく見かける。 →url(*.gif)：画像を使用 →none：記号として画像を使用しない 例 ul#topList{list-style-image: url(images/top/031.gif)} ※HTML内のul要素でid名はtopList ※画像データ…
・ブロックレベル要素：見出しを表すh要素、段落を表すp要素、リストを表すul要素、表組みを表すtable要素などで、ひとかたまりのものとして判断され、要素の前後に余白がとられることが多い。 ・インライン要素：ブロックレベル要素の内容。a storong imgな…
・line-heightプロパティは行の高さからフォントサイズを引いた残りの高さが上下に均等に振り分けられる。（ブロックレベル要素、インライン要素両方に使用可能）・vertical-alignプロパティは垂直位置のみ。 ※line-heightプロパティ例）adrress要素の高さが…
{ font-family: "メイリオ","meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro" ,"MS P ゴシック","MS P Gothic","sans-serif"; } ※優先して適応させたい順にカンマを切って記述する。指定したフォントファミリーがPCにインストールされてない場合…
・絶対サイズ：xx-small,x-small,small,medium,large,x-large,xx-large・相対サイズ：smaller,larger ・数値絶対サイズ：pt,pc（パイカ）,cm,mm,in（インチ）・数値相対サイズ：px,em,ex・その他：%
・idセレクタ要素名#id名{ : ;}と記述する。・classセレクタ要素名.class名{ : ;}と記述する。
<dl id="topRecommendedMenu"> <dt><strong>商品名</strong></dt> <dd>価格</dd> </dl> ※dlごとではなく、商品名だけ色を変えたいdl#topRecommendedMenu strong{color:#000000;} ※セレクタは半角空ける
body{ color: #555555; }a:link{ color: #555555; }a:visited{ color: #888888; } a:hover{ color: #FF6600; } a:active{ color:#000000; }a:focus{ color:#003399; }
〜基本書式 セレクタのプロパティを値にする〜①改行とインデントを入れた場合セレクタ{ プロパティ:値; プロパティ:値; プロパティ:値; }②１行で記述する場合セレクタ{プロパティ:値;プロパティ:値;プロパティ:値;} ③セレクタを複数指定する場合セレクタ,セ…
①HTMLから外部CSSを読み込み（HTMLのhead内に記述） ②CSSから他のCSSを読み込む（CSS内に記述）@import url(style.css);など。 ③スタイルタグのエンベット（埋め込み）※HTMLのhead内に記述 <style type="text/css" media="screen,print"> <!-- body{ margin:0;} --> </style> ④タグ属性 <p style="font-color:#003399;"> あいうえお </p>
/* よく登場する要素のリセット */h1, h2, h3, h4, h5, h6, p, address,ul, ol, li, dl, dt, dd,table, caption, th, td, img, form { margin: 0; padding: 0; }body{ margin: 0; padding: 0; border: none; font-style: normal; font-weight: normal; font-…
/* ユニバーサルセレクタ使用のリセット */ * { margin: 0; padding: 0; border: none; list-style-type: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; font-family: meiryo, "メイリオ", Osaka, "Hiragino Kaku Got…
文書型定義→DTD:Document Type Definition http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
