店長的備忘録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画像を表示するCSSテクニック

png画像って透明化も出来るし、綺麗に表示されるので、
本当はバシバシ使いたいところですが、
まだまだ、使っている方が多いIE6では
うまいこと表示されません~ 悲

っということで、スクリプトでもできますが、
CSSで表示する方法の備忘録

HTMLは↓

<div class="sample">
<img src="../img/sample.png" alt="半透明png" width="250" height="200">
</div>

CSSは↓

* html div.sample{
    width:250px;
    height:200px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=../img/sample.png);
}
* html div.sample img{
    display:none;
}

うまく表示されないのはIE6以下なので、
ハックを使い表示させます。
* html っていうやつですね。

widthとheightの大きさは表示される画像と同じに。

これは、しばらくは使えそうですね。

追記

CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする

上記はたとえば、divタグとかで、背景を指定したい場合に
有効なCSSです。


posted by そば富泉

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

そば屋の雑記

次の記事

挽き肉が