A. CSS - Cascading Style Sheets

since: 30th/Aug./2000; last modified: 27th/Sep./2001

CSS 㯠HTML 文書ã®è¦‹æ „ãˆã‚’調整ã™ã‚‹ãŸã‚ã®ä»•çµ„ã¿ã§ã™ã€‚ã“ã“ã§ãã®æ¦‚略を述ã¹ã¾ã™ã€‚ã¾ãšã¯è©¦ã—ã¦ã¿ãŸã„æ–¹ã¯ã€ã€ŒCSS スピードラーニングã€ã‚’ã€ã•ã‚‰ã«è©³ã—ã„解説ã¯ã€ŒCSS 解説ã€ã‚’御覧ãã ã•ã„。

1. CSS ã®åŸºæœ¬çš„ãªæ›¸å¼

段è½ã‚’表㙠P è¦ç´ ã®è¡Œé ­ã‚’一文字ã¸ã“ã¾ã›ãŸã„ã¨ã—ã¾ã™ï¼ˆã‚¤ãƒ³ãƒ‡ãƒ³ãƒˆã‚’一文字分å–る)。ã“ã®æŒ‡å®šã¯ã€ CSS ã§ã¯æ¬¡ã®ã‚ˆã†ã«è¨˜è¿°ã—ã¾ã™ï¼›

p { text-indent: 1em }

p をセレクタã¨å‘¼ã³ã€ã‚¹ã‚¿ã‚¤ãƒ«å®£è¨€ã®é©ç”¨å¯¾è±¡ã‚’表ã—ã¾ã™ã€‚ { ã‹ã‚‰ } ã¾ã§ã‚’宣言ã¨å‘¼ã³ã€è¦‹æ „ãˆã‚’指定ã—ã¾ã™ã€‚ã“ã“ã§ã€ text-indent 㯠CSS ã®ãƒ—ロパティã¨å‘¼ã³ã€ 1em ã¯ãã®å€¤ã§ã™ã€‚

一ã¤ã®ã‚»ãƒ¬ã‚¯ã‚¿ã«è¤‡æ•°ã®ã‚¹ã‚¿ã‚¤ãƒ«å®£è¨€ã‚’記述ã™ã‚‹æ™‚ã¯ã€ç›¸äº’をセミコロン ; ã§åŒºåˆ‡ã‚Šã¾ã™ï¼›

p em { font-style: italic;
  color: red;
  text-decoration: underline }

セレクタ p em ã¯ã€Œ p è¦ç´ ã®å†…å´ã«å…¥ã£ã¦ã„ã‚‹ em è¦ç´ ã€ã‚’表ã—ã¾ã™ã€‚ã“ã®å®£è¨€ã§ã¯ã€ã€Œæ–‡å­—スタイルãŒã‚¤ã‚¿ãƒªãƒƒã‚¯ä½“ã§ã€è‰²ãŒèµ¤ã€ä¸‹ç·šè¡¨ç¤ºã€ã®ä¸‰ã¤ãŒæŒ‡å®šã•ã‚Œã¦ã„ã¾ã™ã€‚

2. セレクタã®ç¨®é¡ž

タイプ・セレクタ

例ãˆã°ã€ h1 ã¨äº‘ã†è¦ç´ ã«ãƒžãƒƒãƒã™ã‚‹ã‚»ãƒ¬ã‚¯ã‚¿ã§ã™ï¼›

h1 { font-weight: 900 }

å­å­«ã‚»ãƒ¬ã‚¯ã‚¿

例ãˆã°ã€ p è¦ç´ ã®å­å­«è¦ç´ ã§ã‚ã‚‹ em è¦ç´ ã«ãƒžãƒƒãƒã™ã‚‹ã‚»ãƒ¬ã‚¯ã‚¿ã§ã™ï¼›

HTML 文書ã®ä¾‹ï¼›

<p>
ã“ã“㯠p è¦ç´ ã®å†…容部ã§ã™ã€‚
或るè¦ç´ ã®å†…容部ã«ç¾ã‚Œã‚‹è¦ç´ ã®ã“ã¨ã‚’ã€
一般ã«<em>å­å­«è¦ç´ </em>ã¨å‘¼ã³ã¾ã™ã€‚
</p>

対応ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ä¾‹ï¼›

p em { color: red }

クラス・セレクタ

è¦ç´ ã« class 属性ãŒä¸Žãˆã‚‰ã‚Œã¦ã„ã‚‹å ´åˆã€ã‚»ãƒ¬ã‚¯ã‚¿ã§å‚ç…§ã§ãã¾ã™ã€‚

