継承

継承
祖先要素から値を受け継ぐこと

フォント、テキスト系のプロパティ値:基本的に継承される
ボックス系のプロパティ値:基本的に継承されない

inherit(CSS2~)
値を継承しないプロパティを継承させる
or
値を指定してしまったプロパティの継承性を一時的に解除する

ex
table { background-image: inherit }
background-imageは子要素へ継承されず
デフォルト(background-color: transparent;)が表示されるが
inheritとすることで
子要素へ継承されるようになる


ref:
http://www.tg.rim.or.jp/~hexane/ach/hscs/hscs5-07.htm

tag : 継承 inherit

2007-07-11 20:23 : css : コメント : 0 : トラックバック : 0 :

text-decoration

text-decoration
本来は継承しないプロパティ

継承するべきものらしい
This property is not inherited, but descendant boxes of a block box should be formatted with the same decoration (e.g., they should all be underlined).
by 仕様書

んーようわからん。

ref:
http://homepage2.nifty.com/tomchem/book/book0303.html

tag : text-decoration

2007-07-11 20:22 : css : コメント : 0 : トラックバック : 0 :

id vs class

□difference
id: ページ中に1度しか登場しない (also used for javaScript and inPageLink )
class: ページ中に何度でも登場する

□ex -id selector
==css==
p#sky { color: blue; }
==html==
<'p id="sky">id sample<'/p>
<'a href="#sky">jump<'/a>

□ex -class selector
==css==
p.sakura { color: pink; }
==html==
<'p class="sakura">class sample<'/p>

tag : id class selector

2007-07-06 23:39 : css : コメント : 0 : トラックバック : 0 :

属性セレクタ

□how to use
1. 要素名[属性値]
2. 要素名[属性名="属性値"]
3. 要素名[属性名~="属性値"]
4. 要素名[属性名|="属性値"]

IE6は属性セレクタ非対応

