【CSS】 CSS メモ

Last Updated on 2010年9月15日 by kabekin

■CSSに関するメモ

CSSとは
Cascading Style Sheetの略でWebページのレイアウト（見栄え）を操作する仕組み。HTMLからレイアウト部分を分けることが目的らしいがCSSを使うことで細かいレイアウトが可能になるらしいです。
CSSの記述方法
大文字でも小文字でもOK、但しクラス名やID名は区別されるので最近では全て小文字で書くのが慣例らしい。(XHTMLが小文字で書くのでその流れだそうです。)
①Style属性の値として記述する。 Style=”属性：値”で指定する
②<HEAD>タグ内に記述する。 <style type=”text/css”></style>で指定する
③別のCSSファイルに記述しHTMLから参照する。　cssという拡張子で保存し<HEAD>内に<link rel=”stylesheet”
type=”text/css” href=”CSSファイル名”>で指定する。
（優先順位は①②③）
CSSの構造
セレクタ { 属性 : 値 ;} 　セレクタは上記②③の場合に使用する。(複数行ある場合は{内を改行})
セレクタのきまり
セレクタには要素名(要素セレクタ)やクラス名(クラスセレクタ),ID名(IDセレクタ)がある。
要素名=h1等のHTMLタグ等
ID名=任意の名前で頭に#を付ける。セレクタは#radio1使用はid=”tube1″
クラス名=任意の名前で頭にピリオドを付ける。セレクタは.radio1使用はclass=”tube1″
セレクタは要素名とID名やクラス名を#(id)又はピリオド(class)で結合できる。
要素+ID名 = h1#tube1
要素+クラス名 = h1.tube1
IDセレクタはHTMLに対して一箇所のみの制限があるもののクラスセレクタと競合した場合はIDセレクタが優先される。
子孫セレクタ 上位セレクタ 下位セレクタ { ・・・ }と定義することで下位に上位のスタイルを適用できる。
属性及び値はマルチステートメントのような書き方をする場合はセミコロンでつなぐ
H1 {
colo r : black; ←命令の最後はセミコロン
background-color : blue; ←最後のセミコロンはあっても無くてもいいらしい
}
コメントは /* … */
子クラスで指定のないプロパティの値は親クラスから継承または初期値がセットされる。
色の指定方法
①色名での指定 color:red　　②16進数での指定 color:#ff0000　　③10進数での指定 color:rgb(255,0,0)
colorプロパティ = 文字の色　　background-color = 背景の色
例
test.css
/*— 要素セレクタ — */
H1 { color:red ; background-color:blue }　← 属性と値のマルチステートメント的書き方
CENTER { color:rgb(0,255,0); }　 ← 色の10進数指定
/*— クラスセレクタ — */
.red { color:#ff0000; }　　 ← 色の16進数指定
/*— 要素+クラスセレクタの組合せ– */
H2.aqua { color:aqua; }
/*— 自分で定義したHR– */
HR { background-color:red; width:100; height:5} ←クラス名など付けずに自分で定義したHRを作るとその
HTML内ではHRは全てこのスタイルになる
test.html

<HTML>
<HEAD>
<TITLE>CSS SAMPLE</TITLE>
<link rel="stylesheet" type="text/css" href="test.css">
</HEAD>
<BODY>
<H1>要素セレクタ１</H1>
<CENTER>要素セレクタ２</CENTER>
<P class="red">クラスセレクタ</P>
<H2 class="aqua">要素+クラスセレクタ</H2>　←H1 class="aqua"にするとH1要素が働き黄色になる
　<HR>　←自分で定義した水平罫線が入る
</BODY>
</HTML>

 
出力
ghs4gj room

応用方法
要素をグループ化する方法
ブロックとして扱うかインラインとして扱うかはHTMLのときと同様
ブロックレベル要素 = <DIV></DIV>でグループ化する　<DIV class=”クラス名”>　・・・ </DIV>
DIVはブロック、インライン要素及びテキストをグループ化可能
インライン要素 = <SPAN></SPAN>でグループ化する <SPAN class=”クラス名”> ・・・ </SPAN>
SPANはインライン要素とテキストをグループ化可能
サイズの単位（CSSでは相対単位を使うのが推奨らしい）
絶対単位
cm/mm：センチメートル、ミリメートル
in：インチ
pt：ポイント
pc：パイカ
相対単位
%：親要素のサイズに対する割合
em：全ての文字(bの上側とｙの下側の長さ等)の縦方向の長さに対する割合
ex：小文字のxの高さに対する割合(あまり使われない!?)
px：ピクセル=画面の解像度に対する割合(IEでは絶対単位?)
要素の種類
文字用
text-align=文字の位置「center」「Left」「right」
ext-decoration=文字に飾りを付ける 「underline下線」「overline上線」「line-through打消線」「blink点滅」
text-transform=大文字小文字を変換する「capitalizeは頭が大文字」「uppercase大文字」「lowercase小文字」
text-indent=段落の字下げ(“%”orサイズ）
font-size=文字の大きさ「xx-small」「x-small」「small」「medium」「large」「x-large」「xx-large」「larger」「smaller」又は(“%”orサイズ）らしいが%等のサイズの相対値で設定するほうが無難らしい。
font-style=斜体の設定「italic」「oblique」
font-weight=文字の太さ設定「100～900を100stepで指定」その他「bold」「bolder」「lighter」
font-family:”フォント名” = フォントの指定(フォント名を指定する際は””でくくる、familyを指定する場合は””でくくらない、第一候補,第二候補・・・と複数の候補をカンマで区切って指定できる)
line-height=段落の行間を指定(“%”orサイズ）
a:link {属性：値 } = 未訪問リンク
a:visited {属性：値 } = 訪問済みリンク
a:active { 属性：値 } = OnClick中
a:hover { 属性：値 } = OnMouseMove中
letter-spacing =　文字間隔を指定(“%”orサイズ）
word-spacing = 単語感覚を指定(“%”orサイズ）
リスト用
①Lits-style-type = リストのスタイルを指定
値は｢square=■」「disc=●」「circle=○」「lower-alpha小文字アルファベット」「upper-alpha=大文字アルファベット」「decimal=数字」「lower-roman=小文字のローマ数字」「upper-roman=大文字のローマ数字」
②List-style-image:url(画像ファイル名) = リストマークに指定した画像ファイルを使用する。
③List-style-position = リストの行頭を指定する
値は「inside=改行した2行目を行頭位置とそろえる」「outside=改行した2行目の行頭を字下げする」
同じ機能の要素①②③の場合マルチステートメント風に書くことが可能
ul { list-style:circle url(033.gif) outside } ←①+②+③のマルチステートメント風　この場合優先度は②＞①
画像用
border-style = 枠の指定「noneなし」「hiddenなし」「dotted丸い点線」「dashed四角い点線」「solid実線」「double二重線」「groove立体の窪み」「ridge立体の隆起」「inset内側全体が窪み」「outset内側全体が隆起」
background-image:url(ファイル名) = 背景の画像
background-repeat = 背景を並べる「repeat縦横繰返」「repeat-x横のみ繰返」「repeat-y縦のみ繰返」「no-repeat繰り返さない」
background-position:10px 20px = 背景の位置 「left」「right」「center」「top」「bottom」又は(“%”orサイズ）
background-attachment = 背景の固定　「fixed」「scroll」
例（リストと表）
test.css

/*-- 要素セレクタ -- */
h1 { color:red ; background-color:blue }
ol { list-style-type:upper-roman }
ul { list-style:circle url(031.gif) outside }
thead { background-color:#ffcccc;
color:red;
text-align:center; }
tbody { background-color:#ffffcc;
text-align:left; }
tfoot { background-color:#ccccff;
text-align:right; }
body { background-image:url(w1.gif);
background-repeat:no-repeat;
background-position:5% 15%;
background-attachment:fixed }

 
test.html

<BODY>
<!-- リスト -->
<h1>メニュー</h1>
<OL>
<LI>ラジオ</LI>
<LI>テレビ</LI>
</OL>
<UL>
<LI>ラジオ</LI>
<LI>テレビ</LI>
</UL>
<!-- 表 -->
<TABLE BORDER=1 RULES="ALL" FRAME="LHS" WIDTH=150 CELLSPACING=3 CELLPADDING=3>
<CAPTION>TUBE LIST</CAPTION>
<THEAD>
<TR><TH>BRAND</TH><TH>TYPE</TH><TH>Family</TH></TR>
</THEAD>
<TFOOT>
<TR><TD COLSPAN=3>国産ブランド</TD></TR>
</TFOOT>
<TBODY>
<TR><TD>NEC</TD><TD>6BM8</TD><TD ROWSPAN=3>6BM8 Family</TD></TR>
<TR><TD>HITACHI</TD><TD>11BM8</TD></TR>
<TR><TD>SANYO</TD><TD>50BM8</TD></TR>
</TBODY>
</TABLE>
</BODY>

 
出力
ghs4gj room

 
ボックスモデル
CSSでは各要素をボックス化し配置していく仕組みになっている。
ghs4gj room [ALL IS VANITY]
ボックスを使用したサンプル
test.css

.tube1 {　position : absolute;
width : 300px; height : 150px;
top : 10px; left : 10px;
background-color : #ffbbff;
padding : 5px, 5px, 5px, 5px;
border : 5px solid #6600ff;
margin : 5px, 5px, 5px, 5px;
z-index : 1;　}
.tube2 {　position : absolute;
width : 380px; height : 150px;
top : 50px; left : 30px;
background-color : #ffff99;
padding : 5px, 5px, 5px, 5px;
border : 5px solid #00ff00;
margin : 5px, 5px, 5px, 5px;
z-index : 2; }
h1.cim_red { text-align : center;
font-style : italic;
font-family : ＭＳ 明朝;
color : red;
background-color : white; }
h1.blue { font-family : Courier New;
text-decoration : underline;
color : blue;}
hr#red { background-color : red;
height : 20px; }
.lowcase { text-transform : lowercase;
line-height : 2;
letter-spacing : 1em;
font-size : 2em; }
.bold_indent { font-weight : bold;
text-indent : 1em; ←text-indentはブロック要素用らしい。インライン要素では効かなかった
}
.img_right { float : right; }

 
test.html
<

HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<link rel="stylesheet" type="text/css" href="test5.css">
</HEAD>
<BODY>
<DIV class="tube1">
<h1 class="cim_red">6BM8</h1>
</DIV>
<DIV class="tube2">
<IMG SRC="W1.GIF" CLASS="img_right" width=100>
<h1 class="blue">16A8</h1>
6MB8のVf=16V版です。<BR>EU名は<SPAN class="lowcase">ＰCL82</SPAN>です。<BR>
<SPAN class="bold_indent">なぜだか16BM8とはいいません<BR>
その他32A8や8B8も32BM8や8BM8とはいいません。</SPAN>
</DIV>
<HR id="red">
<HR>
</BODY>
</HTML>

 
出力
ghs4gj room [ALL IS VANITY]
せっかく見にこられた方・・おかしなサンプルですが、自分用のメモなのでお許しを・・・・

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。