CSS関係

目次

スタイルの指定方法

外部スタイルシートファイルを指定

<head> 要素中に <link> 要素を置いて外部スタイルシートファイルを記述する。

<html>
<head>
<link rel="stylesheet" href="スタイルシートファイル名" type="text/css" />
</head>
<body>
....
</body>
</html>

style要素中に記述

<head> 要素中に <style> 要素を置いてスタイル情報を記述することができる。

<html>
<head>
<style type="text/css">
<!--
h1 {
  text-align:center;
}
-->
</style>
</head>
<body>
....
</body>
</html>

style要素に記述したスタイル情報は、スタイルシートに対応していないブラウザのために <!-- ... --> で囲んでhtmlコメントアウトしておく、という措置が取られたが、XHTML1.1では、内容がCDATA(任意の文字列、実体参照(&amp;など)は有効で、改行文字LFや値の前後の空白文字は無視、改行文字CRやTab文字は空白文字として扱う)から#PCDATA(構文解析の対称となる文字列で、実体参照だけでなくタグ(<html>など)も認識される)に変更されたため、XHTML1.1正規の挙動では、コメントアウトすると記述したスタイル情報がコメントと解釈されて有効にならない。対応方法としては(1)外部スタイルシートファイルを利用する、(2)スタイルシート未対応ブラウザを無視してこの方法でコメントアウトせず記述する、(3)XHTML1.0以前を利用する、が考えられる。

個別要素のstyle属性値に記述

XHTML1.1では非推奨。

<h1 style="text-align:center;">タイトル</h1>

参考文献・サイト:

スタイル指定対象の指定

全要素対処
#idタグ名 {
}
.class名 {
}
指定タグ対象
タグ名 {
}
指定タグで指定クラスを持つものが対象
タグ名.class名 {
}
指定class内の指定要素全てが対象
.class名 タグ名 {
}

pre属性内でも自動改行(cssで)

pre {
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}

table要素の一部属性をCSSで指定

内容 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 -

水平線の属性をCSSで指定

水平線を表示する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:6em;
幅非指定セル width指定無し)

以下の通り修正したら直った。

セル スタイル例
幅指定セル min-width:6em;
幅非指定セル width:auto;

cssファイルに他のcssファイルの内容を読み込む

【書式】
@import url(パス・ファイル名);

各HTMLページに共通するスタイル情報を別のファイルにまとめておいてそれを読み込み、ページ固有のスタイルを記述すると言った使い方ができる。

ファイル文字コードの宣言

スタイルシート(css)ファイルの記述に用いている文字コードを宣言するには、ファイルの最初の行に以下の情報を記述する。

【書式】
@charset "文字コード名";

文字コード名には euc-jp、utf-8、shift-jisなどを指定する。

【例】
@charset "utf-8";

float要素をボックスからはみ出ないようにする

ある親要素の中にある子要素が、スタイルシートで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の方は2つのspan要素が収まるように高さが自動的に大きくなっている。
※parent2の方は高さが0になり、2つのspan要素がはみ出ている。

参考文献・サイト

CSS:counter

自動的にカウントアップする表示をするための指示(counter-increment)、 カウントを1に戻す指示(counter-reset)は、 firefox2では効かないようだ。 Opera9.21(build 3678)では効いていることを確認。

ブラウザ 対応 摘要
Firefox 2.0.0.4 × 1からカウントアップしない。
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を使うと、外枠の高さ指定をしなくても内側要素ははみ出ない

これが左
これが右

スタイルシート指定で前後に何か表示する(content)

対象:before { content:'表示内容'; }」で対象の前に、「対象:after { content:'表示内容'; }」で対象の後に追加で文字列、画像などを表示することができる。

&quot;" のようにアンパサンド(&)で始まるコード指定はここでの指定には使えず、UTF-8の文字コードで指定する必要がある(例:p:before { content:'\0022'; }[9]

入力ボックス等で日本語入力をOFFにする

ime-modeを指定すればいいらしい12。自動はauto(既定値)、日本語等の入力を初期値でONにするにはactive、日本語等の入力を初期値でOFFにするにはinactive、入力中は日本語等の入力をONにできなくするにはdisable(ただしコピー&貼り付けで日本語等を入力することはできる)。