[B! *css] uniqのブックマーク

CSSセレクタ20個のおさらい

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

uniq 2011/08/22

css3
*css

リンク

display:inline-block; を使う | css | understandard.net

要素の横並びに float:left; ではなく display:inline-block; を使うためのメモ。元ネタは、CSS display: inline-block: why it rocks, and why it sucks ※ 2011年4月12日追記: 暫定版ですが、新しい方法を書きました。display: inline-block を使う（修正版） float:left; で横並びにしようとしたとき、各要素の高さが違うとこのようになってしまいます。カッコ悪いですよね…。というよりデザイン通りになっていません。 display:inline-block; を使うと、このようになります。素晴らしい！エクセレント！ display:inline-block; には、text-align および vertical-align が指定できるので、今まで面倒だったレイアウトが

uniq 2011/01/24

要素の横並びにfloat:left; ではなくdisplay:inline-block; を使うためのメモ。display: inline-block; /display:inline; /zoom:1;

*css

リンク

第美四次图第黄次四第次图第:找不到页第美四次图第黄次四第次图第面 | RDA.辉盛

Qingdao & Zibo Address : 山东淄」博高新区柳泉路创业火炬广场(居然之家)F座807 Phone : 0533.311.8581 Em ail : 3118581@163.com QQ : 460253295 (9am-18pm) Website : www.rdateam.com Wechat : RDA辉盛设计 Milan, Italy Paolo Cesaretti Architetto. Address: Milano, Via Settembrini 45 I-20124 Phone：+39.02.8718.9435 Em ail: contact@paolocesaretti.it Website: www.paolocesaretti.it Melbourne, Australia Michael Mackenzie Consultant. Address:

uniq 2010/02/18

リンク

IEでアルファチャンネルPNGを表示する（iepngfix.htc） - youmos

uniq 2009/10/28

*css
png

リンク

IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン　BLOG

CSS設定でオブジェクトを半透明にできるプロパティがあります。 IEのみのCSSプロパティでしたが、Firefox・Operaでも同じように表示可能にできる方法を説明したサイトがありましたので紹介しておきます。他にもいくつかのOpacityプロパティを使ったTipsが紹介されていますので、参考に覗いてみてください。 CSS Opacity in Mozilla,IE, and Opera http://www.mandarindesign.com/opacity.html CSS Opacity設定以下のコードでIE・Firefox・Opera・Netscape・Safariで同等表示がえられます。 filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; IE alpha(opacity=透明度); 100が100％とな

uniq 2009/10/18

*css
firefox

リンク

リスト全体の余白を調整する

margin の値には auto（自動）を指定することもできます。マージンとパディングの指定については、以下のページをご覧ください。ボックスのマージン（外側の余白）を指定するボックスのパディング（内側の余白）を指定するデフォルトの余白を取り除く方法一般的なブラウザでは、リストの周囲に適度な余白が設定されています。この余白を取り除きたい場合は、ul要素（またはol要素）に対して次のスタイルを設定します。 ul { margin: 0 0 0 1em; padding: 0; } 左マージンは、少なくともリストマーカー1つ分以上の大きさが必要です。（以下は1つの目安です） ul要素に設定する場合 … 1em 程度 ol要素に設定する場合 … 1.5em ～ 2em 程度マージンとパディングを 0 にして、左マージンにだけ上記の値を設定する、といった感じになります。余白の比較 u

uniq 2009/10/16

*css

リンク

もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife

class名やid名って付ける時悩みませんか？今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。これで、チョットだけ作業効率アップ！？ 2010年6月10日追記：この記事自体、2007年 1月15日に書かれてるんでかなり古いです。あくまでも参考程度に留めてもらうのが良いかと思います。今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

uniq 2009/04/17

リンク

[CSS]サムネイル画像を表示するドロップダウン型ナビゲーション

タブ形式のドロップダウンの子要素にサムネイル画像を表示するナビゲーションのスタイルシートをCSSplayから紹介します。

uniq 2009/02/10

リンク

フッターの背景をコンテンツが少ない時でも下まで表示させる

デジパのベトナムオフィシャルサイトがオープンしました。さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。 Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は当然上に来てしまい、下がbodyに指定している背景色になってしまいます。キャプチャみたいな感じです。コレがイヤでフッターをページ下部に固定する方法とかを使う事もあるかと思いますが、アレはアレでコンテンツ部分が間延びしてしまう感じも無きにしも非ずだったりします。と、言うか個人的には1サイトに1ページ有るか無いかも分からないような部分に労力を割きたくないのが正直なトコロなので、出来れば見逃して欲しい部分だったりします。 htmlとbody要素にheight: 100%指定して...みたいなの

uniq 2008/07/02