覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
ブロックレベル要素をセンタリングする方法 一昔まえはcenter要素やdiv要素にalign属性を付けてセンタリングするという手法が当たり前でした。 しかし、最近では見た目はHTMLではなく、CSSで指定するべきである、と言われだし、 現にcenter要素はHTML4.01 Strictや、最新のXHTMLでは使用できません(HTML4.01的には非推奨)。 そこでCSSによる正しいセンタリングの仕方をここで解説します。 正しいセンタリング方法 テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。 Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロッ
javascript - Tabifier : 404 Blog Not Found
2006年03月02日14:24 カテゴリLightweight Languages javascript - Tabifier というわけで、こんなの作りました。 CSS と JavaScript でタブ切り替え もっとシンプルにできそうなアイディアがございましたらご教示下さい。 誰でも簡単に CSS + Javascript でタブ切り替えを作れます。CSSの知識もJavaScriptの知識も不要です! 基本編 以下をコピペします。 <script type="text/javascript" src="http://blog.livedoor.jp/dankogai/js/tabifier.js"></script> <div id="tabheader"></div><div id="tabbody"></div> <div class="tab" title="Title 1">
CSS と JavaScript でタブ切り替え
CSS と JavaScript でタブ切り替えを実現しています。 なるべく CSS や JS の記述量を最小にするように努力しました。 もっとシンプルにできそうなアイディアがございましたらご教示下さい。 「無償・無保証・著作権放棄」 ですので、 このページのソースを適当にいじって自由に使って下さい。 全てのタブの中味は 1 つの HTML ファイル (このファイル) に書いてあります。 見出しのクリックにより、表示の ON/OFF を切り替えるだけ、という仕組みです。 タブの見出しをクリックするたびにサーバーを読みに行くのが 欝陶しく思えるときに、うってつけかと。 そう言えば、某サイトでは、クリックどころか、 タブの見出しにマウスカーソルを合わせるだけで、 フォーカスされていることを表す見出しの画像 (背景色が異なるだけ) を いちいち Web サーバーへ取りに
ウェブブラウザなんかに気を遣わなくてもいい理由 (agenda)
いつの間にか2009年になってしまった。 IE6に気を使わなくてもいい理由とか「そういう系」 の話を聞くと、なんで非営利個人サイトが自分の嫌いなウェブブラウザなんかに一々気を遣わなきゃならないんだとか思う。もちろん気を遣うのには色々理由があるだろう。だが「気を遣わなくてもいい理由」というのもあっていいんじゃないか。そう思ってだらだらと悪文を書いてみた。本当に悪文だからまとまりはないよ。 相手にしていられないほど膨大な種類の「ウェブブラウザ」 この文脈においてはウェブブラウザではなく、所謂レイアウトエンジンやHTMLパーサの種類を把握すべきだろう。たとえばSleipnirもfubも、同じMSHTML.dllを利用しているなら一つとしてカウントできる。 ウェブページのレイアウトエンジン レイアウトエンジン等の名称主なバージョン（2009年1月現在）応用しているプロダクト他
CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU
DiaryTechnology CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 ちょっと実装したくなったので、CSSでDivを天地左右中央に配置してみました。 Web creatorsに載っていた方法ですw。 » Web creators (ウェブクリエイターズ) 2007年 03月号 ■CSSは↓。 <style type="text/css"> body { background:#ccc; margin:0; padding:0; } #wrap { position:absolute; width:500px; height:100px; left:50%; top:50%; margin-left:-250px; margin-top:-50px; background:#ff
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]上級者向け、スタイルシートのテクニック集