□ex -要素名[属性値]
==css==
a[name] { background-color: #ffcccc; }
==html==
<'a name="apple">装飾対象箇所<'/a>
<'a name="orange">装飾対象箇所<'/a>
<'a href="a.html">装飾非対象箇所<'/a>
<'a href="b.html">装飾非対象箇所<'/a>

□ex -要素名[属性名="属性値"]
==css==
a[target="_blank"] { font-style: italic; }
==html==
<'a href="b.html" target="_blank">装飾対象箇所<'/a>
<'a href="a.html" target="_top">装飾非対象箇所<'/a>

□note
useful for input-tag#type-property

□condition
描写モード=標準モード→属性セレクタOK
描写モード=互換モード→属性セレクタNG (even IE7)
to make it 標準モード,
def the DOCTYPE!


ref:
AllAbout
http://allabout.co.jp/internet/hpcreate/closeup/CU20070115A/index2.htm

tag : 属性セレクタ IE DOCTYPE

2007-07-06 21:55 : css : コメント : 0 : トラックバック : 0 :

リンクの記述順序

以下の順序で宣言すること
1. a:link
2. a:visited
3. a:hover
4. a:active

グループ化して宣言しないこと


ref:
http://plaza.rakuten.co.jp/oyadomymy/diary/200609140000/

tag : link visited hover active

2007-07-05 23:13 : css : コメント : 0 : トラックバック : 0 :

css terms

□ルール
@media
 | 出力メディアの特定
@import
 | 外部スタイルシートの参照
@charset
 | スタイルシートの文字コードセット
@page
 | ページメディアに関する詳細設定
@font-face
 | フォントに関する詳細設定

□セレクタ
シンプルセレクタ-simple selector
セレクタ-selector
 | 結合子(空白、>、+)で1つ以上のシンプルセレクタが連結したもの
全称セレクタ-Universal selector(*)
 | すべての要素にスタイルを適用
要素セレクタ-Type selectors(要素名)
 | その要素にスタイルを適用
子孫セレクタ-Descendant selectors(E F)
 | 親要素(E)に含まれるすべての子孫要素(F)にスタイルを適用
子供セレクタ-Child selectors(E > F)
 | 親要素(E)の直接の子要素(F)にスタイルを適用
隣接兄弟セレクタ-Adjacent sibling selectors(E + F)
 | 兄要素(E)の直後の弟要素(F)にスタイルを適用
クラスセレクタ-Class selectors(.class名)
 | 文書内で複数の要素にスタイルを適用
一意セレクタ-ID selectors(#id名)
 | 文書内で唯一の要素にスタイルを適用

□属性セレクタ Attribute selectors
要素名[属性値]
 | 要素のなかでもその属性名をもつ要素に対してスタイルを適用
要素名[属性名="属性値"]
 | 要素のなかでもその属性名と属性値をもつ要素に対してスタイルを適用
要素名[属性名~="属性値"]
 | 要素のなかでもその属性名をもち、
 | 属性値が空白文字区切りで複数指定されている場合に、
 | その属性値が含まれている要素にスタイルを適用
要素名[属性名|="属性値"]
 | 要素のなかでもその属性名をもち、
 | 属性値がハイフン(-)区切りで複数指定されている場合に、
 | その属性値が前方一致で含まれている要素にスタイルを適用

□擬似クラス Pseudo-classes
:first-child
 | 親要素の範囲内で最初に登場する子要素のみにスタイルを適用
:link
 | 未訪問リンク(まだ開いたことがないページへのリンク)に適用
:visited
 | 既訪問リンク(すでに開いたことがあるページへのリンク)に適用

□ダイナミック擬似クラス Pseudo-classes
:hover
 | 要素がカーソルなどのポインティングデバイスで指し示されているが、
 | アクティブな状態ではないときに適用
:active
 | 要素がアクティブな状態のときに適用
:focus
 | 要素がフォーカスを受けているときに適用
:lang()
 | 要素のなかでも特定の言語コードが指定されている要素に対してスタイルを適用

□擬似要素 Pseudo-elements
:first-line 要素の一行目のみにスタイルを適用
:first-letter 要素の一文字目のみにスタイルを適用
:before 要素に含まれる内容の前に内容を生成
:after 要素に含まれる内容の後に内容を生成



ref:
CYBER@GARDEN
http://www.cybergarden.net/references/css/
サイト作成における問題
http://www.rju666.com/web/reference/make_css.html

tag : selector

2007-07-05 23:10 : css : コメント : 0 : トラックバック : 0 :

using a number of style

@html
<'div class="sample-style another-style">

@css
(to def the same pert of these two style)
div.sample-style.another-style {
color: blue;
}


ref:
hamashun.com
http://www.hamashun.com/blog/2007/05/class_1.html
css refernce
http://msugai.fc2web.com/web/CSS/selector2.html#class
2007-06-26 23:14 : css : コメント : 0 : トラックバック : 0 :

min-width & max-width

IE7にも実装されたCSSのmin-width,max-width(min-height,max-heightも)は、
リキッドレイアウトを採用する場合には非常に便利な属性なのだが、IE6で対応していない。

==代替策==
①普通のモダンブラウザに適用するwidthとheightを適用する。
++++++++++
#container {
min-width: 600px; max-width: 1200px;
}
++++++++++
②IE6用にはJavaScriptのexpressionメソッドを使用して適用する。
++++++++++
* html #container {
width:expression(document.body.clientWidth < 600? “600px” :
document.body.clientWidth > 1200? “1200px” : “auto”);
++++++++++

※expressionメソッドはIEに特有のもの(ダイナミックプロパティという)
 =他のブラウザでは無視されるもの
 →余計なコードを読み込ませないように、「* html」hack(IE6以下だけに読み込ませるハック)を使用して分離するのが吉。

ref:
http://www.techdego.com/2007/02/ie6minwidthmaxwidthcss.php

tag : min-width max-width

2007-06-21 00:47 : css : コメント : 0 : トラックバック : 0 :

positioning

position
配置方式指定要素
+static
+relative (相対配置)
+absolute (絶対位置)
+fixed (IE7~)

□static
"top, bottom, left, right" の位置を指定するプロパティの効果は無効となり、その要素が本来レンダリングされる通常通りの位置に配置される。

relative
その要素が本来レンダリングされるはずの位置を基準にした位置指定。
その要素が本来レンダリングされる通常通りの位置に配置され、要素の配置されている元の位置からどれだけずらすかを "top, bottom, left, right" の各プロパティで指定する相対的な位置指定となる。

absolute
包含ブロックを基準にした位置指定。
包含ブロック(祖先要素のうち、もっとも近い祖先の要素にあたるブロック要素の内容領域)の各辺を基準に配置され、"top, bottom, left, right" の各プロパティで指定する絶対的な位置指定となる(祖先要素に位置指定されている要素がなければ、初期包含ブロックを基準とする)。

□fixed
"absolute" に従って配置された後、ページやウィンドウなどの表示域に対して固定され、スクロールしても動かないように表示される。


■包含ブロック
自分の祖先(親や、親の親)要素のうち、position: static 以外の指定を受けたボックス。
つまり、あるボックスを position: absolute で位置指定するためには、
先に position: relativeposition: absoluteposition: fixed のいずれかのボックスを生成しておき、
その子要素として位置指定を行わなければいけない。


□じゃ、最初の position: absolute を指定する要素は何を基準にするの?
―それは初期包含ブロック。
 要するに body 要素すべてを飲み込む最も大きなブロックが初期包含ブロック。
 スクロールする部分も含めてすべての部分。

ところで当たり前だけれどこれは HTML でも CSS でも明示できない。
単に位置、大きさの基準になるだけで何らかの効果を指定することは不可能である。


ref:
PC説教口座#CSS実験室2
http://pctraining.s21.xrea.com/making-web/box-view2.html
SEO-Equation
http://www.seo-equation.com/html/css/position

tag : css style position relative absolute

2007-06-21 00:45 : css : コメント : 0 : トラックバック : 0 :

ime

ime-mode (only for IE)
IME の制御指定。
+active
+disabled
+inactive

□active
IME起動。

□disabled
IME無効。(半角入力のみ)

□inactive
IME無効。ただし、マニュアルでオンにできる。

==sample==
ime-on:
<'input type="text" name="imeon" style="ime-mode:active">
ime-off:
<'input type="text" name="imeoff" style="ime-mode:disabled">


ref:
http://www.futomi.com/lecture/javacss/ime.html

tag : ime ime-mode

2007-06-21 00:41 : css : コメント : 0 : トラックバック : 0 :

fixed header and footer sample

1. replace all " <' " to " < ".
2. save as "sample.html".
3. open it w IE.
4. resize the window, and find a scrollber.
==================================================
<'?xml version="1.0" encoding="UTF-8" ?>
<'!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<'html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<'head>
<'meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<'meta http-equiv="Content-Style-Type" content="text/css" />
<'meta http-equiv="Content-Script-Type" content="text/javascript" />
<'title>pageTitle<'/title>
<'link rel="stylesheet" href="sample.css" type="text/css" />
<'style type="text/css">
@charset "UTF-8";
/*----------------------------------------------*/
* {
margin : 0;
padding : 0;
font-size: 10pt;
color: white;
}

html, body {
height: 100%;
width: 100%;
}

#container {
margin : 0;
padding-top: 50px;
padding-bottom: 20px;
position : relative;
display: block;
width : 100%;
height: 100%;
min-height : 100%;
overflow: auto;
}