属性セット Core ã®ä¸€éƒ¨ã§ã‚ã‚‹ class 属性ã¯ã€ body è¦ç´ å†…ã®ã‚らゆるè¦ç´  (Flow) ã«ä¸Žãˆã‚‹ã“ã¨ãŒå‡ºæ¥ã¾ã™ã€‚

HTML 文書ã®ä¾‹ï¼›

<p class="note">
ã“ã“㯠p è¦ç´ ã®å†…容部ã§ã™ã€‚
ã“ã® p è¦ç´ ã«ã¯ã€ class 属性ãŒä¸Žãˆã‚‰ã‚Œã¦ãŠã‚Šã€
ãã®å±žæ€§å€¤ã¯ "note" ã§ã™ã€‚
</p>

対応ã™ã‚‹ã‚»ãƒ¬ã‚¯ã‚¿ã®ä¾‹

p.note { font-style: italic }

ã“ã“ã§ã¯ class="note" ã‚’æŒã¤ P è¦ç´ ã ã‘ã«ãƒžãƒƒãƒã™ã‚‹ã‚ˆã†ã«ã‚»ãƒ¬ã‚¯ã‚¿ã‚’書ãã¾ã—ãŸãŒã€ class="note" ã‚’æŒã¤å…¨ã¦ã®è¦ç´ ã«ãƒžãƒƒãƒã™ã‚‹ã‚ˆã†ã«ã‚‚書ã‘ã¾ã™ï¼›

.note { text-decoratoin: underline }

一æ„セレクタ

è¦ç´ ã« id 属性ãŒä¸Žãˆã‚‰ã‚Œã¦ã„ã‚Œã°ã€ã‚»ãƒ¬ã‚¯ã‚¿ã§å‚ç…§ã§ãã¾ã™ã€‚

属性セット Core ã®ä¸€éƒ¨ã§ã‚ã‚‹ id 属性ã¯ã€body è¦ç´ å†…ã®ã‚らゆるè¦ç´  (Flow) ã«ä¸Žãˆã‚‹ã“ã¨ãŒå‡ºæ¥ã¾ã™ã€‚

HTML 文書ã®ä¾‹ï¼›

<h1 id="optical-properties">光学物性</h1>

対応ã™ã‚‹ã‚»ãƒ¬ã‚¯ã‚¿ã®ä¾‹ï¼›

h1#optical-properties { color: yellow }

id 属性ã®å€¤ã«ã¯ã€ä¸€ã¤ã®æ–‡æ›¸ä¸­ã§ä¸€å›žã ã‘ã—ã‹ç”¨ã„られã¦ã„ãªã„ã¨äº‘ã†ä¸€æ„性ãŒå¿…è¦ã§ã™ã€‚別ã®å ´æ‰€ã«åŒã˜ id 属性を与ãˆãªã„よã†ã«ãã‚Œãれも注æ„ãŒå¿…è¦ã§ã™ã€‚

3. HTML 文書ã¸ã®çµ„è¾¼ã¿æ–¹

åˆæœŸè¨­å®šã®æ˜Žè¨˜

HTML 文書ã§ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’利用ã™ã‚‹å ´åˆã¯ã€ HEAD è¦ç´ å†…ã§ãã®ç¨®é¡žã‚’明記ã—ã¾ã™ã€‚ã“ã“ã§ã¯ CSS を宣言ã—ã¾ã™ï¼›

<head>
  <title>CSS ã®ä¾‹</title>
  <meta http-equiv="content-style-type" content="text/css" />
</head>

文書中ã§æ¨™æº–çš„ã«åˆ©ç”¨ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ç¨®é¡žã‚’ã€head è¦ç´ ã®ä¸­ã«ã€ meta タグを利用ã—ã¦è¨˜è¿°ã—ã¦ã„ã¾ã™ã€‚

ã“ã“ã§ã¯ "text/css" を指定ã—ã¾ã—ãŸãŒã€ã“れ㌠CSS ã® MIME タイプã§ã™ã€‚

style è¦ç´ 

文書中ã§æ¨™æº–çš„ã«åˆ©ç”¨ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«å®£è¨€ã‚’ head è¦ç´ å†…ã® style è¦ç´ ã§è¨˜è¿°ã§ãã¾ã™ã€‚

<head>
  <title>CSS ã®ä¾‹</title>
  <meta http-equiv="content-style-type" content="text/css" />
  <style type="text/css">
  p { line-height: 1.5 }
  </style>
