|
\n |
[ トップページ ]
[ ____CommandPrompt ]
[ ____JScript ]
[ ____MySQL ]
[ ____Cygwin ]
[ ____Java ]
[ ____Emacs ]
[ ____Make ]
[ ____Perl ]
[ ____Python ]
[ ____OpenGL ]
[ ____C# ]
[ ____StyleSheet ]
[ ____C++ ]
[ ____Winsock ]
[ ____Thread ]
[ ____VisualStudio ]
[ ____C ]
[ ____Win32API ]
[ ____Lua ]
[ ____PhotoShop ]
ヘッダ検索
■ チュートリアル(Tutorial)
■ 注意点
WARNING
IE9 では style 属性を指定してもDOCTYPE の有無に関係なく反映されないかも
Opera では以下はOK
対応として, style は外部ファイルにすること
iframe など特有のタグの問題ではない
< p style="{ background-color:yellow; }">
test
< /p>
// DOCTYPE の指定
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
&&
< p style="{ background-color:yellow; }">test< /p>
の併用はできない
// DOCTYPE の指定なし ( 互換モードなら可能 )
< p style="{ background-color:yellow; }">test< /p>
// しかし position:fixed を利用するためには DOCTYPE Transitional の指定が必要
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< div>test< /div>
// そこで DOCTYPE の指定と 外部 style を併用することで IE では解決
// なお position:fixed は IE では標準モードのみ対応
// そのため DOCTYPE を指定する
// しかし DOCTYPE を指定すると IE では style 属性が指定できなくなるという話
// IE9 では互換モードならば style 属性は有効
■ DOCTYPE
WARNING
Browser によっては対応する style が変わるため注意が必要
DESC
HTML がどの仕様に準拠しているか宣言するために利用する。
Browser はこの宣言の内容, 有無を見て HTML の解釈をかえる。
そのため 表示結果も変更される可能性がある。
DOCTYPE は 3 種類
// 厳密仕様
< DOC>
// 過去の互換のための移行仕様
// Frame あり仕様
DOC strict
DOC Transitional//EN URL あり
DOC Transitional FrameSet//EN URL あり
宣言なし
DOC Transitional//EN URL なし
DOC Transitional FrameSet//EN URL なし
■ Style.の定義
スタイルを定義するには以下の構文で < head> タグ内に記述する。
< font color=red> // tag ごとに Style を定義 < /font>
< font color=red> // < p> のクラス red を定義 < /font>
/* JavaScript と同じく 対応してない Browser のために comment でくくります */
/*
class 名を指定しないと,
すべての < p> に影響する
( class 名が無効なやつも含みます )
*/
< head>
< style type="text/css">
< !--
P.red {
color: red;
}
P.green {
color: green;
font-weight: bold;
font-style: italic;
}
P { color: red; }
var.green {
color: green;
font-weight: bold;
font-style: italic;
}
-->
< /style>
< /head>
■ Style.を適用
Style を適用するには、クラス属性で定義したスタイル名を指定する
< body>
< p class=red> 赤 < /p>
< p class=green> 緑 < /p>
< /body>
.clearfix{
width : 1000px;
bakground: #FFF;
}
.narrow{
width: 800px;
}
< div class="clearfix clearfix2">
■ スタイルの実用的な利用方法を調べる
ブラウザのデバッグ機能を使うと、スタイルの例がわかる。
Opera では
■ 基本
WEBページ上の「見栄え」を定義するための新しい技術
HTML は文書の意味( 構造 )だけを定義するべきで、
文書の見栄えは定義するべきではない
見栄えは HTML ではなく
スタイルシートで記述 」というのが開発の理由
ModelViewControl の考え方
■ CSS
p#id { color : #ff3300 }
{} 宣言 Block
p#id" をセレクタ（選択子）といい、スタイルが適用される対象
選択子 宣言 // だれに どのような情報をあてるか ?
■ box
POINT
各要素は box という四角い領域をもつ。
StyleSheet の property は以下の設定をかえることで見た目を変更する
box
margin
background-color
background-image
border
padding
内容領域
■ 要素の種類と適用要素
POINT
要素には 大きく分けて２種類がある
// Block 要素は 文章の塊を形成する。改行がはいる
block 要素
table, tr, td, div, h*, pre
// inline 要素は 文書の部分を形成する
inline 要素
span, em
すべての要素
Block 要素のみ
inline 要素のみ
特定の要素
// text-align は Block 要素のみ
// BAD
< span style="{ text-align : right}">test< /span>
// OK
< div style="{ text-align : right}">test< /div>
// background-color は全要素に使える
< p> test
< em style="{background-color : red}"> test < /em>
test
< /p>
// list-style-image は li, ul, ol 要素のみ
< ol style={"list-style-image : url('test.gif')" }>
< li> test
< li> test
< /ol>
■ 継承(Inheritance)
DESC
各要素は親子関係をもち、スタイルの値は子要素に継承されることがある。
継承されるスタイル
body { color:red; } と定義されている時
h1 要素の color:red がh1要素にも継承されて
bbb の文字も赤くなる。
< body>
aaa
< h1>bbb< /h1>
aaa
< /body>
■ メリット
■ 見栄えを一度に指定できます
DESC
H1要素に < font color=red>〜< /font> を指定してまわるよりも
スタイルシートで一度に指定した方がラクチン
外部ファイルで指定すればなお OK
■ きせかえOK
DESC
好きな見栄えにできます
IE
[インターネットオプション] > [ユーザ補助] > [ユーザースタイルシート]
人のページに自分の好きなスタイルシートファイルを適用することができます
黒地に白文字が好き
大きな字で読みたい
自分好みのスタイルを適用できる。
■ 見た目と意味を分離できる
Webページを自動収集して情報データベースを作成したり
目の見えない人が音声ブラウザでWebページを読む場合など
見栄えがあまり重要視されないケースもあります
見栄えを別のページで記述することにより
不要な見栄え情報を読み込んでくる煩わしさを解消できる。
■ おおまかな流れ
SYNTAX
宣言 == [ 特性(property) : 値 ]
タグに依存しない class も定義できる
.red { color: red; }
< h1 class=red>これはredクラスです< /h1>
< p class=red>これもredクラスです< /p>
< span class="black bold">黒くて太いのがスキ！< /span>
// クラス名がなければ, 自動で反映されます
// list はすべて太く
li { font-weight : bold; }
// r クラスは 赤
li.r { color : red; }
< ol>
< li class=r> 赤くて太いリスト
< /ol>
< span> はインライン要素（前後で改行されない）
< div> はブロック要素（前後で改行される）を囲む一般的なタグとして仕様される
// タグに直接指定もできる
< b style="color:#622D3C;font-family:'ＭＳ Ｐゴシック'">DESC< /b>
■ Group
, を使って 複数の tag のクラスを定義する
// h1, h2 のクラスを定義
h1, h2 { color:red; }
H1 {
// ; で区切り 複数の Attribute を決める
// 改行は あってもなくても OK
color: red;
background: yellow
}
■ Class
DESC
* クラスとはスタイルの集合につける名前
Tag ごとに 複数のスタイルを指定できる
各タグ名に応じたクラスを定義できます
例
< p> タグで redクラス, greenクラスをつくる
< head>
< style type="text/css">
< !--
P.red { color: red; }
P.green { color: green; }
-->
< /style>
< /head>
< body>
< p class=red> これはredクラスです < /p>
< p class=green>これはgreenクラスです< /p>
< /body>
.red { color: red; }
< h1 class=red>これはredクラスです。< /h1>
< p class=red>これもredクラスです。< /p>
.red { color: red; }
.bold { font-weight: bold; }
< span class="red bold">赤い太字< /span>
■ 定義済みクラス
DESC
定義すみのクラスもあります
POINT
定義済みクラスはピリオド（ . ）ではなくコロン（ : ）で指定する
// 状況に応じた クラスが用意されてます
// 通常のリンク
a:link { color: green; }
// 読み込み済みのリンク
a:visited { color: blue; }
// クリックされた瞬間
a:active { color: red; }
A:hover { color: red; } /* IE4.0/N6.0〜 */
P:first-line { color: red; } /* 最初の1行 */
P:first-letter { color: red; } /* 最初の1文字 */
P:first-child { color: red; } /* 最初の1要素 */
■ ID
DESC
クラスの代わりに ID を指定できる
複数のタグに同じクラス名を指定することが可能ですが
ID はそれぞれの要素につける名前で
ひとつのドキュメント中に
複数の要素が同じ ID を持つことは許されません。
#elm123 { color:red; }
H1#elm124 { color:green; }
< span ID=elm123>あいうえお< /span>
< h1 ID=elm124>かきくけこ< /h1>
IDは一意なので H1#elm124 の H1 を記述するケースはあまりありませんが
ひとつのスタイルシートを複数のファイルから参照することも考慮してか
クラス定義とのバランスをとってか
仕様上は記述できるようになっている。
■ Include
DESC
定義部を他のファイルから読めるので、他の html file と共有できます
< head>
< title>Style Sheet Test< /title>
< link rel="stylesheet" type="text/css" href="./xxx.css">
< /head>
// BAD
p.red { xxx; }
p.red { xxx; }
// OK
< style>
p.red { xxx; }
p.red { xxx; }
< /style>
■ 単位
DESC
HTML の height=100 や width=100 は単位を書きませんが
CSS では単位は必須になる
単位は大きくわけて 2 種類
// 相対単位 は display 解像度に対して相対になる
10px ... 10ピクセル
10em ... 文字の高さを基準とした1文字分の長さ（emは文字Mの大きさに由来）
10ex ... 文字xの高さ
// 絶対的な大きさ
10in ... 10インチ（1in=2.54cm）
10cm ... 10センチメートル（1cm=10mm）
10mm ... 10ミリメートル（10mm=1cm）
10pt ... 10ポイント（1pt=1/72in）
10pc ... 10パイカ（1pc=12pt）
■ タグと要素とセレクタ
WARNING
H1 { color:red; } を「H1タグにスタイルを指定する」
H1 { ... } の H1 を H1要素のセレクタ( selector )
color:red を宣言（declaration）
color を属性 ( property )
red を値( value )
< h1> をH1要素の開始タグ
< /h1> をH1要素の終了タグ
要素（element）については
下の図のそれぞれの枠が要素だと思ってください
body 要素は開始タグも終了タグも（実は）省略可能なのですが
たとえタグが省略されていても
< h1>〜< /h1> や < p>〜< /p> は body 要素の一部である。
■ comment
/* コメント */
H1 { color:red; }
/*
コメント
*/
H1 {
color:red;
}
■ SytleSheetの定義順
REF
http://allabout.co.jp/gm/gc/23855/3/
# 同じ Style を指定した場合, 後の指定が優先される
p { color: red; }
p { color: blue; }
■ リファレンス(Reference)
■ padding
DESC
border と内容要素の間の長さを指定する。
マイナスの値は指定できない。
POINT
border の効果を確認するには border を表示するとわかりやすい。
h1 {
border: 2px solid #8Faa1F;
border: 2px solid black;
padding: 10px;
}
input
{
padding : 2px 3px;
}
■ margin
■ margin と auto と width の関係
marginに対して、autoを設定した場合は数値は0になります。
しかし、横幅(width)を指定した状態で
marginの左右のどちらかにautoを指定すると、指定した方に数値を算出します。
ブラウザの幅が600pxの場合
POINT
margin-left : auto;
auto の場合は 自動調整となる。
POINT
border をひくと, border の外に margin 領域があることがわかる
■ margin-left: left (C1/e3/N4)
上下左右のマージンをそれぞれ個別に指定する
margin-right: 2em;
margin-left: 2em;
margin-left : 10px;
margin : 10px;
■ list
■ list-style-type: type
■ 表示
POINT
display プロパティを ON/OFF することでレイアウト自体を変更できる。
display : ""
display : "none"
■ div
範囲をはみ出した場合の処理方法
// 隠す
overflow : hidden;
// スクロールバーをつくる
overflow : scroll;
■ 背景
■ background
背景プロパティの shorthand (簡潔な表現)
background < color>, < image>, < repeat>, < attachment>, < position>, < origin> は順不同でひとつ以上指定可能です。
background: #BECAD7 url("http://source.pixiv.net/www/images/sprites-s42f3140950.png") no-repeat -146px -315px;
h1 {
background : transparent;
border : 1px solid MidnightBlue;
}
■ background-image
POINT
タイトルバーの背景画像に利用できる
BODY { background-image: url(http://www.yyy.zzz/image/back.gif); }
h3 { background-image: url(http://www.yyy.zzz/image/back.gif); }
■ background-position
背景画像の位置を指定する。
指定できる種類は9つ
left top
left center
left bottom
center top
center center
center bottom
right top
right center
right bottom
div.test {
background-position: right top;
}
■ background-repeat
DESC
背景画像の並べ方を決める。
repeat-x（横方向のみ並べる）
repeat-y（縦方向のみ並べる）
no-repeat（ひとつだけ表示する）
inherit（継承）
BODY {
background-image: url(image/back.gif);
background-repeat: repeat-y;
}
■ background-color
H1 { background-color: #ccccff; }
■ background-attachment
背景を固定する
body {
background-attachment: fixed;
background-image: url(../image/back.gif);
}
background-attachment: scroll;
■ Font
■ font
font STYLE VARIANT WEIGHT SIZE LINE_HEIGHT FAMILY
font: normal normal 400 14px/normal Verdana;
■ line-height
POINT
font の高さ？
■ font-size
DESC
フォントのサイズを指定する。
■ font-style
DESC
フォントを斜体にする。
font-style : italic;
font-style : normal;
■ font-weight
SYNTAX
font-weight: weight
DESC
フォントの太さを指定する
bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 normal(D)
IE4.0, Netscape 4.0 では通常と太字の 2種類しかサポートしていないので
normal（通常）と bold（太字）以外を使用することは少ないかも
DT { font-weight: bold; }
■ font-family
SYNTAX
font-family: family [, family ... ]
DESC
フォントを指定する。
カンマ（,）で複数記述すると
指定したフォントが無ければ次のフォントになる。
スペースを含むフォントは "Times New Roman" のように "..." か '...' で囲む。
PARAM
serif, sans-serif, cursive, fantasy, monospace ( CSS1 )
inherit（継承）がサポートされている。
// space を含むときは " で囲む。
//
font-family: "Times New Roman";
font-family: "ＭＳ ゴシック";
font-family: "メイリオ";
// Ｐ がつくのはプロポーショナルフォント
//
"ＭＳ ゴシック"
"ＭＳ 明朝"
"ＭＳ Ｐゴシック"
"ＭＳ Ｐ明朝"
font-family: "メイリオ", "MS UI Gothic", sans-serif;
■ font-stretch
DESC
フォントの幅を指定する。
normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
inherit
body th, td { font-stretch: condensed; }
■ 位置.レイアウト
■ position
DESC
ブロック要素の位置を指定する。
fixed // ウィンドウ上で常に同じ位置に固定する。 ( スクロールしても固定される )
absolute // 絶対値で指定する。
relative // 本来の表示位置から相対的に指定する。
div {
position : absolute;
top : 100px;
left : 100px;
width : 300px;
height : 300px;
}
// 左上 100, 100 の位置に固定して表示される。
< div>
test
< /div>
■ float
DESC
指定した要素を左右によせて配置する。
POINT
これを使うと左寄せ, 右寄せ などの段組みができる。
left を指定すると, 左寄せになって, その後に指定する要素は右がわに回りこむ。
div.boxA
{
float : left;
width : 200px;
height : 100px;
}
div.boxA
{
float : right;
width : 200px;
height : 100px;
}
■ z-index
DESC
ブロック要素の前後関係を指定する。
値は整数を指定して、大きいほど手前に表示される。
// b が手前に表示される
div.a {
z-index : 1;
}
div.b {
z-index : 2;
}
■ 色
■ color
SYNTAX
color color
H1 { color: red; } /* 色の名前 */
H2 { color: #ff0000; } /* #RRGGBB */
H3 { color: #f00; } /* #RGB */
H4 { color: rgb(255, 0, 0); } /* rgb(R, G, B) 各数値は 0〜255 */
H5 { color: rgb(100%, 0%, 0%); } /* rgb(R, G, B) 各数値は 0〜100% */
■ Text
■ letter-spacing
DESC
文字間を指定する。
■ word-wrap
表示範囲内に収まりきらない単語がある場合に
単語の途中で改行するかどうかを指定するに使用します。
p
{
word-wrap : break-word;
}
■ vertical-align
その行の中で一番高い(低い)要素や、親要素に対する上下方向の配置を指定します
要素
インラインレベル || テーブルセル要素
■ border.境界線
■ border
border : 2px solid #8Faa1F;
border-bottom : 1px solid DimGray;
border-top : 2px solid LightGray;
border-bottom : 2px solid LightGray;
■ border-color
太さ, 線の種類, 色 を指定する
< em style="{border-color : blue; border-width : 2px; border-style : double; }"> test < /em>
h1{
border: 2px double #8Faa1F;
}
div{
border: 2px double #8Faa1F;
}
■ border-style
border-style : none; // なし
border-style : dotted; // 点線
border-style : solid; // 実線
border-style : double; // ２重線
< em style="{border-color : blue; border-width : 2px; border-style : double; }"> test < /em>
h1{
border: 2px double #8Faa1F;
}
■ 角丸.round
demo {
border-radius: 10px; /* IE, Opera */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */
}
div.test {
width : 200px;
height : 200px;
border-radius:100px;
border:1px solid red;
}
■ Gradation.gradient
Opera
background: -o-linear-gradient(rgb(100,100,100), rgb(200,200,200));
background: -o-linear-gradient( pink, red );
background: linear-gradient(rgb(100,100,100), rgb(200,200,200));
■ list-style-image
■ 画像のつくりかた
■ 透明 gif のつくりかた
Photoshop で IndexMode && 透明部分をもつ 画像をつくる
gif 形式で保存する
■ DocType
文書型宣言をすることで, html の準拠している規約を Browser に通知する
Browser は 宣言された規約にそって画面を表示する
■ その他
■ 透明.opaque
REF
http://www.inclover-inc.com/pocket/px/coding/css/eid205.html
< a href="#" class="imghover">< img src="image.jpg" />< /a>
div.test {
background-color: #fff;
filter: alpha(opacity=60);< font color=red> // IE用 < /font>
-moz-opacity: 0.6;< font color=red> // 古いFirefox用 < /font>
opacity: 0.6;< font color=red> // Chrome, Firefox, Safari, Opera, 等の比較的新しいブラウザ用 < /font>
}
a.imghover:hover img {
filter:alpha(opacity=70);
opacity:0.7;
}
■ 行間
■ line-height
文章の行間を調節する。
長い文章が多い場合、行間が詰まっていると読みにくくなる。
そんな場合は、このプロパティで行間の調節をする。
■ Text
■ text-decoration
text にアンダーラインなどをつける
p.test
{
text-decoration : underline;
text-decoration : overline;
text-decoration : line-through;
}
■ text-align
body
{
text-align : center;
}
■ box-shadow
ボックスに1つまたは複数の影をつける。
SYNTAX
box-shadow : OFFSET_X OFFSET_Y ぼかし幅 広がり 色;
POINT
２つのパラメータは BOX 自体の移動値
広がりは SCALE のこと。
次のようにすると計算式がわかる。
width : 100px;
height : 100px;
box-shadow: 0px 200px 0px 30px silver;
box-shadow: 10px 10px black;
box-shadow: 10px 10px 5px silver;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
■ text-shadow
http://coliss.com/articles/build-websites/operation/css/css-text-shadow-comilation-by-boltaway.html
SYNTAX
text-shadow : 左右 上下 ぼかし 色;
.basic {
background: #eee;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
background: skyblue;
color: rgba(230,230,230,0.55);
text-shadow:
2px 8px 6px rgba(0,0,0,0.2)
,-2px -5px 2px rgba(255,255,255, 0.7)
;
■ display
ブロックレベル・インライン等の、要素の表示形式を指定する際に使用します。
以下のものを選択できる
POINT
インライン要素の< IMG>に display:block を指定すると、
ブロックレベル表示となって前後が改行されて表示されるようになります。
inline-block;
インラインレベルのブロックコンテナを生成する。
要素全体としてはインライン要素のような表示形式だが、
内部はブロックボックスで高さ・横幅などを指定できる。
■ text-indent
段落の1行目にインデントを付けるtext-indentプロパティ
段落の1行目にインデントを指定できます。
ちなみに、インデントとはいわゆる字下げのことです。
このインデントの値には、プラスの値はもちろん、マイナスの値も指定可能ですが、インデントの効果があるのは1行目だけで、2行目以降は特に効果はなく、通常通り表示されます。
WARNING
インライン要素には適用できません。
そういったときの代替手段としてはmarginプロパティやpaddingプロパティを指定する方法が考えられます。
また、リンクを画像にする際、テキストを消すために「text-indent:-9999px;」などと指定する方法が使われる場合があります。
* Debug Mode にすると BOX, padding などが 色ではっきりと確認できる。 積極的に利用すること
* width, height を指定すると 左上を軸にして, 右下に伸びていく。
* 少しの位置調整は相対位置を指定すると早い。
position : relative;
top : -10px;
■ 色.color
white
red
skyblue
brown
maroon;
hotpink
blue
YellowGreen
WhiteSmoke;
MidnightBlue;
DimGray;
■ セレクタ.selector
MSIC http://www.htmq.com/csskihon/005.shtml
スタイルを指定する要素を指定する
POINT
ページ全体のフォントを指定する
* {
font-family: "メイリオ", "MS UI Gothic", sans-serif;
font-size : 10px;
line-height: 1.3em;
}
■ 複数セレクタ
, で区切ると対象となる要素を指定できる
input, a
{
color : red;
}
■ クラスセレクタ
.NAME で class 属性で指定できる
.title
{
color : white;
background-color : hotpink;
}
■ IDセレクタ
id で要素を指定する。
< div id="container">< /div>
■ 子孫セレクタ
セレクタを半角スペースで区切ると
ある要素の下の階層にある子孫要素を対象にスタイルを適用することができます。
ｐ要素の下にあるstrong要素にスタイルが適用されます。
この際、p要素直下にある子要素のstrong要素だけではなく
孫要素以下のstrong要素にもスタイルが適用されます。
p strong
{
background-color:#3399FF;
color:#ffffff;
padding:5px;
}
span {font-size:small;}
■ NAV
< nav>
ナビゲーションとは
メニューと言った方がわかりやすいかもですが。
他のウェブページに移動するためのリンクがあるテキストやボタンを、ナビゲーションと呼びます。
ナビゲーションは、
■ cursor
POINT
以下の２つが主に有効。
ボタンのUIとして
ヘルプのUIとして
カーソルを指定する。
clear
clearプロパティは、floatプロパティで左寄せ
または右寄せを指定された要素に対する回り込みを解除する際に使用します。
.clearfix {
clear: both;
}
■ 実践的な使い方
■ span で飾りをつくる
< span class="sprite_special ribbon_big"/>
■ borderを指定して２つのラインをかく
個別にボーダを指定する
h2 {
border-bottom: 5px solid currentColor;
border-top: 5px solid currentColor;
padding
}
■ marginをつかってページを中央に配置する
以下のような定型句をつくると便利
div.container
{
margin : 0px auto;
width : 900px
background-color : DimGray;
}
■ margin
■ margin.と.padding.の違い
padding は border の内側のオフセット。
margin は 親要素と自分の間のオフセット。
border を表示すると違いがわかる。
■ 飾窓をつくる
wrap .right-corner, .post .wrap .left-corner, .post .wrap .right-corner, .search .page .wrap .left-corner, .search .page .wrap .right-corner
{
height: 47px;
position: absolute;
top: -8px;
width: 47px;
}
■ borderカラーでボタンのエンボスをつくる
input[type="button"], input[type="submit"] {
background: url("http://blogcool.swiderskillc.netdna-cdn.com/wp-content/themes/decor/images/gradient.png") 50% 100% repeat-x #F8F8F8;
border-bottom: 1px solid #9D9D9D;
border-left: 1px solid #FFFFFF;
border-radius: 5px;
border-right: 1px solid #9D9D9D;
border-top: 1px solid #FFFFFF;
box-shadow: 0px 0px 3px;
cursor: pointer;
line-height: 19px;
padding: 10px 15px;
text-decoration: none;
text-shadow: 1px 1px;
}
■ セクションをつくる
< p>ご購入はこちら< /p>
p {
background-color : crimson;
}
#gnav .inner {
background: url("http://eow.alc.co.jp/content/img/gnav_bg.jpg") repeat-x #FFFFFF;
border: 1px solid #FFFFFF;
}
■ Button
■ div.で四角いアイコン.ICON.をつくる
div.image
{
width : 100px;
height : 100px;
border-radius : 4px;
box-shadow: 0px 10px 20px 3px silver;
}
■ マウスをあてたときに色をかえる。
hover イベントで色を変更する。
.button:hover
{
background-color : red;
}
■ ICON.ボタンをつくる
■ 角○の.ICON.ボタンをつくる
角○の画像を input ボタンなどにはりつける。
input {
background: #BECAD7 url("http://source.pixiv.net/www/images/sprites-s42f3140950.png") no-repeat -146px -315px;
}
cd d:/icon; wget http://source.pixiv.net/www/images/sprites-s42f3140950.png;
■ button.ノードでボタンをつくる
< button>< span>クリック< /span>< /button>
■ divをつかってエリアにラインをかく
div.line
{
border : 1px solid Aqua;
}
■ div.を使って見出しの左側に■のアイコンをつける
div.line
{
border-left : 8px solid orange;
}
■ フッター.(footer)をつくる
position を下から指定する。
div
{
position : absolute;
bottom : 0px;
left : 0px;
right : 0px;
}
■ Layout
POINT
最初に < div> などで大きな塊をつくること。
POINT
float を利用すると 後続の要素が影響をうけるので, レイアウトの記述の順番も注意すること。
■ 左側に縦長のメニューをつくる
float で 左側にレイアウトする。
div.layout
{
float : left;
width : 200px;
}
< div class="layout">
< div>
< /div>
div.wrapper
{
margin 0 auto;
width 900px;
}
■ max-width
< IMG>・ < INPUT>・ < TEXTAREA>・ < SELECT> などの領域の幅の最大値を指定する際に使用します。
最大値を指定することで、これらの要素の幅を一定範囲内に収めることができます。
指定方法には、実数値にpxなどの単位をつけて指定する方法と
親ボックスに対する割合を％で指定する方法があります。
また、幅を制限させないようにするにはnoneを指定します。
■ outline
アウトラインのスタイル・太さ・色をまとめて指定する際に使用します。 スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。
borderプロパティとは異なり、outlineプロパティには上下左右の概念はありません。 アウトラインをつける（縁取りをする）対象が丸い場合には、アウトラインも丸くなります。
POINT
要素を囲むので, マーキングするときに使える
input.sample1
{
outline: solid 1px #0000ff;
}
input.sample4 {outline: inset 4px #ffff00;}
outline : 2px ridge red;
border : 2px ridge black;
■ background-position.の考察
GL での実装を考えれば当然
|
|
_
_
_
