CSS

リスト

CSS

行頭記号または行頭番号の種類を指定する list-style-type:値 値 説明 disk ●(黒丸)で表示 circle ○(白丸)で表示 square ■(四角)で表示 decimal 1,2,3...アラビア数字で表示する lower-roman 鄯,鄱,鄴...ローマ数字小文字で表示する upper-roman Ⅰ,Ⅱ,Ⅲ...ロ…

配置

CSS

要素の配置方法を指定する position:値 値にrelativeまたはabsoluteを指定する場合はtop,right,bottom,leftプロパティとセットで使う 値 説明 static 要素を標準の位置に配置する relative 相対的な位置を指定する absolute 絶対的な位置を指定する top: 上…

ボックス

CSS

枠線のプロパティを一括指定する border:border-styleの値 border-widthの値 border-colorの値 指定する順番に決まりはない h1{ border:solid 3px #66cc00; } border-top:値 枠線(上)のプロパティを一括指定する border-bottom:値 枠線(下)のプロパティを一…

背景

CSS

背景のプロパティを一括指定する background:background-colorの値 background-imageの値 background-repeatの値 background-positionの値 指定する順番に決まりはない body{ background:#ffffff url("images/back.gif") no-repeat right bottom; }

テキスト

CSS

インデントを指定する text-indent:値 値には字下げするサイズを数値+単位で指定する p{ text-indent:3em; } 行内またはセル内での文字列の垂直方向位置を指定する vertical-align:値 値 説明 baseline 文字列を行の下部にそろえて配置する super 文字列を行…

フォント

CSS

文字間隔を指定する letter-spacing:値 値には数値+単位またはnormalを指定する 行間隔を指定する line-height:値 p{ letter-spacing:5px; line-height:5em; } フォントのプロパティを一括指定する font:font-styleの値 font-weightの値 font-sizeの値 line-…

擬似クラス、ID

CSS

擬似クラス CSSにはあらかじめ用意されている擬似クラスがある a要素とセットで使い、a:擬似クラス名のように記述する 擬似クラス 説明 :link 未アクセスのリンク部分を指定 :visited アクセス済みのリンク部分を指定 :hover マウスでポイントしたときのリン…

配置

CSS

h6{ /*width文字列やイメージなどの内容を表示する領域の幅を指定する*/ /*値には数値+単位またはautoを指定*/ width:400px; /*height内容の高さを指定する*/ /*値には数値+単位またはautoを指定*/ height:300px; /*float要素の後ろに続く文字列やイメージな…

ボックス

CSS

ボックスには余白、枠線、間隔という領域がある 余白(マージン) 枠線周りの余白 枠線(ボーダー) 文字列やイメージなどの内容を囲む枠線 間隔(パディング) 文字列やイメージなどの内容と枠線との間隔 h6{ /*border-style 枠線のスタイルを指定する*/ /*値には…

CSSでの文字、フォント、背景のデザイン

CSS

h6{ /*colorプロパティは文字列の色を指定する*/ /*値には色コード(16または10進数)または色名を指定する*/ color:#ff0000; /*text-alignは水平方向位置を指定する*/ /*値は left,center,right,justify*/ text-align:center; /*text-decorationは文字列の装…

CSSの基本

CSS

スタイルの適用方法 同一の要素(タグ)全てに同じスタイルを適用する p{color:#ff0000} 部分的にスタイルを適用する CSSでクラスを定義してHTMLでclass属性にクラス名を記述する CSS .today{color:#ff0000} HTML <p class="today">今日</p> CSSの記述方法 p{color:#ff0000} セレク…