;

しんみゆ.com

群馬県高崎市在住の夫婦で日記というか、つぶやきブログしてます:しんみゆ.com

メモ:右下に影を付けたい IEハック

divで高さを揃えるcss:cssメモ

◆Display: tableを使用してCSSのみで行う方法

横並びにするブロック要素のマージンボトムにパディングのプラス値と同じ値を、パディングボトムにマージンのマイナス値と同じ値を指定

【html】
<!– ボーダーなし –>
<p>
ボーダーなし
</p>
<div class="box_area clearfix">
<div class="box01">
<p>
テキスト
</p>
</div>
<div class="box02">
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
<div class="box03">
<p>
テキスト
</p>
</div>
</div>
<!– /ボーダーなし –>

【css】
<!–more–>
p {
margin: 0; /* 余分なマージンを消去 */
padding: 0; /* 余分なパディングを消去 */
}

div.box_area {
margin: 0 0 40px;
}

div.box_area div {
float: left;
width: 200px;
margin: 0 40px -32767px 0; /* プラス値と同じ値を指定 */
padding: 0 0 32767px; /* マイナス値と同じ値を指定 */
}

div.box_area div.box01 {
background: #EFEFEF;
}

div.box_area div.box02 {
background: #999;
}

div.box_area div.box03 {
background: #CCC;
}

div.box_area div.border {
width: 198px;
border: 1px solid #333;
}

div.box_area div p {
padding: 10px;
}

/* クリアフィックス */
.clearfix:after {
content: "";
display: block;
clear: both;
}

.clearfix {
overflow: hidden;
zoom: 1;
}

参照サイト:高さを揃える

◆どのブラウザでも対応可能な設定方法

【html】
<div class="rightback">
<div class="contentback">
<div class="leftback">
<div class="leftsidebar">…Lots Of Content…</div>
<div class="content"> …Lots Of Content…</div>
<div class="rightsidebar"> …Lots Of Content…</div>
</div>
</div>
</div>

【css】
.rightback {
width: 100%;
float:left;
background-color: green;
overflow:hidden;
position:relative;
}
.contentback {
float:left;
background-color:blue;
width: 100%;
position:relative;
right: 300px; /* width of right sidebar */
}
.leftback {
width: 100%;
position:relative;
right: 400px; /* width of the content area */
float:left;
background-color: #f00;
}

.container {
width: 900px;
margin-left: auto;
margin-right:auto;
}

.leftsidebar {
float:left;
width: 200px;
overflow:hidden;
position:relative;
left: 700px;
}

.content {
float:left;
width: 400px;
overflow:hidden;
position:relative;
left: 700px;
}

.rightsidebar {
float:left;
overflow:hidden;
width: 300px;
background-color:#333;
position:relative;
left: 700px;
}

参照サイト:個別の背景色を使う方法

css3 角丸にする

角丸にするメモ

【全部を角丸にする場合:5pxで指定】
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

【右上を10pxの角丸にして、その他は5pxで指定】
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius: 5px;
-moz-border-radius-topright: 10px;
border-radius: 5px;
border-top-right-radius: 10px;

【全部違う数字で指定】
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 1px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 1px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 7px;
border-top-left-radius: 5px;
border-top-right-radius: 1px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 7px;

簡単に調べる方法は、こちらのサイトで
CSS Border Radius Generator

tableをcssでシマシマに。

css3でテーブルのカラムをシマシマに。

本日の作業でやったのでメモ。

横のしましま
縦のしましま

を再現しました。

元ネタ:[CSS3小ネタ]CSS3でシマシマの表をつくる – :nth-child
【横のシマシマヴィジュアル】

にゃー にゃーにゃー にゃーにゃーにゃー にゃーにゃーにゃーにゃー
★★★プレミアム 1件迄 1週間 10,000
★★最上位 1件迄 1週間 4,000
★上位 1件迄 1週間 2,000

「tableをcssでシマシマに。」の続きを読む・・

IE9のみ発生:PIE.htcを利用したサイトで、背景が出なくなりました

IEをCSS3対応にしたい場合に使われる『PIE.htc』。
IE9だけ、background-imageでcssを指定したけども。
背景がでないという事例が出ました。
調べてもらったら、PIE.htcのアップデートがちょっと前にあったそうで、
もしかしたら。。
と、PIE.htcを新しいのに入れ替えたらバッチリでるようになりました!

先日から携わってくれたインフラの方に報告したら
『IE9ってもともとCSS3に対応してると思うんですけど、
8はそれを使ってCSS3に対応するような感じらしいのに、
8では動いていて9で逆にそれが最新じゃないと動作不良っていうのも変な話ですね・・・』
と、返答がかえってきました。

なるほど。。
ミステリー・・・

それと同時に、プリントの設定。
プリント専用のcssを用意し

#g_map {
color: #fff;
display: list-item;
list-style-image: url(images/g_mapimg.jpg);
list-style-position: inside;
letter-spacing: -1000em;
font-size: 1pt;
}

これも、IEでbackground-imageでcssを指定した場合の対応で記述で
プリントでも出すというcssの指定です。

うまい事、対応させる方法を思いつくものですね。
ありがたい情報だったので、掲載しました。

プロがやるとCSS3は、こうもすげえ!

検索中に、おそばせながら、凄いのを見つけたのでメモ。

みなさんの書き込み数。半端ねー。。

見つけるね~

探すね~

web系の仕事について、1年半。

まだまだまだまだ・・・未知の世界がいっぱいだあ。

http://shopdd.blog51.fc2.com/blog-entry-932.html

トラックバック : http://shopdd.blog51.fc2.com/tb.php/932-a4ee400a

ページトップ