CSS まとめ01

Webページにスタイルシートを貼り付ける方法

インライン方式
実際の HTMLの要素に直接 style属性を使って設定

エンベッド方式
head要素の中に style要素を使って埋め込み

外部リンク方式(リンキング方式)
別途スタイルシートだけを記述した文書を作成

参考サイト
http://www.scollabo.com/banban/lectur/style.html

list-style-type
リストの先頭に表示するマーカー文字の種類を指定。

list-style-type: none; マーカーなし
list-style-type: disc; 黒丸
list-style-type: circle; 白丸
list-style-type: square; 黒四角

参考サイト
http://www.htmq.com/style/list-style-type.shtm

text-decoration
テキストに下線・上線・打ち消し線を付けたり、点滅させる。
(点滅はIESafariGoogle Chrome対応していない。)
同時に複数の値を指定する場合には、値を任意の順序でスペースで区切って記述。

none 何もなし。初期値
underline テキストに下線
overline テキストに上線
line-through テキストに打ち消し線
blink テキストが点滅

text-align
文字の行揃えの位置や、均等割付を指定する
left左寄せにします。

right 右寄せ
center 中央揃え
justify 均等割付

border-bottom
下ボーダーのスタイル・太さ・色を指定。
スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述。

none ボーダーなし。重なり合う場合は他の値が優先。初期値。
hidden ボーダーなし。重なり合う場合はhiddenの値が優先。
solid 1本線
double 2本線
groove 立体的に窪んだ線
ridge 立体的に隆起した線
inset 上と左のボーダーが暗く、下と右のボーダーが明るく表示。囲まれた領域全体が立体的に窪んで表示。(上下左右の一部だけに指定しても立体感は出ない。)
outset 上と左のボーダーが明るく、下と右のボーダーが暗く表示。ボーダーで囲まれた領域全体が立体的に隆起したように表示。上下左右の一部だけに指定しても立体感は出ない。
dashed 破線で表示。
dotted 点線で表示。

参考サイト
http://www.htmq.com/style/border-bottom.shtml

font-family

sans-serif ゴシック系のフォント
serif 明朝系のフォント
cursive 筆記体・草書体のフォント
fantasy 装飾的なフォント
monospace 等幅フォント

画像の読み込み方法

<img src=”画像ファイルまでのパス” />
・CSSでの読み込み(CSSファイル内)

background-image:url(“画像ファイルまでのパス”);
・CSSでの読み込み(CSSファイル内)

background:url(“画像ファイルまでのパス”);
・CSSでの読み込み(htmlタグ内に直接CSS指定)

overflow・・・・・はみ出た内容の表示方法を指定する
visible
ボックスからはみ出して表示されます。これが初期値です。尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。
scroll
入りきらない内容はスクロールして見られるようになります。
hidden
はみ出た部分は表示されません。
auto
ブラウザに依存します(一般的にはスクロールして見られるようになります)。