忍者ブログ

suzrinブログ

HTML,CSS,Javascript,Nikon D5000での撮影記録あとPCパーツ大人のゲームなどなど
<< 前のページ HOME 次のページ >>

[PR]

×

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

ブロック要素内でテキストを縦中央に配置する方法

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

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

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

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

HTMLとCSSコーディング中

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

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



爆発しろヽ(`Д´)ノ

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

ブラウザシェア

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

Frefox3.6リリース

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

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

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(笑)は効いちゃうからそれを存分に利用しよう
という話

しましまばんざい

めも

<!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>
カレンダー
09 2017/10 11
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
ブログ内検索
ツイッター
フリーエリア
18歳未満には不適切な内容がある場合が有ります閲覧にはご注意ください。 詳しくはりーどみーをご覧くださいお願いします
blogに関する連絡はこちらまで"suzrinあっとまーくmail.goo.ne.jp"
最新コメント
[06/24 kz]
[10/16 haru]
[10/12 haru]
[06/08 nshi]
[11/15 まつかわ]
最新トラックバック
カウンター
クロシェットさんの新作プリズムリコレクションからアイナちゃん!
【プリズム◇リコレクション!】情報ページ公開中!
ストレガさんの新作木洩れ陽のノスタルジーカのフロゥちゃん\(>ヮ<)/
『木洩れ陽のノスタルジーカ』応援中です!
はいぺりよんさんのシストリのるなちー
シストリ抱き枕注文受付中!
フェイバリットさんの新作色とりどりのひかり!
いろとりどりのヒカリ 応援中!!
Chuableさんの新作アステリズム 応援CHU
姉さんに恋をして、姉さんも恋をして、姉さんと恋をした。 アステリズム 応援中!
AXLさんの新作から月海ちゃん応援中!
AXL新作第8弾 2012年春発売予定!
Meteorさんの新作Princess-Styleから一宮菖蒲ちゃん応援中!
『Princess-Style』応援中です
YUZU SOFTさんの新作とSAGAPLANETSさんの新作応援中!
はつドラ合同バナーキャンペーン開催中
loseさんの新作『ものべの』応援中!
ものべの - 夏葉
Favoritさんの新作いろとりどりのセカイ
いろとりどりのセカイ 応援中!!
<< 前のページ HOME 次のページ >>
忍者ブログ [PR]