スタイルシート指定で前後に何か表示する（content）
「対象:before { content:'表示内容'; }」で対象の前に、「対象:after { content:'表示内容'; }」で対象の後に追加で文字列、画像などを表示することができる。
" → " のようにアンパサンド（&）で始まるコード指定はここでの指定には使えず、UTF-8の文字コードで指定する必要がある（例：p:before { content:'\0022'; }）[9]。
<head> 要素中に <link> 要素を置いて外部スタイルシートファイルを記述する。
<html>
<head>
<link rel="stylesheet" href="スタイルシートファイル名" type="text/css" />
</head>
<body>
....
</body>
</html>
<head> 要素中に <style> 要素を置いてスタイル情報を記述することができる。
<html>
<head>
<style type="text/css">
<!--
h1 {
text-align:center;
}
-->
</style>
</head>
<body>
....
</body>
</html>
style要素に記述したスタイル情報は、スタイルシートに対応していないブラウザのために <!-- ... --> で囲んでhtmlコメントアウトしておく、という措置が取られたが、XHTML1.1では、内容がCDATA（任意の文字列、実体参照（&など）は有効で、改行文字LFや値の前後の空白文字は無視、改行文字CRやTab文字は空白文字として扱う）から#PCDATA（構文解析の対称となる文字列で、実体参照だけでなくタグ（<html>など）も認識される）に変更されたため、XHTML1.1正規の挙動では、コメントアウトすると記述したスタイル情報がコメントと解釈されて有効にならない。対応方法としては(1)外部スタイルシートファイルを利用する、(2)スタイルシート未対応ブラウザを無視してこの方法でコメントアウトせず記述する、(3)XHTML1.0以前を利用する、が考えられる。
XHTML1.1では非推奨。
<h1 style="text-align:center;">タイトル</h1>
参考文献・サイト：
全要素対処 #idタグ名 { } .class名 { } 指定タグ対象 タグ名 { } 指定タグで指定クラスを持つものが対象 タグ名.class名 { } 指定class内の指定要素全てが対象 .class名 タグ名 { }
pre {
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
| 内容 | HTML | CSS | ||||
|---|---|---|---|---|---|---|
| 属性指定要素 | 属性名 | 例 | 属性指定要素 | 属性名 | 例 | |
| 表の幅 | table | width | width="300" width="80%" |
table | width | width: 300px width: 80% |
| 外枠線の太さ | table | border | border="1" | table | border-width border（太さ、スタイル、色） |
border-width: 1px border: 1px solid green |
| 外枠線の色 | table | bordercolor | bordercolor="green" bordercolor="#2468AC" |
table | border-color border（太さ、スタイル、色） |
border-color: green border-color: #2468AC border: 1px solid green |
| 外枠線のスタイル | - | - | - | table | border-style border（太さ、スタイル、色） |
border-style: solid border: 1px solid green |
| セル枠線の太さ | th,td | border | border="1" | th,td | border-width border（太さ、スタイル、色） |
border-width: 1px border: 1px solid green |
| セル枠線の色 | th,td | bordercolor | bordercolor="green" bordercolor="#2468AC" |
th,td | border-color border（太さ、スタイル、色） |
border-color: green border-color: #2468AC border: 1px solid green |
| セル枠線のスタイル | - | - | - | th,td | border-style border（太さ、スタイル、色） |
border-style: solid border: 1px solid green |
| - | table | frame | - | table | border-top border-right border-bottom border-left |
- |
| - | table | rules | - | thead tfoot tbody colgroup col tr |
border関連 | - |
| - | table | cellspacing | - | table | border-spacing | - |
| - | table | cellpadding | - | th,td | padding | - |
| - | td,th | align | - | td,th | text-align | - |
| - | td,th | valign | - | td,th | vertical-align | - |
水平線を表示するhr要素に固有の属性は全て非推奨属性。それらに相当するCSS属性は以下の通り。
| hrの属性名、属性値 | CSS属性 | 備考 |
|---|---|---|
| align="left | center | right" | margin-left:0; | margin:auto; |margin-right:0; |
水平方向の位置を指定する。css無指定の場合はcenter相当の表示。
【例】
<hr align="left">
↓
hr {
margin-left:0;
}
|
| noshade="noshade" | color:色指定; background-color:色指定; border-style:none; |
指定すると影をつけず塗りつぶした線として表示する。CSSで外枠を表示せず、背景色を指定。ブラウザ依存で表示の差が出るのを防ぐため、colorも指定するのが良いとのこと[1]
【例】
<hr noshade="noshade">
↓
hr {
color:gray;
background-color:gray;
border-style:none;
}
|
| color=色指定 | color:色指定; |
線の色を指定する。
色は既定の色名、#＋6桁16進数などで表記。
【例】
<hr color="#dddddd">
↓
hr {
color:#dddddd;
}
|
| size="数値" | height:数値px |
線の太さをピクセル単位で指定する。hr要素の既定値は1pxのよう。
【例】
<hr size="4">
↓
hr {
height:4px;
}
|
| width="数値" | width:数値px |
線の長さをピクセル単位で指定する。
【例】
<hr width="400">
↓
hr {
width:400px;
}
|
参考文献・サイト
下記指定の表で、幅をwidth指定しているのに指定値より幅が縮んでしまうことがある。他の列で、幅指定がなく長い文字列の入った列があった場合に、そちらが自動的に幅が引き延ばされ、そちらに幅が回ってしまうために発生する。
width:100%;）| セル | スタイル例 |
|---|---|
| 幅指定セル | width:6em; |
| 幅非指定セル | （width指定無し） |
以下の通り修正したら直った。
| セル | スタイル例 |
|---|---|
| 幅指定セル | min-width:6em; |
| 幅非指定セル | width:auto; |
【書式】
@import url(パス・ファイル名);
各HTMLページに共通するスタイル情報を別のファイルにまとめておいてそれを読み込み、ページ固有のスタイルを記述すると言った使い方ができる。
スタイルシート（css）ファイルの記述に用いている文字コードを宣言するには、ファイルの最初の行に以下の情報を記述する。
【書式】
@charset "文字コード名";
文字コード名には euc-jp、utf-8、shift-jisなどを指定する。
【例】 @charset "utf-8";
ある親要素の中にある子要素が、スタイルシートでfloat属性を設定されている場合、親要素からはみ出ないような扱いはしてくれない。それをはみ出ないようにするには、親要素の後にfloatを解除し不可視の設定をしたcontentを置いておく。
[html]
<div id="parent1">
<span class="child_left">左</span>
<span class="child_right">右</span>
</div>
<div id="parent2">
<span class="child_left">左</span>
<span class="child_right">右</span>
</div>
[css]
#parent1, #parent2 {
background-color: #bfdfd9;
margin:0 1em;
padding:0;
}
#parent1:after {
content: ".";
display: block; /* ブロック要素 */
clear: both; /* 回り込み両側解除 */
height: 0; /* 高さ0 */
visibility: hidden; /* 表示しない */
}
#child_left {
float: left;
margin: 0.5ex 0.5em;
border:1px solid green;
}
#child_right {
float: right;
margin: 0.5ex 0.5em;
border:1px solid blue;
}
[結果]
下記の通り。
※parent1の方は２つのspan要素が収まるように高さが自動的に大きくなっている。
※parent2の方は高さが0になり、２つのspan要素がはみ出ている。
参考文献・サイト
自動的にカウントアップする表示をするための指示（counter-increment）、 カウントを１に戻す指示（counter-reset）は、 firefox2では効かないようだ。 Opera9.21(build 3678)では効いていることを確認。
| ブラウザ | 対応 | 摘要 |
|---|---|---|
| Firefox 2.0.0.4 | × | １からカウントアップしない。 |
| Opera 9.21 (build 3678) Opera/9.21 (Macintosh; Intel Mac OS X; U; ja) |
○ | |
| Safari 2.0.4 (419.3) Mozilla/5.0 (Macintosh; U; Intel Mac OS X; ja-jp) AppleWebKit/419 (KHTML, like Gecko) Safari/419.3 |
× | 値自体が表示されない |
| Netscape 7.1 Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O;ja-JP;rv:1.4) Gecko/20030624 Netscape/7.1 |
× | 値自体が表示されない |
要素の幅をwidthで指定しても、デフォルトの設定では空白以外の半角英数字記号が連続している途中では改行されず、指定幅よりも伸びてしまうことがある（単語の途中では改行しない方を幅指定より優先されてしまう）。
単語の途中であろうと強制改行させるには、
word-break: break-all;
参考文献・サイト
ブロック要素の後は通常改行が入って表示されるが、display: inline-blockをスタイルシートで指定しておけば、それを抑制可能。これを使えばブロック要素を複数同一行に並べたりすることもできる[css7]、[webgen02]。floatを使えば、左右に要素を配置することはできるが、内包する要素がはみ出ないよう高さ等を指定しておかないと内包要素がはみ出てしまう。また、内包要素の上下マージンを均等にするには、適当な外枠の高さ指定値を探す必要あり。
[html] <p>外枠は5exの高さを確保し、中の要素はfloatで左右に配置</p> <div class="outerbox" id="outerbox_type1"> <div class="innerbox_left" id="innerbox1_1">これが左</div> <div class="innerbox_right" id="innerbox1_2">これが右</div> </div> <p>外枠の高さ指定をしないとfloat指定要素ははみ出てしまう</p> <div class="outerbox" id="outerbox_type2"> <div class="innerbox_left" id="innerbox2_1">これが左</div> <div class="innerbox_right" id="innerbox2_2">これが右</div> </div> <p>display:inline-blockを使うと、外枠の高さ指定をしなくても 内側要素ははみ出ない</p> <div class="outerbox" id="outerbox_type3"> <div class="innerbox_left" id="innerbox3_1">これが左</div> <div class="innerbox_right" id="innerbox3_2">これが右</div> </div>
[css]
.outerbox {
width:50%;
margin:1ex 0;
padding:4px;
border:1px solid green;
text-align:center;
}
#outerbox_type1 {
height:5ex;
}
#outerbox_type2 {
margin-bottom:5ex;
}
#outerbox_type1 div {
width:36%;
margin:1ex 1em;
}
#outerbox_type3 div {
width:36%;
margin:1ex 1em;
display:inline-block;
}
.innerbox_left {
border:1px solid red;
}
.innerbox_right {
border:1px solid blue;
}
#innerbox1_1, #innerbox2_1, #innerbox3_1 {
float:left;
}
#innerbox1_2, #innerbox2_2, #innerbox3_2 {
float:right;
}
外枠は5exの高さを確保し、中の要素はfloatで左右に配置
外枠の高さ指定をしないとfloat指定要素ははみ出てしまう
display:inline-blockを使うと、外枠の高さ指定をしなくても内側要素ははみ出ない
通常は非表示にしておき、マウスオーバー時のみ表示させることで、ポップアップウインドウ様の挙動を実現できる[css06]。但し、ポップアップの表示位置は固定されるため、ポップアップ設定部分のブラウザウインドウ上の位置によっては画面からはみ出て見えない（スクロールバーが出てスクロールすれば見えるようになるが、スクロールしようとマウスポインタを移動させるとポップアップが閉じてしまい、事実上スクロール不可）。この問題を回避するには、JavaScriptを併用し、マウスポインタ位置とブラウザウインドウサイズを取得し、その内容に応じて表示位置を変えるような仕組みを使う必要あり。
--- htmlソース
<a href="#" id="css_popup_ex01">マウスポインタが来るとポップアップウインドウを表示します。<span>ばぁっ！</span></a>
--- cssソース
a#css_popup_ex01 div {
display:none; /* 通常は表示しない */
border:1px solid gray;
padding:1ex 1em 1ex 0;
background-color:white; /* 背景色を指定しないと背後のウインドウが透けて見える */
color:black;
}
a#css_popup_ex01:hover div {
display:inline; /* マウスオーバーした時だけ表示する */
position:absolute;
}
「対象:before { content:'表示内容'; }」で対象の前に、「対象:after { content:'表示内容'; }」で対象の後に追加で文字列、画像などを表示することができる。
" → " のようにアンパサンド（&）で始まるコード指定はここでの指定には使えず、UTF-8の文字コードで指定する必要がある（例：p:before { content:'\0022'; }）[9]。
ime-modeを指定すればいいらしい12。自動はauto（既定値）、日本語等の入力を初期値でONにするにはactive、日本語等の入力を初期値でOFFにするにはinactive、入力中は日本語等の入力をONにできなくするにはdisable（ただしコピー＆貼り付けで日本語等を入力することはできる）。