</head>

p { line-height: 1.5 } ãŒã‚¹ã‚¿ã‚¤ãƒ«ã§ã™ã€‚文書中ã®å…¨ã¦ã® P è¦ç´ ã®ä¸€è¡Œã®é«˜ã•ãŒã€æ–‡å­—ã® 1.5 å€ã«ãªã‚‹ã‚ˆã†ã«æŒ‡å®šã—ã¦ã‚ã‚Šã¾ã™ã€‚

インラインスタイル

或る一ã¤ã®è¦ç´ ã«ã ã‘スタイルをé©ç”¨ã™ã‚‹å ´åˆã¯ã€å½“該è¦ç´ ã® style 属性ã§æŒ‡å®šã—ã¾ã™ã€‚ style 属性㯠style 属性モジュールã§å®šç¾©ã•ã‚Œã¦ãŠã‚Šã€å±žæ€§ã‚»ãƒƒãƒˆ Common ã«å«ã¾ã‚Œã‚‹å±žæ€§ã‚»ãƒƒãƒˆ Style 内ã«å«ã¾ã‚Œã¾ã™ã€‚ã—ãŸãŒã£ã¦ã€ body è¦ç´ ä»¥ä¸‹ã®éšŽå±¤ã®å…¨ã¦ã®è¦ç´  (Flow) ã«å®šç¾©ã•ã‚Œã¦ã„ã¾ã™ï¼š

「日本列島改造論ã€ã‚’è‘—ã—ãŸ
<span style=" color: red; text-decoration: underline">田中角栄</span>
ã¨ã¯ã©ã‚“ãªäººã ã£ãŸã®ã ã‚ã†ï¼Ÿ

ã“ã“ã§ç”°ä¸­è§’æ „ 㯠span è¦ç´ ã®å†…容ã§ã™ãŒã€ã“ã® span è¦ç´ ã«ã¯ style 属性ãŒä¸Žãˆã‚‰ã‚Œã¦ã„ã¾ã™ã€‚「文字色ãŒèµ¤ã€ä¸‹ç·šè¡¨ç¤ºã€ãŒæŒ‡å®šã•ã‚Œã¦ã„ã¾ã™ã€‚

ã“ã®ã‚ˆã†ã« style 属性を与ãˆã‚‹æ–¹æ³•ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’ã€ã‚¤ãƒ³ãƒ©ã‚¤ãƒ³ã‚¹ã‚¿ã‚¤ãƒ«ã¨å‘¼ã³ã¾ã™ã€‚ XHTML 1.1 ã§ã¯éžæŽ¨å¥¨ã¨ãªã£ã¦ãŠã‚Šã€æ§‹é€ åŒ–を目的ã¨ã—ã¦å¤–部スタイルシートを用ã„るよã†ã«æŽ¨å¥¨ã•ã‚Œã¦ã„ã¾ã™ã€‚

複数ã®æ–‡æ›¸ã§å…±é€šã—ã¦åˆ©ç”¨ã™ã‚‹ã‚ˆã†ãªã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã¯ã€æ–‡æ›¸ã‹ã‚‰ç‹¬ç«‹ã—ãŸãƒ•ã‚¡ã‚¤ãƒ«ã«ã—ã¦ãŠã‘ã¾ã™ã€‚ã“ã®ã¨ãã€æ‹¡å¼µå­ã¯ *.css ã§ã™ï¼ˆä¾‹ï¼› atomic.css, cool.css )。

或る文書ãŒã€ atomic.css 㨠cool.css を利用ã—ãŸã„å ´åˆã€ head è¦ç´ ã§ link è¦ç´ ã‚’利用ã—ã¦æ˜Žè¨˜ã—ã¾ã™ã€‚

<head>
  <title>CSS ã®ä¾‹</title>
  <meta http-equiv="content-style-type" content="text/css" />
  <link rel="StyleSheet" href="../visual/atomic.css"
           type="text/css" />
  <link rel="StyleSheet" href="../visual/cool.css"
           type="text/css" />
</head>

ブラウザã¯ã€ã¾ãš visual フォルダã«ã‚ã‚‹ atomic.css ãŒèª­ã¿è¾¼ã¾ã‚Œã€ã“れ㫠cool.css ãŒä¸Šæ›¸ãã•ã‚Œã€å‡ºæ¥ã‚ãŒã£ãŸã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’é©ç”¨ã—ã¾ã™ã€‚

