;

しんみゆ.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;
}

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

アコーディオンメニュー:高さ自動調整と、初期表示タブの指定

アコーディオンメニューのカスタマイズをしてみた。

【表示例】

</body>の直前に記述する、

<script type=”text/javascript” language=”JavaScript”>// <![CDATA[
var Accordion1 = new Spry.Widget.Accordion(“Accordion1”, { useFixedPanelHeights:false, defaultPanel:1});
// ]]></script>

useFixedPanelHeights:false,
で、内容の容量で高さが調整され、

defaultPanel:1
で、2個目のタブが開いたままになる

という指示を出している。

defaultPanel:0 は,1個目のタブ
defaultPanel:1 は、2個目のタブ
defaultPanel:2 は、3個目のタブ

という具合です。

 
コード記述例↓

「アコーディオンメニュー:高さ自動調整と、初期表示タブの指定」の続きを読む・・

cssメモ:画像の下に空白ができる

画像を指定したとき、画像の下に空白ができた!

タグ変えたり、
img{
margin: 0px;
padding: 0px;
}
とかしたけどダメ。

どうやら、
hタグやtableタグ内にimgタグを入れたりしたときなど。これはブラウザのバグではなくて、CSSの仕様のせいらしいです。

cssに、下記を記述。

img {
vertical-align:bottom
}

で、バッチリ直りました!

仕事メモ:mapのロールオーバー

<script type=”text/javascript”>
<!–
function changeMapImage1(url) {
document.getElementById(‘map1’).src = url;
}
function changeMapImage2(url) {
document.getElementById(‘map2’).src = url;
}

//–>
</script>
<div>
<img src=”sample_01.jpg” alt=”” width=”650″ height=”149″ border=”0″ usemap=”#Map3″ id=”map1″>
<map name=”Map3″>
<area shape=”rect” coords=”26,105,167,131″ href=”#start” onmouseover=”changeMapImage1(‘sample_01_02.jpg’)” onmouseout=”changeMapImage1(‘sample_01.jpg’)”>
</map>
</div>
<div>
<img src=”sample_02.jpg” alt=”” width=”650″ height=”149″ border=”0″ usemap=”#Map4″ id=”map2″>
<map name=”Map4″>
<area shape=”rect” coords=”26,105,167,131″ href=”#start” onmouseover=”changeMapImage2(‘sample_02_02.jpg’)” onmouseout=”changeMapImage2(‘sample_02.jpg’)”>
</map>
</div>

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の指定です。

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

cssメモ:ボタンを画像に。

type=”image”だとURLの後に座標の値がくっつく。

<form> <input type=”image” alt=”Sample” width=”100″ height=”30″ src=”http://www.webbibo.com/assets/images/tips/image_btn.png” /> </form>

 

CSSで解決

<form>
    <input type="submit" value="" id="image-btn" />
</form>
#image-btn {
    border: 0px;
    width: 100px;
    height: 30px;
    background: url(image_btn.png) left top no-repeat;
}

IE6で、画像のheightがのびる!

img {
max-width: 100%;
height: auto;
}

こちらのcssが原因の様子。

もしもの時は
IE6だけ、別のcssで書き込むなどの対応で乗り切るという事で。

ハックは

body {
color: red; /* all browsers, of course */
color: green¥9; /* IE8 and below */
*color: yellow; /* IE7 and below */
_color: orange; /* IE6 */
}
body:not(:target) {
color: black¥9; /* IE9 */
}

•IE6:値の先頭にアンダースコア「_」を付与
•IE7:値の先頭にアスタリスク「*」を付与
•IE8:値の末尾に「¥9」を付与
•IE9:セレクタの末尾に「:not(:target)」を付与+値の末尾に「¥9」を付与

というおぼえがきとセットでメモ。

ページトップ