role属性

役割を持たせる。

role="presentation"

アクセシブル・リッチ・インターネット・アプリケーション(WAI-ARIA)バージョン1.0

テーブルがpresentationとマークされている場合、ユーザーエージェントは、table、td、th、trなどの要素をアクセシビリティAPIマッピングから取り除き、そのなかに入っている個々のテキスト要素だけを残すことができる。これにより、テーブルで示唆された構造的側面を無視してもよいことがユーザーエージェントに分かるようになるため、レイアウト目的でテーブルを使っても害がなくなる。

箇条書きリストのポチ(点)を消す

<ul style="list-style:none;">

親要素からの相対位置

#cont-profile .unit-program-roll li.checkbox{
    position: relative;
    left: 0px;
    top: 0px;
}
#cont-profile .unit-program-roll li.checkbox .example-label{
    position: absolute;
    display: inline-block;
    left: 150px;
}

CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lecture

親を relative にしておくと、absolute が親からの相対位置になる。

文字列を前とか後ろに付加する

form .required > label:after {
  color: #F00;
  content: '※';
  display: inline;
  font-weight: bold;
}

タイプ限定

input[type=submit] {
  display: inline;
  font-size: 110%;
  width: auto;
}

横に並べる (ボックス)

display:inline;
display:inline-block;
display:block;

右揃え

自分自身を右に。
float: right;
内部要素を右に。
text-align: right;

float

float:left;
clear:both;

高さ

min-height

下に揃える

position:absolute; top:100px; bottom:0px;

優先順位:強制

H1 { color:red ! important; }

リンク

a:link { color: #0000ff; } … 未訪問のリンク
a:visited { color: #000080; } … 訪問済みのリンク
a:hover { color: #ff0000; } … ポイント時のリンク
a:active { color: #ff8000; } … 選択中のリンク
A.noborder:link { color:#000000; text-decoration:none; }
A.noborder:visited  { color:#000000; text-decoration:none; }
A.noborder:hover    { color:#000000; text-decoration:none; }
A.noborder:active   { color:#000000; text-decoration:none; }

適用順序

3/4 実は重要!スタイルシートの記述順! [ホームページ作成] All About

p { color: red; }
p { color: blue; }

同じスタイルが記述された場合は、後に記述された方が優先して採用される

tableの中のtdすべてにスタイルシートを適用

table.test td{
  border: 1px #000000 solid;
}

<table class="test">
<tr><td>A</td><td>B</td></tr>
</table>

グルーピング

とほほのスタイルシート入門(概要)

カンマ(,)を用いて、H1要素、H2要素の属性を一度に指定することができます。

H1, H2 { color:red; }

クラス

タグ指定

とほほのスタイルシート入門(概要)

P.red   { color: red; }
P.green { color: green; }

<p class=red>これはredクラスです。</p>
<p class=green>これはgreenクラスです。</p>

タグ非指定

とほほのスタイルシート入門(概要)

.red { color: red; }

<h1 class=red>これはredクラスです。</h1>
<p class=red>これもredクラスです。</p>

複数クラスの同時使用

とほほのスタイルシート入門(概要)

IE5.0 以降では、複数のクラスを重複して指定することができます。

.red { color: red; }
.bold { font-weight: bold; }

<span class="red bold">赤い太字</span>

ID属性

06 ウェブサイトを作ろう1

クラスの代わりに ID を指定することもできます。クラスはスタイルの集合につける名前で、 複数のタグに同じクラス名を指定することが可能ですが、ID はそれぞれの要素につける名前で、 ひとつのドキュメント中に、複数の要素が同じ ID を持つことは許されません。

#elm123 { color:red; }
H1#elm124 { color:green; }

<span ID=elm123>あいうえお</span>
<h1 ID=elm124>かきくけこ</h1>

状況依存セレクタ

/* H1 の中の EM */
H1 EM { color:red; }

/* H1 直下の EM */
H1 > EM { color: red; }

コメント

/*
コメント
*/

トラブルシューティング

スタイルが適用されない

他のスタイルシートの指定で「! important」が適用されていないかどうか確認。