/*-- header --*/
#header {
position: absolute;
top: 0px;
width : 100%;
height: 50px;
text-align: center;
background-color: #e4e4e4;
border-bottom: 1px solid gray;
}

/*-- footer --*/
#footer {
position: absolute;
bottom: 0px;
width : 100%;
height: 20px;
background-color: #e4e4e4;
border-top: 1px solid gray;
}

#footer #copyright {
text-align: center;
padding-top: 0.5em;
font-size: 8pt;
}

#ope-area {
position: relative;
margin-left: 190px;
padding-top: 35px;
display: block;
width: 100%;
margin: 0;
background: #FFFFFF;
height: 100%;
overflow: auto;
}

div#ope-area-header {
padding: 1px 2px 1px 2px;
position: absolute;
top: 0px;
width: 99.6%;
height: 35px;
border-bottom: 1px solid #999999;
}

div#ope-name-panel {
padding-top: 0.5em;
padding-left: 1em;
float:left;
height: 30px;
color: #333333;
font-size: 12pt;
font-weight: bold;
}

#help-panel {
padding-top: 8px;
padding-right: 1em;
height: 30px;
float: right;
color: green;
font-size: 1pt;
}

/*-- OPE-BODY-PANEL --*/
#ope-body-panel {
margin-left: 2px;
margin-right: 2px;
padding-top: 0px;
width: 100%;
height: 100%;
overflow: auto;
}

