店長的備忘録part3
1. ※マークを使って文字をぶら下げる方法
例えばこんな感じ↓
※きょうのネタってなんでしょう。。
こんな感じのネタです 笑
って書く場合に通常はスペース空けたりしますが、
CSSを使ったスマートな方法の備忘録
html(xhtml)ソースは↓
<p>※きょうのネタってなんでしょう。。 こんな感じのネタです 笑</p>
CSSは↓
p {
margin-left: 1em; /* ブロック全体を 1em 右に */
text-indent: -1em; /* 先頭の1文字のみ 1em 左に */
}
これでピシャッと揃います。
2. CSSをクロスブラウザで作成するデフォルト設定
これ今までにも何度か書いたような気がしますが、
結局のところ、YUI Reset CSSが便利かななと。
リンク形式で導入する場合は（ヘッダーに記述）↓
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">
スタイルシートに記述の場合は↓
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
まあ、CSSに記述する場合は、
適宜カスタマイズって感じが良いかもしれません。
3. IE6でも半透明のpng画像を表示するＣＳＳテクニック
png画像って透明化も出来るし、綺麗に表示されるので、
本当はバシバシ使いたいところですが、
まだまだ、使っている方が多いＩＥ６では
うまいこと表示されません～ 悲
っということで、スクリプトでもできますが、
ＣＳＳで表示する方法の備忘録
HTMLは↓
<div class="sample"> <img src="../img/sample.png" alt="半透明png" width="250" height="200"> </div>
ＣＳＳは↓
* html div.sample{
width:250px;
height:200px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=../img/sample.png);
}
* html div.sample img{
display:none;
}
うまく表示されないのはＩＥ６以下なので、
ハックを使い表示させます。
* html っていうやつですね。
widthとheightの大きさは表示される画像と同じに。
これは、しばらくは使えそうですね。
追記
CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする
上記はたとえば、divタグとかで、背景を指定したい場合に
有効なCSSです。
