homeホーム ＞ HTMLに役立つヒント＞CSS Tips ＞ すぐに忘れるCSSメモ

■すぐに忘れるCSSメモ

　僕がすぐに忘れてしまうCSSのプロパティ。他の人には参考にならないだろうなぁ(^^;　まだまだ書きかけで増える予定。

●ポジション/position　▲ページトップ

position:static/relative/absolute/fixed ;
top : 0px;
left : 0px;

static　デフォルト。上位のブックの終わりが起点。top/leftの指定は無効になる。
relative　相対的な位置指定。staticで表示される位置が起点となる。上位のブロック要素
absolute　絶対配置。上位のブロックの始点が起点。裸で書けばbodyが上位ブロックとなるのでページの左上が起点となる。
fixed　ブラウザの左上が起点。スクロールさせても位置が動かない。

●フロート/float　▲ページトップ

float:left;
width:50%;

　floatにはwidth指定が必須である。これを忘れないように。

●justify　▲ページトップ

text-align:justify;
text-justify:inter-ideograph;

　Windows版IEでしか理解できない独自仕様のjustify。両端揃えで、最後の行は左寄せになる。Windows/IE以外では理解しないため表示の乱れはない。

●font-family　▲ページトップ

　MacintoshとWindowsに対応したフォントの指定。

font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka;　ゴシック系

font-family: 'MS Gothic',Osaka-Mono;　等幅系

●list-style-image　▲ページトップ

　リストはマーカーを変えるだけで雰囲気が全然違う。

　list-style-image:url("li-btn01.gif");

●リンクをボタン風に　▲ページトップ

　a指定でかなり面白いことができる。ただのリンクをボタンのように見せかけることができるのだ。

/*リンクの基本*/
.a-btn01 a{
text-decoration:none;
text-align:center;
background-color: #ff9900;
color:#fff;
font-weight:bold;
display:block;
margin:0px;
padding:3px;
width:150px;
border:2px outset #ccc;
display:inline;
}

/*マウスオーバー*/
.a-btn01 a:hover{
border:2px inset #ccc;
color:#000;
}

左の設定のリンク左の設定のリンク

マウスオーバーでボーダーのスタイルなどを変えてみた。

●form要素の見栄えを変える　▲ページトップ

　特に変わったテクニックはないが、input要素をまとめて変更するのがラクチンかな。

input {
letter-spacing:0.3em; /*文字間を変更*/
background-color:#99ff99; /*背景色*/
}

class指定で特定のボタンだけ、という手もある。

直接指定でもいいですが。

<INPUT NAME="name" TYPE="submit" VALUE="直接指定" style="padding:5px;color:black;border-width:1px;border:solid red ;background-color:#ffccff">

●CSSハック　▲ページトップ

●MAC/IE5用ハック

「\」があるとコメントとして認識しないというバグ（？）を利用したもの。以下の赤い部分全部をコメントとして認識してしまうので、MAC/IEから隠すことができる。

/* ここからIE5 mac には読めない\*/
font-size: 80%;
/* ここまで IE5 mac には読めない*/

　後で指定されたものだけが適用されるというCSSのルールがあるので、こんな風にするとMAC/IEではフォントが90%、その他は80%で表示される。

font-size: 90%;
/* ここからIE5 mac には読めない\*/
font-size: 80%;
/* ここまで IE5 mac には読めない*/

●WIN/IE6用ハック　アンダーハック

WIN版IE6.0にはCSSの表示がよく乱れるバグがある。これを回避する方法はいろいろあるみたいだけど、よく使うのはアンダーハックと呼ばれるもの。表示の乱れはwidthかheightなどのサイズを指定すると解消される。これと、指定の前に妙な文字列があってもそれを無視して読み込むというWIN/IE6の特性を組み合わせて利用したもの。

_height:1%;/*WIN IE6.0対策　アンダーハック*/

　このように書くとWIN IE6.0はheight:1%;を認識し、表示の乱れが解消する。

　なお、アンダーハックはWIN/IE4〜6とMAC/IE4〜5も認識する。なので、あってもなくてもいいような指定「height:1%;」を僕は使っている。

●モダンブラウザ用　単純ボックスハック

モダンブラウザと呼ばれる最近のブラウザ（WIN/IE6、FireFox、Safafiなど）だけに認識させたいときに便利なハック。認識させたいプロパティの2文字目に「\」を記述するだけ。

　次の赤の部分はモダンブラウザだけが認識する。

#aaa {
font-size:80%;
f\ont-size:70%;
}

　他にも、スターハックとか、CSSハックのテクニックはいろいろある。

　よく使うのはこんな感じ。

/*================　本文　================*/
.contbody{
font-size: 100%; /*win IE以外のブラウザ*/
_font-size:80%; /*win IE用だけ認識*/
}

/*================　本文　================*/
.contbody{
line-height: 150%;
font-size: 100%; /*MAC　IE*/
/* ここからIE5 mac には読めない。その他のブラウザ用\*/
font-size: 90%;
/* ここまで IE5 mac には読めない*/
_font-size:80%; /*win IE用だけ認識*/
}

●印刷用CSS　▲ページトップ

　float.htmlにprint.cssを仕込んでみた。

・<link rel="stylesheet" href="print.css" media="print">で印刷用CSSを指定できる。「aural」で音声読み上げ向けの指定もできる。

・印刷用CSSの場合、フォントはptで固定した方がよい。

・余白はmarginを使って5%程度作っておく。

・メニューやフッタなど、内容部分以外は「display:none;」で削除してしまう。

・floatでページレイアウトをしている場合は、印刷用CSSではこの指定を「float:none;」で解除する。でないと1ページしか印刷されないケースがある。

・リンクにURLを併記する指定。「スタイルシートスタイルブック」より。

body a:link:after{
content:"（" after(href) "）";
font-size:12pt;
}

homeホーム ＞ HTMLに役立つヒント＞CSS Tips ＞ すぐに忘れるタグメモ