CSSについて少し学んだ

CSSについて少し学んだCSSはちゃんと学んでなかったのでちょっとやってみました。覚えておきたいところをメモです。またしても、ドットインストール。

セレクタの指定方法

• カンマで区切った場合
  • 複数の要素を指定
• スペースで区切った場合
  • 下の階層にあるすべての要素を指定
• 不等号記号（>）で区切った場合
  • 子要素（直下）の要素のみ指定
• プラス記号(+)で区切った場合
  • 直後の要素のみ指定
• 続けて記載した場合
  • 要素のand指定（p.itemの場合、pであって、かつ,.itemである）

rgbでの色の指定

h1 {color: rgb(125,255,20);

こういう指定もできる。

背景画像を固定にする

background-attachment: fixed;

divの高さを％で指定する

ボックス要素のwidthに関しては％で表示すると親要素を基準として指定したサイズになるが、heightはならない。heightで％を利用する場合は、body, html {height:100%;}というように親要素の値を指定する必要がある。

margin/paddingの指定

いつも忘れてしまうので、、、

• 1つ指定: all
• 2つ指定: top&bottom, left&right
• 3つ指定: top,left&right,bottom
• 4つ指定: top, right, bottom, left

display, overflow

• display
  • block: 文章中の纏まった要素を表す
    • 前後に改行が入る
  • inline: 文章中の要素を表す
    • 前後に改行が入らない（高さと幅の設定が解除）
  • inline-block: 文章中の要素を表す
    • 前後に改行が入らない（高さと幅の設定が有効）
  • none: 表示されない
• overflow
  • visible: 要素のはみ出した部分を表示する
  • hidden: 要素のはみ出した部分を隠す
  • scroll: 要素のはみ出した部分をスクロールさせる

position, z-index

ある要素の子要素を親要素に対して相対的に配置したいときに使われる。親要素に、relative、子要素にabsoluteを指定することがよくある。

• position
  • static
  • relative
  • absolute
  • fixed
• z-index: 同じ階層でstatic以外のものに対して使うことができる。数値が大きいほど上になる。

list-style

• list-style-type: マーカーの種類
  • circle: 白丸
  • square: 四角
  • katakana: カタカナ
• list-style-position: マーカーの位置
  • outside: 領域の外側
  • inside: 領域の内側
• list-style-image: マーカーをイメージにする

cursor

要素の上にカーソルが乗った時に、カーソルの形状を変える

• cursor
  • move
  • help
  • wait
  • pointer

擬似クラス

要素が特定の状態になった時にスタイルを指定できる。

a:link { color:blue;}
a:visited { color: gray;}
a:hover { font-weight: bold;}
a:active { background: red;}
h1:hover { background:orange;}

参考

• プログラミングのレッスン一覧 – プログラミングならドットインストール