ボックスモデル

CSS

ボックスモデル図解ブロックレベル要素は、矩形（長方形）の領域を生成します。この領域をブロックボックスなどと呼びます。例p { margin:30px; padding:20px; width:200px; height:50px; border:10px solid; } ※一部ブラウザではwigth,heightをボーダーの範…

2009-07-22

aアンカーに背景画像を設置

CSS

①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; …

2009-07-22

line

CSS

①ラッパー部分に横幅指定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…

2009-07-22

background-position

CSS

"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"…

2009-07-22

/

→これでdiv#pageBodyは適用されなくなる。一時的な検証で使用する。

2009-07-22

コメントアウト　/* 　CSSの記述 */　（セレクタはスタイルに適用されなくなる。）

CSS

・コメントアウト /* CSSの記述 */ （セレクタはスタイルに適用されなくなる。）例）/*div#pageBody{ width: 760px; margin: 20px auto 0px; background-color: #FFFFFF; background-image: url(images/top/body_bg.jpg); background-repeat: repeat-y; } */…

2009-07-22

背景画像の繰り返し　background-repeatプロパティ

CSS

・background-repeatプロパティ repeat １つの画像を埋め尽くし repeat-y １つの画像を縦に並べて繰り返し repeat-x １つの画像を横に並べて繰り返し no-repeat 繰り返さないで１つだけ配置

2009-07-22

背景画像に挿入　 background-imageプロパティ

CSS

background-imageプロパティURL →url（画像のURL） none →背景に画像をしない例） {background-image: url(images/top/body_bg.jpg);}

2009-07-22

非表示にするプロパティ

CSS

例１）区切り線を非表示にする。hr { display: none; } ※幅高さ等指定している場合、面積も非表示なので詰まってしまうので注意。・displayプロパティ none 非表示 block ブロックボックス要素のように表示 inline インライン要素のように表示 list-item リ…

2009-07-21

list-stｙle-image

CSS

・list-style-image ：リストの記号を画像にしたいときに使用。ブログでよく見かける。 →url(*.gif)：画像を使用 →none：記号として画像を使用しない例 ul#topList{list-style-image: url(images/top/031.gif)} ※HTML内のul要素でid名はtopList ※画像データ…

2009-07-21

ブロックレベル要素、インライン要素

HTML/XHTML

・ブロックレベル要素：見出しを表すh要素、段落を表すp要素、リストを表すul要素、表組みを表すtable要素などで、ひとかたまりのものとして判断され、要素の前後に余白がとられることが多い。・インライン要素：ブロックレベル要素の内容。a storong imgな…

2009-07-21

line-heightプロパティとvertical-alignプロパティの違い

CSS

・line-heightプロパティは行の高さからフォントサイズを引いた残りの高さが上下に均等に振り分けられる。（ブロックレベル要素、インライン要素両方に使用可能）・vertical-alignプロパティは垂直位置のみ。 ※line-heightプロパティ例）adrress要素の高さが…

2009-07-20

fon-familyプロパティ

CSS

{ font-family: "メイリオ","meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro" ,"MS P ゴシック","MS P Gothic","sans-serif"; } ※優先して適応させたい順にカンマを切って記述する。指定したフォントファミリーがPCにインストールされてない場合…

2009-07-20

font-sizeプロパティ

CSS

・絶対サイズ：xx-small,x-small,small,medium,large,x-large,xx-large・相対サイズ：smaller,larger ・数値絶対サイズ：pt,pc（パイカ）,cm,mm,in（インチ）・数値相対サイズ：px,em,ex・その他：%

2009-07-20

idセレクタ、classセレクタの記述

CSS

・idセレクタ要素名#id名{ : ;}と記述する。・classセレクタ要素名.class名{ : ;}と記述する。

2009-07-20

idセレクタを使ったスタイル適用

CSS

<dl id="topRecommendedMenu"> <dt><strong>商品名</strong></dt> <dd>価格</dd> </dl> ※dlごとではなく、商品名だけ色を変えたいdl#topRecommendedMenu strong{color:#000000;} ※セレクタは半角空ける

2009-07-20

擬似クラス

CSS

body{ color: #555555; }a:link{ color: #555555; }a:visited{ color: #888888; } a:hover{ color: #FF6600; } a:active{ color:#000000; }a:focus{ color:#003399; }

2009-07-20

CSSの基本書式

CSS

〜基本書式セレクタのプロパティを値にする〜①改行とインデントを入れた場合セレクタ{ プロパティ:値; プロパティ:値; プロパティ:値; }②１行で記述する場合セレクタ{プロパティ:値;プロパティ:値;プロパティ:値;} ③セレクタを複数指定する場合セレクタ,セ…

2009-07-20

CSSの適用方法

CSS

①HTMLから外部CSSを読み込み（HTMLのhead内に記述） ②CSSから他のCSSを読み込む（CSS内に記述）@import url(style.css);など。 ③スタイルタグのエンベット（埋め込み）※HTMLのhead内に記述 <style type="text/css" media="screen,print">  </style> ④タグ属性 <p style="font-color:#003399;"> あいうえお </p>

2009-07-20

CSSのリセット①

CSS

/* よく登場する要素のリセット */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-…

2009-07-20

CSSのリセット②（ユニバーサルセレクタ使用）

CSS

/* ユニバーサルセレクタ使用のリセット */ * { 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…

2009-07-20

文書型宣言

HTML/XHTML

文書型定義→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>

2009-06-16

table組み　縦　横

HTML/XHTML

<html> <head> <title>テーブル練習</title> </head> <body><h1>テーブル練習縦列<h1><table border="1" padding="0"> <tr> <th>項目左</th><th>項目中</th><th>項目右</th> </tr><tr> <td>中左</td><td>中中</td><td>中右<td> </tr><tr> <td>下左</td><td>下中</td><td>下右</td> </tr></table> <h1>テーブル練習横列<h1><table border="1" padding="0"> <tr> <th>項目…</th></tr></table></h1></h1></h1></h1></body></html>