Web屋の為の、参考リンク&メモサイト
参考リンク&メモ

CSS

ID

参考:http://www.tagindex.com/stylesheet/basic/format3.html IDをCSSで指定する時は「#」を使用 id名やclass名に命名規則をつける ※ブロックレベル要素とインラインレベル要素の関係 ブロックレベル要素 要素名 意味・用途・目的 参考(DOCTYPE宣言) address アドレス(連絡先) blockquote 長い引用文 center 中央揃え Transitional、Framesetのみ使用可 div 分割, 区分された特定の範囲 align属性はTransitional、Framesetのみ使用可 dl 用語とその説明(文) compact属性はTransitional、Framesetのみ使用可 fieldset 送信フォーム部品のグループ化 form 送信フォーム部品のすべて target属性はTransitional、Framesetのみ使用可 h1~h6 見出しレベル1~6 align属性はTransitional、Framesetのみ使用可 hr 水平線(区切り線) align、size、width、noshade属性はTransitional、Framesetのみ使用可 noframes フレーム表示されないときのコメント用 Transitional、Framesetのみ使用可 ol 番号付きリスト type属性、compact属性、start属性はTransitional、Framesetのみ使用可 p 段落としての文章 align属性はTransitional、Framesetのみ使用可 pre 整形したとおりのテキスト表示 width属性はTransitional、Framesetのみ使用可 table テーブル(表) align属性、bgcolor属性はTransitional、Framesetのみ使用可 ul 番号なしリスト type属性、compact属性はTransitional、Framesetのみ使用可 インラインレベル要素 要素名 意味・用途・目的 参考(DOCTYPE宣言) …

擬似クラス

擬似クラスとは :link擬似クラス 未訪問リンクのスタイルを指定します。 :visited擬似クラス 訪問済みリンクのスタイルを指定します。 :hover擬似クラス ユーザーの操作で要素にカーソルなどが乗った際のスタイルを指定します。a:hoverでは“カーソルは乗っているがクリックはされていない状態”です。 :active擬似クラス ユーザーの操作で要素がアクティブになった際のスタイルを指定します。a:activeでは“クリックされてから離されるまでの状態”です。 疑似クラス(pseudo-classes)とは、 要素や属性などの文書構造だけでは特定できない“状況”を対象としてスタイルを適用するセレクタのことです。 例えば、ユーザー操作による状況変化に対してスタイルを適用できるため、ウェブページに動的な効果を与えることが出来ます。 参考:http://www.htmq.com/selector/link.shtml 参考:http://www.htmq.com/selector/visited.shtml 参考:http://www.htmq.com/selector/hover.shtml 参考:http://www.htmq.com/selector/active.shtml 擬似要素とは また、擬似要素(pseudo-element)とは、 要素や属性などの文書構造だけでは特定できない“特定箇所”を対象としてスタイルを適用するセレクタのことです。 例えば、ブロックレベル要素の一行目や一文字目にスタイルを指定したり、要素の前後にテキストや画像などを挿入することが出来ます。 参考:http://www.htmq.com/selector/first-letter.shtml

リスト

list-style-type:値 行頭記号または行頭番号の種類を指定 参考:http://www.htmq.com/style/list-style-type.shtml list-style-image:値 行頭記号または行頭番をイメージにする 参考:http://www.htmq.com/style/list-style-image.shtml URI(URL)で画像ファイルを指定 URI(URL)で画像ファイルを指定します。 none リストの先頭に表示するマーカーに画像ファイルを使用しないことを明示します。これが初期値です。 list-style-position:値 行頭記号または行頭番号の位置を指定 参考:http://www.htmq.com/style/list-style-position.shtml outside マーカーがリスト内容の領域の外側に表示され、マーカー以外の部分がインデント(字下げ)された形になります。 inside マーカーがリスト内容の領域の内側に表示され、マーカーとマーカー以外の部分の高さが揃います。 list-style: list-style-typeの値 list-style-imageの値 list-style-imageの値 リストのプロパティを一括指定する リストタグのマージンとパディング 各ブラウザで使用が違う(IE6,7はマージンで作られている)