/*----------------------------------------------*/
/*
border: 2px dotted green;
*/
/*----------------------------------------------*/

<'/style>
<'/head>
<'body>
<'div id="container">
<'!-- HEADER START -->
<'div id="header">+ <'a href="http://8318.blog100.fc2.com/">Home<'/a> +
<'/div>
<'!-- HEADER END -->
<'!--+++++++++++++++++++++++++++++++++++++++++++-->
<'div id="ope-area">
<'div id="ope-area-header">
<'div id="ope-name-panel">
赤橙黄緑青藍紫
<'/div>
<'div id="help-panel">
<'a href="#">?<'/a>
<'/div>
<'div class="clear"><'/div>
<'/div>
<'div id="ope-body-panel">
<'!-------------------------->
<'div style="height:50px; background-color: red;"><'/div>
<'div style="height:50px; background-color: orange;"><'/div>
<'div style="height:50px; background-color: yellow;"><'/div>
<'div style="height:50px; background-color: green;"><'/div>
<'div style="height:50px; background-color: blue;"><'/div>
<'div style="height:50px; background-color: indigo;"><'/div>
<'div style="height:50px; background-color: violet;"><'/div>

<'!-------------------------->
<'/div><'!--id="ope-body-panel"-->
<'/div><'!--id="ope-area"-->
<'!--+++++++++++++++++++++++++++++++++++++++++++-->
<'!-- FOOTER START -->
<'div class="clear"><'/div>
<'div id="footer">
<'div id="copyright">
©2007 8318 All Rights Reserved
<'/div>
<'/div>
<'!-- FOOTER END -->
<'/div><'!--(id="container")-->
<'/body>
<'/html>



ref:
http://limpid.nl/lab/css/fixed/header-and-footer

tag : html css style sample fixed header footer

2007-06-20 01:40 : css : コメント : 0 : トラックバック : 0 :

intro

css:
cascading style sheet

==ex==============================================
p {color: green}
==================================================
in the case above,
p = selector
"color: green" = Declaration
color = property
green = value

place to def the style:
there are 3 ways to def it.
1. outer file
==html============================================
<'head>
<'link rel="stylesheet" href="sampleStyle.css" type="text/css" />
<'/head>
==================================================
2. style-tag
==html============================================
<'head>
<'style type="text/css">
p {color: red}
h2 {color: blue; font-size: 120%}
<'/style>
<'/head>
==================================================
3. inline style-property
==html============================================
<'body>
<'p style="color: green">sample paragraph<'/p>
<'/body>
==================================================


class-selector & id-selector
id-selector is almost same as class-selector.
but,
クラスは同じクラスなら複数箇所に適用されるのに対し、
idは特定のidを持つ“要素”にだけ適用される。
+
id属性は、スタイル指定のセレクタとしてだけでなく、
同時にリンク先のフラグメント指定や、
JavaScriptなどによる文書中のオブジェクトの指定など、様々な働きをする。


grouping by span or div
span要素:段落内部の特定の単語などのグループ化
div要素:複数の段落をまとめるなどブロックレベル要素のグループ化


ref:
http://www.kanzaki.com/docs/html/htminfo17.html
2007-06-15 02:21 : css : コメント : 0 : トラックバック : 0 :

link style

a:link { color: ***; } … 通常(未アクセス)の色
a:visited { color: ***; } … アクセス済みの色
a:hover { color: ***; } … ポイント時の色
a:active { color: ***; } … アクティブ時の色


==sample==========================================
<'html>
<'head>
<'title>TAG index Webサイト<'/title>

<'style type="text/css">
<'!--

