suzrinブログ

HTML,CSS,Javascript,Nikon D5000での撮影記録あとPCパーツ大人のゲームなどなど

<< 前のページ HOME 次のページ >>

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/04/25 (Thu)

どっかで読んだの忘れないうちにメモ
上手く動くかどうかは未確認

a {
display : block ;
}
とかしたときに、縦方向中央にそろえたいことがあるはず！

見もふたもない話
display : table-cell;
vertical:align;
を使う
IEに対応させるために
display : inline-block
zoom:1;
で上手くいくらしい

overflowかけられなくなるのが弱点なのですね

2010/02/19 (Fri) HTML Trackback() Comment(0)

HTMLとCSSコーディング中

http://mmm.namidaame.com/
頑張ってコーディング中これからはちょこちょこ更新したいな・・・

画面のデザインが悪いって？
あー、うんなんだ

爆発しろヽ（`Д´）ﾉ

2010/02/15 (Mon) HTML Trackback() Comment(0)

Pushpin HeaderというCSSテクニック

ピンでテーブルヘッダーを止めたように固定してボディ部分だけをスクロールするテクニックの一つなんですがこれは凄い。
<div id="a">
<div id="b">
<table>
<thead></thead>
<tbody></tbody>
</table>
</div>
</div>
で、#aに[padding-top]でスペースを作ってそこに[thead]を[position:absolute:]で放り込むという原理なんですが、テーブル内にややこしい設定とか余分なhtml書かなくて良いのが非常にクール

で、最小構成でcss書いたのを表示したらやっぱりIEで崩れる
ウワァァァァンヽ（`Д´）ﾉ

cssハックが必須なのが弱点ですね・・・・

http://codylindley.com/blogstuff/css/pushpin/pushpin.html

2010/02/04 (Thu) HTML Trackback() Comment(0)

ブラウザシェア

一月の統計が各サイトで発表されてFirefoxがgoogle chromeにシェアを取られたっていう論調が各地で目立ちますが、
一応ソース元毎月見てるsuzrin的にはFirefoxのシェアに3.6が入っているようには見えない
だってotherとか凄く増えてるし・・・
あとここ忍者ブログの解析結果も公表されているんですが、日本国内のIE6神話も過去の話ですね
本当にまだ確固たる理由無しに使ってる方には乗り換えをオススメしますセキュリティ面で。

2010/02/03 (Wed) HTML Trackback() Comment(0)

Frefox3.6リリース

β１→β２→RC1→RC2と相当バグフィックスされたようで
スケジュールも押し押しで結構難産だったようですが
無事Firefox3.6正式版がリリースされましたね～
D&DのAPIにかんしては悪い評判もあるようですが
Personaが標準機能に統合されたのはうれしいですね

あとはプラグインチェッカーがもうちょっと実用的になるといいなぁ

2010/01/23 (Sat) HTML Trackback() Comment(0)

HTMLのTABLEを縦に縞々（縦縞でCSSハック使わない編）

縞々は好きですか？
ジークしましま！

自分用メモ！
tableの列を縞々・文字寄せ・ボールドかけしたいときー

td:nth-child(even) {
background : #fff0f0 ;
}

td:nth-child(odd) {
background : #ffffff ;
}

等でIE以外のCSS3対応ブラウザはピンクの縞々

IE6とIE7はcolのバグを使って
<coL class="c01"><col class="c02><col class="c03">・・・
とhtmlに仕込んでおいて

.co1 td, .c03 td {
background : #fff0f0f0 ;
}

.col02 td, .col04 td {
background : #ffffff ;
}

でピンクの縞々

それ以外のIE8とかには
一列めはtd
ニ列めはtd+td
三列めはtd+td+td・・・

って隣接セレクタを使ってずらずら上書きしていけばOK

みそはcolに対してCSSを書いてもtdはcolの子孫要素じゃないのでbackground・widthとか
限定されたプロパティしか効かないのにIE(笑)は効いちゃうからそれを存分に利用しよう
という話

しましまばんざい

2009/11/24 (Tue) HTML Trackback() Comment(0)

めも

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style>
html,body {
margin : 0 ;
padding : 0 ;
height : 100% ;
}

#head {
background : #fff0f0 ;
height : 120px ;
position : relative ;
z-index : 999 ;
width : 97% ;
}

#box {
background : #fff0ff ;
height : 100% ;
margin-top : -120px ;
}

#menu {
padding-top : 120px ;
background : #f0fff0 ;
width : 200px ;
float : left ;
position : relative ;
z-index : 800 ;
}

#main {
margin-left : -200px ;
background : #f0f0ff ;
width : 100% ;
float : left ;
overflow : auto ;
height : 100% ;
}

#inner {
margin-top : 120px ;
margin-left : 200px ;
position : relative ;
z-index : 1 ;
}

</style>
</head>
<body>
<div id="head">
頭

</div>
<div id="box">
<div id="menu">
menu

</div>
<div id="main">
<div id="inner">
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>

</div>
</div>

</div>
</body>
</html>

2009/09/08 (Tue) HTML Trackback() Comment(0)

カレンダー

2024/04