CSS

width:値 内容の幅を指定する 領域でマージン・パディングを・ボーダーを含まない hight:値 内容の高さを指定する float:値 回り込みを指定する left 要素の左揃え後ろに続く要素を右側 rigth 要素の右揃え後ろに続く要素を左側 none 回り込ませない 参考:http://www.htmq.com/style/float.shtml clear:値 回り込みを解除する left 左揃えの要素を回り込みを解除 right 右揃えの要素を回り込みを解除 both 要素の回り込みを解除しません none 回り込みを解除しません ※カラムサンプル position:値 要素の配置方法を指定 参考:http://www.htmq.com/style/position.shtml static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。 relative 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。 absolute 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。 fixed 絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。 ※positionプロパティで指定するのは、配置方法(基準位置)のみです。 実際の表示位置の指定には、 参考:top、 参考:bottom、 参考:left、 参考:right を併用して、基準位置からの距離を設定する必要があります。 z-index:値 重ね合わせの順番を指定 参考:http://www.htmq.com/style/z-index.shtml 整数値で指定 重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。< auto 親要素と同じ階層になります。これが初期値です。 overflow:値 ボックスからあふれた内容の処理を指定 参考:http://www.htmq.com/style/overflow.shtml visible ボックスからはみ出して表示されます。これが初期値です。尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。 …

ボックス

余白(マージン) 枠線(ボーダー) 間隔(パディング) border-style:値 枠線のスタイルを指定する 参考:http://www.htmq.com/style/border-style.shtml none ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。 hidden ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合はhiddenの値が優先されます。 solid 1本線で表示されます。 double 2本線で表示されます。 groove 立体的に窪んだ線で表示されます。 ridge 立体的に隆起した線で表示されます。 inset 上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。 outset 上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。 dashed 破線で表示されます。 dotted 点線で表示されます。 border-width:値 枠線の太さを指定する 参考:http://www.htmq.com/style/border-width.shtml 数値で指定 数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の「x」の高さを1とする単位です。 キーワードで指定 thin(細い)、medium(普通)、thick(太い)のうち、いずれかを指定します。キーワードで指定する場合、実際に表示される太さはブラウザにより異なります。 border-color:値 枠線の色を指定する 参考:http://www.htmq.com/style/border-color.shtml 色 #000000などの記述やカラーネームで色指定をします。 transparent ボーダーの色を透明にします。 padding:値 内容と枠線の感覚を指定する 参考:http://www.htmq.com/style/padding.shtml ※パディングには負の値を指定することはできません。 margin:値 余白を指定する 参考:http://www.htmq.com/style/margin.shtml paddingは0~取れる marginはマイナスの設定も可能 border: border-style border-wodth border-color 枠線のプロパティを一括で指定 値と値との間は半角空白で区切る …

背景

background-color:値 背景色を指定する 色コード 色名 transparent 文字色と背景はコントラストの強いものを指定する backgoround-image:値 背景画像を指定する background-image:url(“画像名”); ※背景画像を指定するときは同時に背景色を設定しておく backgoround-repeat:値 背景イメージの繰り返し方法を指定する 参考:http://www.htmq.com/style/background-repeat.shtml repeat repeat-y repeat-x no-repeat backgoround-position:値 背景イメージの位置を指定する 水平方向位置 垂直方向位置 ピクセルでの配置可能 ※no-repeatの場合デフォルトはセンター・ミドルに揃う background: backgoround-color backgoround-image backgoround-repeat backgoround-position 背景のプロパティを一括で指定 値と値との間は半角空白で区切る ※順番の指定はなし

フォント

