Transcript PPTX版

CSS テキスト補足資料
テキストに関するプロパティ
text-indent
字下げインデントを指定
数値+単位（パーセント）で指定
（例） text-indent:1em;
※emで設定するのが一般的
text-transform
大文字から小文字へ変換
capitalize 最初の一文字を大文字に変換
uppercase すべて大文字に変換
lowercase すべて小文字に変換
none 変換しない（デフォルト値）
（例） text-transform:capitalize;
テキストに関するプロパティ
letter-spacing
文字間隔を指定
数値+単位（パーセント）で指定
（例） letter-spacing:0.2em;
line-height
行間を指定
数値+単位（パーセント）で指定
（例） line-height :1.6;
0.3
こんにちは
1
0.3
line-height :1.6
こんにちは
※単位を指定するのが仕様ではあるが、実務では単位は付けない方が理想とされている。
参考URL
http://potato.2nd-half.jp/tips/css/line-height/
テキストに関するプロパティ
vertical-align
垂直方向位置を指定
baseline テキストのベースラインに揃える
sub ベースラインより下に下げる
super ベースラインより上に上げる
top テーブルセル内で上揃えを行う
bottom テーブルセル内で下揃えを行う
middle テーブルセル内で中央揃えを行う
（例） vertical-align : middle;
※主にテーブルセル内で設定するのが一般的。テキストで使用する事は少ない
white-space
スペースや改行の表示方法を指定
nowrap 自動的に改行しない
pre スペースや改行をそのまま表示する
normal 自動的に改行する（デフォルト値）
（例） white-space:nowrap;
※主にテーブルセル内のテキストを改行したくない場合nowrapを指定し、対応する
その他でこのプロパティを利用する事は少ない
フォントに関するプロパティ
font
フォントに関するプロパティを一括指定
font-style、 font-variant、 font-weight、 font-size、 line-height、 font-familyを一括に指定
指定の際は、
1.font-style
2. font-weight
3.font-size（省略不可）
4.line-height
5.font-family （省略不可）
の順に、値を半角スペース区切りで指定する。
また、 line-heightは、前に「/」をつける必要がある。
（例） font:italic bold 20px /1.6 "ＭＳ Ｐゴシック, sans-serif;
背景に関するプロパティ
background
背景に関するプロパティを一括指定
background-color、 background-image、background-repeat、 background-positionを一括に指定。
fontプロパティのように、順序や省略出来ないプロパティ等もない。
background:#ff0000;
のように、background-colorの値のみの指定でも可。
（例） background:url(image/back.gif) top center no-repeat #ffffff;
順序は特に指定はないが、一般的に
background-image、background-repeat background-position、 background-color
の順で指定する事が多い。
背景に関するプロパティ
background-attachment
背景画像を固定する
fixed 背景画像を固定する
scroll 背景画像をスクロールに合わせて移動する（デフォルト値）
（例） background-attachment:fixed;
ボックスの概念について
margin
border
padding
内容
height
ブロック要素の枠線（border）から、
内余白 ・・・ padding
外余白 ・・・ margin
と、なる。
border、padding、marginは、width・heightのそれぞれ
外側に追加される。
width
（例）h1に下記プロパティを指定された時の幅・高さは？
10px
5px
10px
h1{
width:600px;
height:20px;
padding:10px;
border-width:5px;
margin:10px;
}
幅
<h1>FIFAワールドカップ</h1>
20px
10px
5px
10px
10px 10px
5px
600px
・・・ 600（width値）+20（padding左右分）+10（border左右分）+20（margin左右分） ＝
高さ ・・・ 20（height値）+20（padding左右分）+10（border左右分）+20（margin左右分） ＝
10px 10px
5px
650px
70px
ボックスに関するプロパティ
border
枠線に関するプロパティを一括指定
border-width、border-style、border-colorを一括に指定。
fontプロパティのように、順序や省略出来ないプロパティ等もない。
border:none;
のように、 border-widthの値のみの指定でも可。
（例） border:1px solid #000000;
順序は特に指定はないが、一般的に
border-width、border-style、border-color
の順で指定する事が多い。
Floatとclearについて
下記のように横並びにしたい場合
Floatとclearについて
ボックス単位で考えてみると・・・
h1
h1
img
img
float:left
p
p
hr
hr
img
hr
img
p
imgに
float:left
を設定
float:left
p
hr
img
float:left
p
hr
img
p
hr
ｉｍｇが左側にいき、それ以降が右に移る
floatを設定すると、それ以降すべて右側に来るので、解除をしないといけない
Floatとclearについて
解除したいhrにclear:bothを設定し、floatを解除すると・・・
h1
img
float:left
h1
img
p
hr
img
float:left
p
hr
img
p
hr
img
clear:both
p
clear:both
hr
p
img
hr
float:left
clear:bothを設定する事によって、回り込みが解除され、本来の列に戻る
hr
p
clear:both
配置に関するプロパティ
position
要素の配置方法を指定する
relative 要素の位置を相対指定する
absolute 要素の位置を絶対指定する
fixed 要素の位置を固定する
static 要素の位置を指定しない（デフォルト値）
要素の位置は、
top 上の位置を指定する
bottom 下の位置を指定する
left 左の位置を指定する
right 右の位置を指定する
プロパティにて指定する。
（例） position:absolute;
top:10px;
left:20px;
※ウインドウ左上から、上10px、左20pxの位置にボックスを配置
配置に関するプロパティ
相対指定と絶対指定の違い
標準（static）で表示される位置を基準として表示する方法を相対指定。
親ボックスに「static」以外の「position」を設定している場合は親ボックスの左上からを、
親ボックスに「position」を設定していないか、「static」を設定している場合はブラウザーの左上を基準と
した位置を基準として表示する方法を絶対指定と言います。
配置に関するプロパティ
overflow
ボックス内からあふれ出た場合の処理の指定
visible ボックスからはみ出して表示（デフォルト値）
hidden ボックスからはみ出た部分は表示しない
scroll ボックスからはみ出た部分はスクロールにて表示
auto ブラウザに任せる（一般的にはスクロール表示）
（例）
overflow:visible;
overflow:scroll;
overflow:didden;
配置に関するプロパティ
z-index
重なり順を指定
数値（単位は必要なし）
数字が大きくなるほど、重なり順が上になる。
（例）
#A{
z-index:4;
}
#B{
z-index:2;
}
#C{
z-index:3;
}
#D{
z-index:1;
}
配置に関するプロパティ
visibility
ボックスの表示・非表示を指定
hidden ボックスを非表示にする
visible ボックスを表示する（デフォルト値）
（例） visibility :hidden;
display
ボックスの表示形式を指定
block インライン要素をブロック要素として表示
inline ブロック要素をインライン要素として表示
list-item 要素をリスト項目として表示
none ボックスを非表示にする
（例） display: block;
リストに関するプロパティ
list-style-type
リストマーカーの形状を指定
（例） list-style-type:circle;
list-style-image
リストマーカーに画像を指定する
（例） list-style-image:url("images/arrow.gif");
リストに関するプロパティ
list-style-position
リストマーカーの位置を画像を指定する
outside リストマーカーをリスト領域内の外側に表示（デフォルト値）
inside リストマーカーをリスト領域内の内側に表示
（例）
list-style-type: circle;
list-style-position :outside;
list-style-type: square;
list-style-position :inside;
リストに関するプロパティ
list-style
リストに関するプロパティを一括指定
list-style-type、list-style-position、list-style-imageを一括に指定。
fontプロパティのように、順序や省略出来ないプロパティ等もない。
list-style:none;
のように、 list-style-typeの値のみの指定でも可。
（例） list-style:none inside;