CSS まとめ 1. CSS とは? ホームページを作る技術の一つで, 見た目の記述をするもの. W3C で作成されており,W3C のサイトで仕様を確認できる. 2. CSS が記述できる場所 1 style タグで記述 (html 内に記述 ) する. 2 style 属性で記述 (html 内に記述 ) する. 3 外部ファイルで記述する.( 一般的な方式であり, 以下, この方式の説 明 ) 3. セレクタとプロパティ セレクタ { プロパティ名 : 値 ;} の形で記述する. プロパティを適用させたい部分をセレクタで指定している. * ですべての要素を指定する ( ユニバーサルセレクタ ) 要素名で指定する (p,h1,div など )
id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b 属性のあるもの a[b = ** ] :a タグ内で b 属性が ** のもの a[b~= ** ] :a タグ内で b 属性に ** を含むもの 6. 疑似クラス ある特定の要素を指定することができる. たとえば, セレクタ :first-child : セレクタ内の最初のものを指定する input:forcus : フォーカスが当てられた ( 選択された ) 場合
を指定する 7. リンクタグでの疑似クラス a:link : サイトにアクセスしたことがない場合を指定 a:resited: サイトにアクセスしたことがある場合を指定 a:hover : リンクにマウスカーソルが乗った時を指定 a:active : クリックしたときを指定 8. 疑似要素 ある要素の一部を指定する ( 疑似クラスではある要素を指定している ) セレクタ :first-line : セレクタ指定の一行目の部分を指定 セレクタ :first-letter : セレクタ指定の一文字目を指定 セレクタ :before{ content: ** ;} : セレクタ指定の前に ** を入れる セレクタ :after{ content: ** ;} : セレクタ指定の後に ** を入れる 注 ) 下二つはコンテントプロパティが必須 9. セレクタの詳細度
複数のセレクタがあった場合に, どのセレクタが優先されるかを決めるルー ルのこと. 以下の 4 つの要素で指定 1 style = があるか 2 id があるか 3 属性 / 擬似クラスがあるか 4 要素 / 擬似要素があるか あった場合は 1 カウントしていく. たとえば, a{color:skyblue;} :0,0,0,1 a:link{color:skyblue;} :0,0,1,1 この場合は下が優先される. そのほかにも, 同じ優先度でもあとから書いたほうが優先 順番があり,1 が強く,4 が弱い. プロパティの後に,!inportant をつけることで, 最優先にできる
10. プロパティ値の指定 < 長さ > px : ピクセル (font-size:16px) em : 親要素の何倍か?(font-size:2em;: 上のピクセル数だと 32px になる ) % : 親要素の何 % か?(font-size:150%;: 上のピクセル数だと 32px になる ) < 色 > 名前 blue,orange などの直接の名前を記述する方法 #000000,#000 などの数値での指定 (#000 は #000000 に変換さ れる,#000000 は RGB(0, 0, 0) に変換される ) がある. RGB :red,green,blue を数値で指定 (0~255), rgb(0, 0, 0) など 11. ボックスモデル 四角の領域 スタイルの設定
width : 横幅 height : 縦幅 border : 枠線 padding : 枠線の内側の余白 margin : 枠線の外側の余白 注 )width:50%; はうまくいくが,height:50% は親要素の大きさを指定しない といけない. <border> border-color : 色 border-width : 幅 border-style : 線のスタイルを指定 値には solid( 実線 ) dotted( 点線 ) dashed( 波線 ) double( 二重線 ) inset,outset( 立体的 )
などがある. border-top(bottom, right, left) で上下右左の場所を指定 (border-top-color など ) border で色, 幅, スタイルを一気に指定可能 ( 順不同 ) <padding> padding-top(bottom,right,left) で上下左右を指定 padding で上下左右を一気に指定可能 (padding: 10px 20px 30px 40px な ど ) 注 )padding の後の数値の数が何個かで意味が変わる. 数値が 1 つ : すべてを指定 数値が 2 つ :top/bottom と right/left を指定 数値が 3 つ :top と right/left と bottom を指定 数値が 4 つ :top,right,bottom,left の順に指定 ( 上から時計回り ) <margin> padding と同じように指定できる.
複数のボックスのマージンが被るときは大きいほうのマージンに結合 される ( マージンの結合 ) 12. テキストのスタイル color : 色 font-size : テキストのサイズ font-family : フォントの種類 font-weight : 値を bold で太字にできる text-align : 行揃え (right/center/left など ) text-decoration : テキストに線を付け加える 値として underline( 下線 ) line-through( 打ち切り線 ) none( 下線を消す ) がある. 13. list のプロパティ list-style-type : リスト前のマーカーの指定ができる.
値として disc( 黒丸 ) circle( 白丸 ) square( 四角 ) decimal( 連番 ) lower-alpha( アルファベット順 ) がある. list-style-image : マーカーを画像にできる. list-style-position : マーカーの位置の指定 値として inside : マーカーをリスト内に入れることができる outside : デフォルト がある. list-style で一気に記述可能だが,type と image は image が優先される. 14. カーソルの形状
cursor : マウスカーソルの形を指定できる 値としては help(? マーク ) move( ドラッグマーク, 十字など ) pointer( ポイントマーク, 指さしのものなど ) url( ** )( 指定した画像 ) がある. 15. 背景 background-color : 色 background-image : 画像 background-repeat : 画像の繰り返し 値として no-repeat( 画像の繰り返しなし ) repeat-x(x 軸方向にリピート ) がある. background-position : どこから画像を張り付けるかの指定 (10px 10px なら x=10,y=10 の座標から.top center なら上の中央からなど )
background-attachment 値として scroll( スクロールで動いていく ) fixed( 画面上に固定される ) などがある. background で一気に表現可能である. 16. 要素の配置 html の要素はブラウザ初期値で配置が決まっている. ブロックボックス : 縦に配置される. ブロックボックス要素とし て p や h1 タグなどがある. インラインボックス : 横に配置される. インラインレベル要素とし て a や br タグなどがある. display : 上記のものを意図的に変更したい場合に使う. 値として
block( ブロックボックス ) inline( インラインボックス ) list-item( 左にマーカーのあるリスト ) inline-box( 横配置でありながらブロックボックスの特性を持つ ) none( 変更なし ) などがある. 17. 表組の作成 display:table : 表組を作る display:cell : 表の要素にする display:row : 表の列を作り, そこに入れる 18. 位置の調整 position 値として static( 初期値 ) relative( 初期値に比べて取れだけずらすか,top,left でどう動
かすか指定できる ) fixed( スクロールしても位置を固定する ) absolute( 親要素に対しての, 位置の調整 ) などがある. 19. 要素の重なり順の指定 z-index : 値に数値を入れることで順序付けをする. position:static 以外のものに適用可能. 普通ならあとから書かれた処理が上に来るが, 値が大きいほうを上 にして表示する. overflow : 重なった状態の指定ができる. 値として visible( デフォルト ) hidden( はみ出た部分を消去して表示 ) scroll( スクロールを作り, はみ出た部分も見れるようにする ) などがある.
20. そのほか line-height : 要素内の行ごとにある行ボックスの高さを決める. 値 としては,px や倍率がある. 倍率の場合は単位を書かない. vertical-align : 行ボックス内にイメージを張る際に, どの線にそろえ るかを指定する. 値としては, baseline( デフォルト, 文字の下線部あたりにそろえる ) top( 行ボックスの上 ) bottom( 行ボックスの下 ) middle( 小文字の a の真ん中を通るラインに, 画像の真ん中を そろえる ) などがある. また px や em で微調整できる. float : 指定した要素を通常の配置から切り離し, 左右に置く ことができる.width で幅を指定するのが決まりとなっている. clear :float で通常の配置から切り離されたものの, 下に配置するも の.float がよっている方向によって値が決まり, 右なら right, 左なら left, 両方に適用させる場合は both をつける.