CSSの簡単な書き方(文字色の付け方)- headタグに タグ名{color:色;}で文字色が変わる
- 色をつけたいタグにstyle属性をつける
- CSSを外部ファイルに書く方法(文字色の付け方)
- headに link rel="stylesheet" href="filename.css" を挿入する.
- セレクタとプロパティ
- セレクタ{ プロパティ名: その値;}
- すべて選択する場合は *(ワイルドカード)
- classを選択する場合は.(ドット)を前につける
- idを選択する場合は#(シャープ)を前につける
- もっとセレクタを使ってみる
- 複数のタグにcssを反映する場合は,(カンマ)で区切る
- div 以下のspanタグに反映させたい場合は div span のようにスペースで区切る
- div 直下のspanタグに反映させたい場合は div > span のように>で区切る
- liタグかつlist2クラスをもつタグに反映させたい場合は li.list2
- 属性セレクタ
- aタグの中にtitle属性があるもののみ選択したい場合は a[title]
- 特定の属性をもつもののみを対象にしたいばあい a[href="http:google.com"] など
- 複数のクラスのうち、ひとつをもつものを選択したい場合 a[href~="search"]
- 疑似クラス
- ある要素が特定の状態にある時にスタイルを指定する方法
- ol直下の最初のli要素だけにスタイルを適応させたい場合 ol > li:first-child
- ol直下のすべてのli要素にスタイルを適用させたい場合 ol + li
- リンクに関するスタイル(必ず以下の順番で定義する)
- a:link 未選択のリンク
- a:visited 選択後のリンク
- a:hover マウスカーソルが乗った状態のリンク
- a:active マウスを押した瞬間のリンク
リンク
- formに関するスタイル
- input:focus でinputフォームをマウスで選択した際にスタイルを適用する
- 疑似要素(疑似クラスと違ってある要素の一部を選択する)
- タグ名:first-line タグ内の1行目にスタイルを適用する(ブラウザ上での1行目)
- タグ名:before{content:} , タグ名:after{content:} タグの前あるいは後ろに要素を追加する
- セレクタの詳細度
- プロパティの値を指定する
- フォントサイズの指定
- bodyタグでfont-size: フォントサイズを指定する(~~px)
- body(通常)のn倍を指定する場合: n em
- body(通常)のn%を指定する場合: n %
- 色の指定(RGB値)
- 16進数の場合、合計6ケタで(#000000 ~ #ffffff)
- %表示の場合、rgb(0%,0%,0%) ~ rgb(100%,100%,100%)
- あるいは、rgb(0,0,0) ~ rgb(255,255,255)
- ボックスモデルを理解する
 boxの設定- ボックスに対してweight,heightを指定する. %にするとブラウザの大きさに依存する.
- widthはそのまま%を使うことができるが、heightは先に親要素の高さを指定しておく必要がある.
borderの設定- borderの大きさを指定する.
- border-color: 境界線の色
- border-width: 境界線の太さ
- border-style: solid/ dotted/ dashed/ double/ inset/ outset
- 一気に指定できる: border: 色 太さ スタイル
- 一部だけ変えることもできる: border-top, border-right ...
padding/marginの設定 (bodyのmarginを0にするとpaddingが0になる)- padding/marginプロパティは同時に定義できるが、定義する数で意味が変わる
- 1つ: 上下左右全部同じ値
- 2つ: 上下 左右
- 3つ: 上 左右 下
- 4つ: 上 右 下 左
- marginの場合、上下でぶつかった場合は大きいほうのmarginに相殺される.
- テキスト周りの設定
- color: 文字色
- font-size: 文字の大きさ
- font-family: Arial, Helvetica; フォント
- font-weight: bold/normal; 太さとか
- text-align: right/left/senter; 行ぞろえ
- text-decoration: underline/line-through/none;
- 2つ以上同時に使うこともできる.
- リスト周りの設定
- list-style-type: リストのマーカーの種類を変える
- disk/ circle/ square/ decimal/ lower-alpha
- list-style-image: リストのマーカーに画像を使用する
- list-style-position: inside/ outside マーカーをリストの中に入れるか、外に入れるか
- list-styleで順不同で定義できる. list-style: inside decimalとか (ol使わなくてもいい？)
- カーソルの設定
- 背景色の設定(bodyタグに書く)
- background-color: 背景色を表示
- background-image: url('url') 背景をurlにする
- background-repeat: 1回だけ画像を表示する
- background-position: 背景を表示させる場所を指定
- background-attachment: scroll にするとスクロールしたとき背景が付いてくる
- background-attachment: fixed にすると背景が付いてこない
- background: で順不同で一気に定義できる
- displayプロパティを使ったレイアウト
- ブロック要素： 一行全部ブロックがある
- インライン要素:左詰めで要素の部分のみブロックがある
- display:inline ブロック要素をインライン要素に変換できる. (ただしheight, weidthが無効になる)
- display:inline-block ブロック要素をインライン要素のようにできる. (height, weidthは有効)
- display: none で要素を見えないようにできる ⇒ displayプロパティで要素の位置変更ができる
- 表を作る
- classを指定して display: table-row で列を定義
- classを指定して display: table-cell で行を定義
- positionで位置を調整
- positionプロパティ
- posiiton:relative; (top,left)オプションなどでboxの位置を調整できるようになる(ブラウザの左上から)
- position:fixed; スクロールしても位置を固定しておきたい要素
- position:absolute; 親要素に対して(top,left)オプションで位置を調整できる
親要素がstaticなら親要素の左上基準、それ以外なら左下を基準にする。
- font-size: 文字のサイズ
- line-height: 文字ボックスの高さ(pxなどの単位なしで表記が推奨 例: 1.5)
- img{ vertical-align} : 文字ボックス内のどの位置に画像を表示するか設定する
|
|