a:link { color: #0000ff } /* リンク */
a:visited { /* 既に見たリンク */
color: #ff00ff;
text-decoration: none /* 下線を消す */
}
a:active { color: #00ff00 } /* クリック時のリンク */
a:hover { /* カーソルが上にある時のリンク */
color: #ff0000;
text-decoration: none /* 下線を消す */
}
-->
<'/style>

<'/head>
<'body>

<'p><'a href="index.html">リンクカテゴリー<'/a><'/p>

<'/body>
<'/html>


ref:
http://www.tagindex.com/stylesheet/link/link_color.html
http://css.eweb-design.com/0402_lcs.html

tag : css html link

2007-06-13 06:45 : css : コメント : 0 : トラックバック : 0 :

css sample

css def
@charset "UTF-8";
@import url(another-sample.css);


/*-- sample panel --*/
#sample-panel {
margin-left: 10em;
margin-right: 10em;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
height: 80%;
min-height: 100%
overflow: auto;
}

/*-- sample table --*/
.sample-panel table {
border-collapse: collapse;
border-spacing: 0px;
border: 1px solid gray;
font-size: 1em;
}

.sample table th{
color: black;
padding: 2px 2px 2px 2px; /* the order of top, right, bottom, left.*/
background-color: white;
border: 1px solid;
font-size: 0.9em;
}

.sample tablee td{
padding: 2px 2px 2px 3px;
background-color: #FFFFFF;
border: 1px solid gray;
}

td.sample-td1 {
padding: 0px;
}

td.sample-td2 {
text-align: center;
vertical-align: middle;
}
2007-06-07 23:42 : css : コメント : 0 : トラックバック : 0 :

white-space

□white-space
normal: break it when fill the width
pre: displayed as typed (wont work w/ IE)
nowrap: displayed w/o break (it can be used instead of nobr-tag and nowrap-property of table)


□text-indent
x%: indent at the start


□word-break
normal: same as keep-all
break-all: wherever to break
keep-all: wont break it if it were a word


□word-wrap
normal: all in one row
break-word: break it into few rows depends on the width of div or table


□writing-mode
lr-tb: horizontal writing
tb-rl: vertical writing


□text-transform
capitalize: uppercase only for first letter
uppercase: uppercase for all letters
lowercase: lowercase for all letters


ref:
http://www.est.hi-ho.ne.jp/gaia/hp/css/text.html

kw:
css
2007-06-06 22:27 : css : コメント : 0 : トラックバック : 0 :

grouping

□Source code of the form:

<'form>
<'fieldset>
<'legend>Subscription info<'/legend>
<'label for="name">Username:<'/label>
<'input type="text" name="name" id="name" />
<'br />
<'label for="mail">E-mail:<'/label>
<'input type="text" name="mail" id="mail" />
<'br />
<'label for="address">Address:<'/label>
<'input type="text" name="address" id="address" size="40" />
<'/fieldset>
<'/form>

□Adding CSS style:

fieldset {
padding: 1em;
font:80%/1 sans-serif;
}
label {
float:left;
width:25%;
margin-right:0.5em;
padding-top:0.2em;
text-align:right;
font-weight:bold;
}

□Adding rules for fieldset and legend:

fieldset { border:1px solid green }

legend {
padding: 0.2em 0.5em;
border:1px solid green;
color:green;
font-size:90%;
text-align:right;
}


ref:
http://pixy.cz/blogg/clanky/css-fieldsetandlabels.html
http://www.d.umn.edu/is/support/Training/Online/webdesign/css.html

kw:
fieldset legend css html gourping form text
2007-06-06 22:25 : css : コメント : 0 : トラックバック : 0 :

border-style


□none
ボーダーなし。隣接する要素で重なるボーダーが存在すればそのボーダーを表示。

□hidden
ボーダーなし。隣接する要素で重なるボーダーが存在しても強制的に非表示。

□dotted
点線

□dashed
破線

□solid
実線

□double
二重線

□groove
窪み線(凹線)

□ridge
浮き線(凸線)

□inset
ボーダーは内側への下り傾斜として表現され、要素がキャンバスに埋もれた底面のように表現。

□outset
要素がキャンバスから浮き上がった天面のように表現。ボーダーは内側への上り傾斜として表現され、要素がキャンバスから浮き上がった天面のように表現。

□inherit
親要素での指定を継承。
2007-06-06 22:24 : css : コメント : 0 : トラックバック : 0 :

table border


border-collapse: collapse;
-隣接するセルのボーダーを重ねて表示する。
border-collapse: separate;
-隣接するセルのボーダーを、間隔をあけて表示する。

2007-06-06 22:20 : css : コメント : 0 : トラックバック : 0 :

button style

#submit-button {
width: 70em;
height: 30em;
}

<'input type="submit" value="SUBMIT" id="submit-button">

2007-06-06 00:48 : css : コメント : 0 : トラックバック : 0 :
ホーム

search

ad



counter


tag cloud

category cloud