ã“ã‚Œã¯å›ºå®šã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã¨å‘¼ã°ã‚Œã‚‹ä¾‹ã§ã™ã€‚外部スタイルシートã«ã¯ã€ä»£æ›¿ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã¨äº‘ã†ã‚‚ã®ã‚‚ã‚ã‚Šã¾ã™ãŒã€ã“ã“ã§ã¯å‰²æ„›ã—ã¾ã™ã€‚詳ã—ãã¯CSSã®ç´¹ä»‹ã‚’御覧ãã ã•ã„。

4. 競åˆã®è§£æ±º

複数ã®æ–‡æ›¸ã§å…±æœ‰ã™ã‚‹ä¸€èˆ¬çš„ãªã‚¹ã‚¿ã‚¤ãƒ«ã‚’記述ã—ãŸå¤–部スタイルシートã¨ã€æ–‡æ›¸å†…ã®è¦ç´ æ¯Žã«é©ç”¨ã§ãる準一般的ãªã‚¹ã‚¿ã‚¤ãƒ«ã‚’記述ã—㟠STYLE è¦ç´ ã¨ã€æ¥µç‰¹æ®Šãªã‚¹ã‚¿ã‚¤ãƒ«ã‚’記述ã—ãŸã‚¤ãƒ³ãƒ©ã‚¤ãƒ³ãƒ»ã‚¹ã‚¿ã‚¤ãƒ«ã®ä¸‰ã¤ã«ã€ç›¸çŸ›ç›¾ã—ãŸè¨˜è¿°ãŒã‚ã‚‹ã¨ãã¯ã€ç‰¹æ®Šãªã‚‚ã®ã»ã©å„ªå…ˆã•ã‚Œã¾ã™ï¼›

優先順ä½ï¼šã€€å¤–部スタイルシート < STYLEè¦ç´  < インライン・スタイル

åŒã˜STYLEè¦ç´ å†…ã§ã‚‚ã€ä¸‹ã®è¡Œã«è¨˜è¿°ã•ã‚ŒãŸã‚‚ã®ã»ã©å„ªå…ˆåº¦ãŒä¸ŠãŒã‚Šã¾ã™ã€‚読ã¿ã“ã¿é †ãŒå¾Œã‚ã«è¡Œãã»ã©å„ªå…ˆåº¦ãŒä¸ŠãŒã‚‹ã¨äº‘ãˆã¾ã™ã€‚

但ã—〠"!important" ã¨äº‘ã†ã‚­ãƒ¼ãƒ¯ãƒ¼ãƒ‰ã§ã€ä»»æ„ã®ã‚¹ã‚¿ã‚¤ãƒ«å®£è¨€ã®å„ªå…ˆåº¦ã‚’最高ã«æŒ‡å®šå‡ºæ¥ã¾ã™ã€‚

ユーザスタイルシート

スタイルシートã¯ã€ãƒ–ラウザã€ãƒ¦ãƒ¼ã‚¶ã€ãƒšãƒ¼ã‚¸è¨˜è¿°è€…ã®ä¸‰è€…ãŒæŒå¯„ã‚‹å¯èƒ½æ€§ãŒã‚ã‚Šã¾ã™ã€‚ページ記述者ã®ã‚‚ã®ãŒæœ€ã‚‚優先ã•ã‚Œã¾ã™ï¼›

優先順ä½ï¼›ã€€ãƒ–ラウザ < ユーザ < ページ記述者

ã¾ãšãƒ–ラウザãŒç”¨æ„ã—ãŸã‚¹ã‚¿ã‚¤ãƒ«ãƒ»ã‚·ãƒ¼ãƒˆãŒã‚ã‚Šã€ãれをユーザãŒä¸Šæ›¸ãã—ã€æ›´ã«å„ページ毎ã«è¨˜è¿°ã•ã‚Œã¦ã„るスタイルãŒä¸Šæ›¸ãã™ã‚‹ã¨äº‘ã†é †ç•ªã ã¨è€ƒãˆã¦è‰¯ã„ã§ã—ょã†ã€‚

但ã—〠!important ã¨äº‘ã†ã‚­ãƒ¼ãƒ¯ãƒ¼ãƒ‰ã§ã€ä»»æ„ã®ã‚¹ã‚¿ã‚¤ãƒ«å®£è¨€ã®å„ªå…ˆåº¦ã‚’最高ã«æŒ‡å®šå‡ºæ¥ã¾ã™ã€‚