font-family:値 フォントの種類を指定 参考:http://www.htmq.com/style/font-family.shtml 総称フォントファミリー名 font-size:値 フォントサイズを指定する 参考:http://www.htmq.com/style/font-size.shtml 相対単位 絶対単位 フォントサイズを指定するときは相対単位を推奨 font-weight:値 文字列の太さを指定する 参考:http://www.htmq.com/style/font-weight.shtml font-style:値 文字列の斜体を指定する 参考:http://www.htmq.com/style/font-style.shtml letter-spacing:値 文字間隔を指定する 参考:http://www.htmq.com/style/letter-spacing.shtml normal 標準の間隔にします。これが初期値です。 数値で指定 数値にpxやemやexなどの単位をつけて指定します。尚、pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の「x」の高さを1とする単位です。 line-height:値 行間隔を指定する 参考:http://www.htmq.com/style/line-height.shtml normal ブラウザが判断して行の高さを決定します。これが初期値です。 数値に単位をつけて指定 数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の「x」の高さを1とする単位です。 数値のみで指定 単位をつけずに数値のみを指定すると、その数値にフォントのサイズを掛けた値が行の高さとなります。例えば「1.5」と指定すると「150%」や「1.5em」と指定した場合と同じになります。 %で指定 %値で指定します。 font: font-styleの値 font-weightの値 font-sizeの値 line-heightの値 font-familyの値 フォントのプロパティを一括で指定 値と値との間は半角空白で区切る ※font-sizeとfont-familyの値は省略できない ※font-styleとfont-weightの値の順番は入れ替わっても良い ※line-heightの値の前には「/(スラッシュ)」を入れる

テキスト

color:値 文字色を指定する 参考:http://www.htmq.com/style/color.shtml ビットとバイト 10進数、2進数、16進数対応表 Web Safe Color (カラーチャート) Webセーフカラー(216色) 原色大辞典 ※色名での指定は非推奨 text-align:値 水平方向の位置を指定する 参考:http://www.htmq.com/style/text-align.shtml ブロックレベル要素に対して指定 left 左揃え right 右揃え center 中央揃え 参考:justify 両端揃え text-decoration:値 文字列の装飾を指定する 参考:http://www.htmq.com/style/text-decoration.shtml none 文字列を装飾しません underline 文字列に下線を入れる overline 文字列に上線を入れる line-through 文字列に取り消し線を入れます blink 文字列を点滅させる ※blinkはIEでは非対応 ※下線や点滅の使用上の注意 text-indent:値 インデントを指定する text-indent テキストインデント 参考:http://www.htmq.com/style/text-indent.shtml 数値+単位指定方法 vertical-align:値 行内またはセル内での文字列の垂直方向位置を指定する vertical-align ヴァーティカルアライン 参考:http://www.htmq.com/style/vertical-align.shtml ※インラインに対して指定 ※行内では使えない。 ※画像とセットの関係を指定する時使が多い ■例(画像)  baseline を指定 …

CSSの基本

スタイルの適用方法 同一の要素すべてに同じ要素を適用する 部分的にスタイルを適用する CSSの記述方法 セレクタ プロパティ 値 ※ひとつのセレクタに複数のスタイルを適用する 例:h1{color:#ffffff ;background-color:#0000ff} ※要素を絞り込んでスタイルを適用する 例:h1,p{color:#0000ff} CSSの記述場所 CSSファイルに記述する HTMLファイル内に記述する ※CSSの記述の優先順位 CSS記述の注意点 半角で入力する 大文字・小文字の区別はない ブラウザがサポートしないプロパティがある HTMLファイル内にCSSを記述する場合、コメント扱いする HTMLのコメント&lt;!– –&gt; CSSのコメント/* */ CSSファイルの文字コード指定する @charset “文字コード”; CSS記述方法の工夫 ※改行・タブ・半角空白 ブラウザ表記に影響はありません。 ※「;セミコロン」を最後につけておきましょう。 CSSの記述 スタイル関連のCSS CSSの宣言 meta http-equiv=”Content-Style-Type” content=”text/css” HTMLファイルにCSSファイルをリンクする link rel=”stylesheet” type”text/css” href=”CSSのファイルのパス” rel レル HTMLファイルのスタイルを定義・適用する <style type=”text/css”ル要素 <div>セレクタ{プロパティ:値}</styleル要素> クラスで定義するスタイルを適用する <要素名></要素名> 特定の範囲をひとまとまりにする ブロックレベル要素 <div>~</div> インラインレベル要素 <span>~</span> …

Copyright © eizis-web All Rights Reserved.