since: 30th/Aug./2000; last modified: 27th/Sep./2001
CSS 㯠HTML 文書ã®è¦‹æ „ãˆã‚’調整ã™ã‚‹ãŸã‚ã®ä»•çµ„ã¿ã§ã™ã€‚ã“ã“ã§ãã®æ¦‚略を述ã¹ã¾ã™ã€‚ã¾ãšã¯è©¦ã—ã¦ã¿ãŸã„æ–¹ã¯ã€ã€ŒCSS スピードラーニングã€ã‚’ã€ã•ã‚‰ã«è©³ã—ã„解説ã¯ã€Œ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 è¦ç´ ã€ã‚’表ã—ã¾ã™ã€‚ã“ã®å®£è¨€ã§ã¯ã€ã€Œæ–‡å—スタイルãŒã‚¤ã‚¿ãƒªãƒƒã‚¯ä½“ã§ã€è‰²ãŒèµ¤ã€ä¸‹ç·šè¡¨ç¤ºã€ã®ä¸‰ã¤ãŒæŒ‡å®šã•ã‚Œã¦ã„ã¾ã™ã€‚
例ãˆã°ã€ 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 属性を与ãˆãªã„よã†ã«ãã‚Œãれも注æ„ãŒå¿…è¦ã§ã™ã€‚
HTML 文書ã§ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’利用ã™ã‚‹å ´åˆã¯ã€ HEAD è¦ç´ 内ã§ãã®ç¨®é¡žã‚’明記ã—ã¾ã™ã€‚ã“ã“ã§ã¯ CSS を宣言ã—ã¾ã™ï¼›
<head> <title>CSS ã®ä¾‹</title> <meta http-equiv="content-style-type" content="text/css" /> </head>
文書ä¸ã§æ¨™æº–çš„ã«åˆ©ç”¨ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ç¨®é¡žã‚’ã€head è¦ç´ ã®ä¸ã«ã€ meta タグを利用ã—ã¦è¨˜è¿°ã—ã¦ã„ã¾ã™ã€‚
ã“ã“ã§ã¯ "text/css
" を指定ã—ã¾ã—ãŸãŒã€ã“れ㌠CSS ã® MIME タイプã§ã™ã€‚
文書ä¸ã§æ¨™æº–çš„ã«åˆ©ç”¨ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«å®£è¨€ã‚’ 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ã®ç´¹ä»‹ã‚’御覧ãã ã•ã„。
複数ã®æ–‡æ›¸ã§å…±æœ‰ã™ã‚‹ä¸€èˆ¬çš„ãªã‚¹ã‚¿ã‚¤ãƒ«ã‚’記述ã—ãŸå¤–部スタイルシートã¨ã€æ–‡æ›¸å†…ã®è¦ç´ 毎ã«é©ç”¨ã§ãる準一般的ãªã‚¹ã‚¿ã‚¤ãƒ«ã‚’記述ã—㟠STYLE è¦ç´ ã¨ã€æ¥µç‰¹æ®Šãªã‚¹ã‚¿ã‚¤ãƒ«ã‚’記述ã—ãŸã‚¤ãƒ³ãƒ©ã‚¤ãƒ³ãƒ»ã‚¹ã‚¿ã‚¤ãƒ«ã®ä¸‰ã¤ã«ã€ç›¸çŸ›ç›¾ã—ãŸè¨˜è¿°ãŒã‚ã‚‹ã¨ãã¯ã€ç‰¹æ®Šãªã‚‚ã®ã»ã©å„ªå…ˆã•ã‚Œã¾ã™ï¼›
å„ªå…ˆé †ä½ï¼šã€€å¤–部スタイルシート < STYLEè¦ç´ < インライン・スタイル
åŒã˜STYLEè¦ç´ 内ã§ã‚‚ã€ä¸‹ã®è¡Œã«è¨˜è¿°ã•ã‚ŒãŸã‚‚ã®ã»ã©å„ªå…ˆåº¦ãŒä¸ŠãŒã‚Šã¾ã™ã€‚èªã¿ã“ã¿é †ãŒå¾Œã‚ã«è¡Œãã»ã©å„ªå…ˆåº¦ãŒä¸ŠãŒã‚‹ã¨äº‘ãˆã¾ã™ã€‚
但ã—〠"!important
" ã¨äº‘ã†ã‚ーワードã§ã€ä»»æ„ã®ã‚¹ã‚¿ã‚¤ãƒ«å®£è¨€ã®å„ªå…ˆåº¦ã‚’最高ã«æŒ‡å®šå‡ºæ¥ã¾ã™ã€‚
スタイルシートã¯ã€ãƒ–ラウザã€ãƒ¦ãƒ¼ã‚¶ã€ãƒšãƒ¼ã‚¸è¨˜è¿°è€…ã®ä¸‰è€…ãŒæŒå¯„ã‚‹å¯èƒ½æ€§ãŒã‚ã‚Šã¾ã™ã€‚ページ記述者ã®ã‚‚ã®ãŒæœ€ã‚‚優先ã•ã‚Œã¾ã™ï¼›
å„ªå…ˆé †ä½ï¼›ã€€ãƒ–ラウザ < ユーザ < ページ記述者
ã¾ãšãƒ–ラウザãŒç”¨æ„ã—ãŸã‚¹ã‚¿ã‚¤ãƒ«ãƒ»ã‚·ãƒ¼ãƒˆãŒã‚ã‚Šã€ãれをユーザãŒä¸Šæ›¸ãã—ã€æ›´ã«å„ページ毎ã«è¨˜è¿°ã•ã‚Œã¦ã„るスタイルãŒä¸Šæ›¸ãã™ã‚‹ã¨äº‘ã†é †ç•ªã ã¨è€ƒãˆã¦è‰¯ã„ã§ã—ょã†ã€‚
但ã—〠!important
ã¨äº‘ã†ã‚ーワードã§ã€ä»»æ„ã®ã‚¹ã‚¿ã‚¤ãƒ«å®£è¨€ã®å„ªå…ˆåº¦ã‚’最高ã«æŒ‡å®šå‡ºæ¥ã¾ã™ã€‚
ã“ã†ã—ã¦æœ€çµ‚çš„ã«å‡ºæ¥ã‚ãŒã£ãŸã‚¹ã‚¿ã‚¤ãƒ«ãƒ»ã‚·ãƒ¼ãƒˆãŒé©ç”¨ã•ã‚Œã¾ã™ã€‚
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 ã¨ã¯ãªã‚“ã ã‚ã†ã‹ã€ã‚’å‚ç…§ãã ã•ã„。
SEO | [PR] ”š‘¬!–³—¿ƒuƒƒO –³—¿ƒz[ƒ€ƒy[ƒWŠJÝ –³—¿ƒ‰ƒCƒu•ú‘— | ||