ã“ã†ã—ã¦æœ€çµ‚çš„ã«å‡ºæ¥ã‚ãŒã£ãŸã‚¹ã‚¿ã‚¤ãƒ«ãƒ»ã‚·ãƒ¼ãƒˆãŒé©ç”¨ã•ã‚Œã¾ã™ã€‚

5. メディアã®æŒ‡å®š

CSS ã¯åŸºæœ¬çš„ã«ã¯è¦‹æ „ãˆã‚’指定ã™ã‚‹ã‚‚ã®ã§ã™ãŒã€ä¸€èˆ¬ã«ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°å‡¦ç†ã‚’具体的ã«æŒ‡å®šã™ã‚‹ã‚‚ã®ã ã¨ã„ãˆã¾ã™ã€‚具体的ã«ã¯ã€ã‚³ãƒ³ãƒ”ュータスクリーンã«å¯¾ã™ã‚‹è‰²ã€æ–‡å­—ã®å¤§ãã•ã€è¡Œé–“ã€é…ç½®ãªã©ã®ä»–ã«ã€æ¬¡ã®ã‚ˆã†ãªå‡¦ç†ã‚‚考ãˆã‚‰ã‚Œã¾ã™ï¼š

ä»–ã«ã‚‚色々ã¨ç†ç”±ã¯ã‚ã‚Šã¾ã™ãŒã€ CSS ã§ã¯ã€å½“該スタイル内容ã®ç›®æ¨™ãƒ¡ãƒ‡ã‚£ã‚¢ã‚’指定ã™ã‚‹ã“ã¨ãŒå‡ºæ¥ã¾ã™ã€‚例ãˆã°ã€ã‚³ãƒ³ãƒ”ュータスクリーン㯠"screen"ã€å°åˆ·ã•ã‚ŒãŸç´™åª’体㯠"print"ã€éŸ³å£°åˆæˆå‡ºåŠ›è£…置㯠"aural" ã€æºå¸¯ç«¯æœ«ã€ PDA ãªã©ã®è¡¨ç¤ºèƒ½åŠ›ãŒåˆ¶é™ã•ã‚ŒãŸãƒ‡ãƒã‚¤ã‚¹ã¯ "tty" ãªã©ã§ã™ã€‚具体的ã«ã¯ã€æ¬¡ã®ã‚ˆã†ã«æŒ‡å®šã—ã¾ã™ï¼š

<head>
  <title>CSS ã®ãƒ¡ãƒ‡ã‚£ã‚¢ã‚¿ã‚¤ãƒ—</title>
  <link rel="stylesheet" type="text/css"
        href="./atomic.css"  media="all" />
  <link rel="stylesheet" type="text/css"
        href="./monitor.css" media="screen" />
  <link rel="stylesheet" type="text/css"
        href="./paper.css"   media="print" />
  <link rel="stylesheet" type="text/css"
        href="./speech.css"  media="aural" />
</head>

ã“ã“ã§ã¯å››ã¤ã®å¤–部スタイルシートãŒæŒ‡å®šã•ã‚Œã¦ã„ã¾ã™ã€‚例ãˆã°ã€ã‚³ãƒ³ãƒ”ュータスクリーンã§ã¯ã€ "atomic.css" 㨠"monitor.css" ãŒåˆ©ç”¨ã•ã‚Œã€ãれ以外ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã¯èª­ã¿è¾¼ã¾ã‚Œã¾ã›ã‚“。


ä»–ã«ã‚‚ CSS ã®åŸºæœ¬æ©Ÿèƒ½ã«ã¤ã„ã¦ã¯ç´¹ä»‹ã—ãªã‘ã‚Œã°ãªã‚‰ãªã„ã“ã¨ãŒæ²¢å±±ã‚ã‚Šã¾ã™ãŒã€å°‘ã—ãšã¤ä½¿ã£ã¦ã„ã‘ã°ã‚ˆã„ã§ã—ょã†ã€‚詳ã—ãã¯ã€ã€ŒCSS ã¨ã¯ãªã‚“ã ã‚ã†ã‹ã€ã‚’å‚ç…§ãã ã•ã„。


Copyright © 2000-2001, SUGAI, Manabu. All rights reserved. 著作権ã¯æ”¾æ£„ã—ã¦ã„ã¾ã›ã‚“。
SEO [PR] ”š‘¬!–³—¿ƒuƒƒO –³—¿ƒz[ƒ€ƒy[ƒWŠJÝ –³—¿ƒ‰ƒCƒu•ú‘—