ieha * Web Design ieha * Web Design

[css]小技メモ

Webクリエイターボックスさん http://www.webcreatorbox.com/tech/css-tips20/
「少しのコードで実装可能な20のCSS小技集 」記事から自分用にメモメモ。

■透明度を変更
[css]
.image {
filter:alpha(opacity=50); /* IE7以下用 */
-ms-filter: "alpha(opacity=50)"; /* IE8用 */
-moz-opacity:0.5; /* Firefox 1.5未満, Netscape用 */
-khtml-opacity: 0.5; /* Safari 1.x, 他khtmlに対応したブラウザ用 */
opacity: 0.5; /* Firefox 1.5以上, Opera, Safari用 */
}
[/css]

■ページサムネイル画像
[html]
<link rel="image_src" href="thumb.jpg" />
[/html]

■画像の好きな部分を切り抜く
[css]
div {
width: 200px;
height: 130px;
border: solid 1px #ccc;
position: relative;
}
div img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}
[/css]

■横並びブロックのマージンを調節
[html]
<div>
<ul>
<li><img src="image/001.jpg" alt="サンプル画像1" width="150" height="100" /></li>
<li><img src="image/002.jpg" alt="サンプル画像2" width="150" height="100" /></li>
<li><img src="image/003.jpg" alt="サンプル画像3" width="150" height="100" /></li>
</ul>
</div>
[/html]
[css]
div {
width: 470px;
border:2px solid #F33;
}
div ul {
width: 480px;
margin-right: -10px;
overflow: hidden;
_zoom: 1;
}
div ul li {
float: left;
margin-right: 10px;
}
[/css]

…cssプロパティの書き順は自分用に変えてます。
↓自分用cssプロパティ書き順
[css]
width:
height:
line-height:
margin:
padding:
text-decoration:
font-size:
letter-spacing:
color:
vertical-align: middle;
list-style:
outline: none;
border:
background:
display:
visibility: hidden;
float:
clear:
position:
z-index:
overflow:
cursor: pointer;
cursor: default;
overflow: hidden;
-moz-opacity: 0.80;
opacity: 0.8;
filter: alpha(opacity=80);
zoom: 1;
// 半角英数文字を指定された範囲内で折り返す
word-break: break-all;
// 角丸 /* IEはDD_roundies_0.0.2a-min.js必要 */
/* rounded */
padding: 10px 0 10px 15px;
-moz-border-radius: 15px 0; /* for Firefox */
-webkit-border-radius: 15px 0; /* for Safari and chrome */
border-radius: 15px 0; /* CSS3 */
behavior: url(border-radius.htc); /* for IE */
// cssシャドウ
/* box-shadow */
-moz-box-shadow: 0 0 3px #969696; /* for Firefox */
-webkit-box-shadow: 0 0 3px #969696; /* for Safari and chrome */
/* box-shadow for IE */
background-color: #fff;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color=’#969696′, Direction=135, Strength=2);

/* —————————
hack for Boxmodel
————————— */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/* IE6 */
* html .clearfix {zoom: 1;}
/* IE7 */
*:first-child+html .clearfix {zoom: 1;}

/* —————————
hack for IE8
————————— */
html>/**/body p {
height /*\**/: 120px\9;
width /*\**/: 120px\9;
}

/* —————————
hack for IE7
————————— */
*:first-child+html p { margin: 0;}

/* —————————
hack for IE6
————————— */
* html p {margin: 0;}

/* —————————
hack for IE if
————————— */
<!–[if IE7]>
<link rel="styleshsst" type="text/css" href="css/for_ie7.css">
<![endif]–>

<!–[if IE 6]>
<script src="common/js/DD_belatedPNG.js"></script>
<script>DD_belatedPNG.fix(‘.png_bg’);</script>
<![endif]–>

/* —————————
hack for Firefox-Safari-Opera
html[xmlns] p {…}
————————— */

/* —————————
hack for Safari
————————— */
html[xmlns*=""] body:last-child p { color:#FF0000; }

/* —————————
hack for Mac IE5
————————— */
Mac IE 5のみにスタイルを適用
/* これ以降Mac IE 5のみに適用される \*//*/
p { color:#FF0000; }
/* これ以降Mac IE 5以外にも適用される */

Mac IE 5のみスタイルを除外
/* これ以降Mac IE 5には適用されない \*/
p { color:#FF0000; }
/* これ以降Mac IE 5にも適用される */
[/css]
※一部ごちゃっとしてるけど。

コメントする

必須 が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。
※コメントは即時反映されない場合があります。

page top