HTML
CSS
CSSとはスタイルシートともよばれ、フォントサイズ、色、背景、行間、文字装飾などのWEBページにデザイン的な要素を加えるために使用する言語です。HTMLファイルと同様に、テキストエディタで作成し、これらをまとめて記述したファイルを[CSSファイル」と言います。拡張子は[css」で保存します。
索引
CSSの書式
| タグにスタイルを指定する。 | 書式 タグ{プロパティ:値;・・・プロパティ:値;} |
| 複数のタグに同じスタイルを指定する。 | 書式 タグ１,タグ２,・・・,タグｎ{プロパティ:値;・・・プロパティ:値;} |
| CLASS（単独） | 書式 .クラス名{プロパティ:値;・・・プロパティ:値;} HTML書式 <タグ class="クラス名">〜</タグ> |
| CLASS（タグに付ける形式） | 書式 タグ.クラス名{プロパティ:値;・・・プロパティ:値;} HTML書式 <タグ class="クラス名">〜</タグ> |
| ID（タグに付ける形式） | 書式 タグ #ID名{プロパティ:値;・・・プロパティ:値;} HTML書式 <タグ id="ID名">〜</タグ> |
擬似クラス
| :link | <a>タグで作成されたハイパーリンクのうち、未アクセスのもの |
| :visited | <a>タグで作成されたハイパーリンクのうち、アクセス済みであるもの |
| :hover | マウスでポイントしたオブジェクト |
| :active | マウスのボタンが押されているなど、アクティブなオブジェクト |
| コメント | /*コメント本文*/ |
テキスト
| color | 文字色を設定する。 書式 {color:値;} |
| text-align | 水平文字位置を指定する。 書式 {text-align:値;} left（左揃え） center（中央揃え） right（右揃え） |
| text-decoration | 文字装飾を設定する。 書式 {text-decoration:値;} underlinen（下線） line-through（取り消し線） none（なし） |
| text-indent | インデントを設定する。 書式 {text-indent:値;} 数値+単位 パーセント |
| vertical-align | インラインで垂直方向位置を指定する。 書式 {vertical-slign:値;} baseline（ベースライン） sub（上揃え） super（上下中央揃え） |
| セル内で垂直方向位置を指定する。 書式 {vertical-slign:値;} baseline（ベースライン） top（上揃え） bottom（上下中央揃え） middle（上下中央揃え） |
|
| text-transform | 大文字/小文字を設定する。 書式 {text-transform:値;} capitalize（１文字目を大文字に） uppercase（すべて大文字） lowercase（すべて小文字） none（入力した通り） |
| letter-spacing | 文字間隔を設定する。 書式 {letter-spacing:値;} 数値+単位 normal |
| white-space | 空白の扱いを設定する。 書式 {text-spacing:値;} normal（連続するタブ、スペース、改行を１つの半角スペースとして扱う） pre（入力した通りに表示） nowrap（自動改行しなし） |
| line-height | 行送りを設定する。 空白の扱いを設定する。 書式 {line-height:値;} 数値+単位 パーセント normal |
フォント
| font-family | フォントを指定する。 書式 {font-family:値;} フォント名 一般名（serif/sans-serif/cursive/fantasy/monospace) |
| font-size | フォントサイズを指定する。 書式 {font-size:値;} 数値+単位 xx-small x-small small medium large x-large larger smaller |
| font-weight | 文字の太さを指定する。 書式 {font-weight:値;} 100〜900 bold bolder lighter normal |
| font-style | 斜体を設定する。 書式 {font-style:値;} normal italic oblique |
| font | 文字属性を一括指定する。 書式 {font:font-styleの値 (font-variantの値） font-weightの値 font-sizeの値 line-heightの値 font-familyの値;｝ |
背景
| background-color | 背景の色を指定する。 書式 {background-color:値;} #rrggbb rgb（ ） 色名 transparent（透明） |
| background-image | 背景に画像を貼り込む。 書式 {background-image:値;} url（ ） none |
| background-attachment | 背景の固定/スクロールを指定する。 書式 {background-attachment:値;} fixed scrol |
| background-repeat | 画像を貼りこむ方法を調整する。 書式 {background-repeat:値;} repeat（並べて表示） repeat-x（横方向のみに並べて表示） repeat-y（縦方向のみに並べて表示） no-repeat（１つだけ表示） |
| background-position | 背景画像の位置を指定する。 書式 {background-position:値１ 値２;} 数値+単位（※値は水平、垂直方向の順序で指定） 表意定数：水平方向（※水平、垂直方向の指定順序は任意） left（左端） center（中央） right（右端） 表意定数：垂直方向（※水平、垂直方向の指定順序は任意） top（上端） center（中央） bottom（右端） |
| background | 背景に関する属性をまとめて設定する。 書式 {background:background-colorの値 background-imageの値 background-repeatの値 (background-attachmentの値） background-positionの値;} |
ボックス
| border-style | 枠線のスタイルを指定する。 書式 {border-style:値;} solid（実線） double（二重線） groove（溝線） ridge（稜線） inset（沈み込み） outset（浮き出し） none（枠なし） hidden（枠線を表示しない） dashed（破線） dotted（点線） |
| border-top-style border-right-style border-bottom-style border-left-style |
枠線のスタイルを個別に指定する。 （書式、属性値は、border-styleと同様） |
| border-width | 枠線の太さを指定する。 書式 {bouder-width:値;} 数値+単位 thin（細線） medium（通常の太さの線） thick（太線） |
| border-top-width border-right-width border-bottom-width border-left-width |
枠線の太さを個別に指定する。 （書式、属性値は、border-widthと同様） |
| border-color | 枠線の色を指定する。 書式 {border-color:値;} #rrggbb rgb（ ） 色名 transparent（透明） |
| border-top-color border-right-color border-bottom-color border-left-color |
枠線の太さを個別に指定する。 （書式、属性値は、border-colorと同様） |
| border | 各枠線の属性をまとめて指定する。 書式 {border:border-widthの値 border-styleの値 border-coloの値;} ※順不同 |
| border-top border-right border-bottom border-left |
各枠線の属性をまとめて指定する。（書式は、borderと同様） |
| margin | マージンを設定する。 書式 {margin:値;} 数値+単位 auto |
| margin-top margin-right margin-bottom margin-left |
マージンを個別に設定する。（書式は、marginと同様） |
| padding | 内容と枠線の間隔を指定する。 書式 {padding:値;} 数値+単位 auto |
| padding-top padding-right padding-bottom padding-left |
内容と枠線の間隔を個別に指定する。（書式は、paddingと同様） |
配置
| position | 要素の配置の方法を指定する。 書式 {position:値;} static（指定なし） relatuve（通常配置される位置からの相対位置で指定） absolutenormal（親要素に対して絶対的な位置で指定） |
| top bottom |
上下の位置を指定する。 書式 {top/bottom:値;} 数値+単位 パーセント auto |
| left right |
左右の位置を指定する。 書式 {left/right:値;} 数値+単位 パーセント auto |
| height | ボックス要素の高さを指定する。 書式 {height:値;} 数値+単位 パーセント auto |
| width | ボックス要素の幅を指定する。 書式 {width:値;} 数値+単位 パーセント auto |
| overflow | ボックスの内容あふれの処理方法を指定する。 書式 {overflow:値;} visible（高さ、幅の指定を無視してすべて表示） hidden（高さ、幅の指定により範囲内のみ表示） scroll（スクロールバーを表示） auto（ブラウザの処理に任せる） |
| z-index | 重ね合わせの順序を指定する。 （position属性が指定されている要素のみに適用される。） 書式 {z-index:値;} 数値（整数） auto |
| visibility | 表示/非表示を設定する。 書式 {visibility:値;} visible（通常通り表示） hidden（指定した箇所を空白として表示） |
| display | 表示を変更する。 書式 {display:値;} block（ボックス要素にする） inline（インライン要素にする） list-item（リストアイテム要素にする） none（存在しないものとして処理される） |
| float | ボックス要素に対し、テキストの回り込みを指定する。 書式 {float:値;} left（ボックス要素が左、テキストが右に回り込む） right（ボックス要素が右、テキストが左に回り込む） none（回り込みなし） |
| clear | 回り込みを解除する。 書式 {clear:値;} left（left指定を解除する） right（right指定を解除する） both（両方解除する） none（解除しない） |
リスト
| list-style-type | リストのマークを指定する。 書式 {list-style-type:値;} discc（黒丸） cercle（白丸） square（四角） decimal（10進数） lower-roman（小文字ローマ字） upper-roman（大文字ローマ字） lower-alpha（小文字アルファベット） upper-alpha（大文字アルファベット） none（なし） |
| list-style-imege | リストのマークにイメージを指定する。 書式 {list-style-image:値;} url（ ） none |
| list-style-position | リストのぶら下げインデントを指定する。 書式 {list-style:list-styleの値 （list-style-positionの値 list-style-imageの値）;} |
| list-style-type | リストのマークを一括指定する。 書式 {list-style:list-styleの値 （list-style-positionの値 list-style-imageの値）;} |
