marginの相殺
CSSにおけるmarginプロパティはボックスに対して余白部分を生成するというシンプルなものなのですが、『marginの相殺』という特徴があります。
marginの相殺について解説をしてみます。
Firefox3でメイリオを指定するとinputのsizeが倍増する
Firefox3のデフォルトのフォントをメイリオに変更すると検索窓がグニョーンと伸びるよと教えていただきました。
CSSのレイアウトテクニック - Faux Absolute Positioning
久々にCSSでの面白いテクニックですね。
re:マルチシートアプローチとかクラス名とか
いろいろな人の意見が出てきて面白いところですので、私の意見も書いておきたいと思います。
Slice Imageでサイトを高速化
ネタ元:CSS Spritesでサイトを高速化&CSS Sprites化と画像減色でサイトを高速化
ナローバンド時代にサイトの表示を高速化する為に利用された古典的手法「Slice Image」と、ネタ元のCSS SpritesやSlice Imageで、なぜサイトの高速化が可能かを解説したいと思います。
CSS で簡単にメニューの上下中央揃えを実現する
IEでzoom:1とdisplay:inline;を同時に指定するとdisplay:inline-block;と同等の挙動を行うようです。
javascriptなしで背景が透けるカラムを実装するスタイルシート
このやり方も素敵なんですが、JavaScriptなしで余計なdiv要素を追加せずに再現できる方法を紹介します。
テキストスタイルをジェネレートできる CSS Type Set
CSS Type Setはテキストのスタイルをジェネレートできるサイトです。
商品画像掲載のページ構成CSS
なかなか語られることのない、Web制作の問題点が議論されています。
高さの異なるカラムをそろえるスタイルシート
高さの異なるカラムをそろえるのがはやっているようですので、色々考察。
CSS最適化ツールの『CSS Optimizer』を公開
『CSS TIPS』でCSS最適化ツールの『CSS Optimizer』を公開しました。
input要素などにおけるIEのバグ
ちょっと、はまったのでメモ書き
CSSをデバッグするツール色々
Web標準の日々のグループディスカッションでCSSの編集を直感的(?)にできるライブラリの案が出てたのですが、世の中すばらしいツールがいっぱいあるので、今回はそんなツールを紹介します。
CSSでロールオーバーもどき
ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。
CSSで実現するスマートなロールオーバー
暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。
長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。
CSS が valid でなければいけない理由
Lucky bag::blogさんが難しい、お題を投げかけている。
operaでのfloatの挙動
TPLHさんでOperaでfloat要素の後続が回り込まないとのエントリーを見て、気になったことをボクもエントリーしておこう。
BIR-もうひとつの画像置換
画像置換が普及し出した頃、一瞬だけ話題になって消えていったテクニックがあります。
それがBIR (Bob Image Replacement)とういうテクニックです。
画像置換に関する考え方
WEB標準からみるに最近では、画像置換に関して、『alt属性が必要な画像はimg要素で記述』『alt属性必要でない画像は画像置換を使う』という考えが主流になりつつあるようです。
画像置換でメニューを作る
前回の画像置換で説明した通り、画像置換を使えばロールオーバーの実装を(javascriptを知らない)デザイナーでも簡単に実装することが可能になります。
画像置換
個人的な意見ですが、ボクは画像置換が大好きです。
画像置換とは、html上に記述されているテキストを画面外に表示して背景のみを表示する技術の事で、CSSでデザインを行う際にとても重宝する技術になります。
透過PNGの罠の解決法
AUSGANG SOFTさんが透過PNGの罠としてAlphaImageLoaderフィルターの問題点を指摘されています。
CSS Nite in Osaka 2007 春の陣
あのCSS Niteが大阪に再びやってきます。
ので、やっぱり、とあるWEBクリエイターのblogはCSS Nite in Osakaを応援します。
ボクにとってのCSSの利点
CSS HappyLifeさんでボクにとってのCSSの利点という素敵なエントリーを発見。
すてきな文章だったので思わずファンになってしまいました。なんか和む感じがいいです。
CSS Nite in OSAKA Dreamweaverの作業効率を高める小技30発 by 鷹野雅弘
CSS Nite公式blogのほうで2006年11月25日に開催されたCSS Nite in OSAKAの資料の方が公開されました。
資料といっても『プレゼン資料』＋『プレゼン内容の音声データ』なので、セッションの中身がすべて堪能できる一式になっています。
興味のある方はぜひ見に行ってください。
tableの膨張を防ぐ【css tips】
table要素の中に、半角スペースなどの区切り文字が存在しない英数字を入れると、td要素やth要素に設定しているwidthプロパティの長さ以上に、tableが膨張されてしまいます。
画面の下部にフッターを表示する
動的サイトで画面の下部にフッターを表示する事は非常に困難です。
さまざまなパターンを想定してフッターを設定することになります。
CSSで中央表示を実装する【css tips】
ブロックレベル要素の中央表示（センタリング）を行う際に、text-alignプロパティにcenterを指定して実装するのは間違いである。
なぜならtext-alignプロパティは、インライン要素の位置揃えを指定するためのものだからです。
CSSで垂直中央を実装する【css tips】
vertical-alignの使い方の続きです。
vertical-align:middleでの垂直表示は説明しましたが、あの方法ですと2行以上の場合は利用できないです。
2行以上の場合に垂直中央表示をするにはpositionプロパティを利用します。
vertical-alignの使い方【css tips】
vertical-alignは正しく理解していないと使いにくいプロパティである。
特にtableレイアウトからcssレイアウトに移行する際に混乱が発生しがちだ。
テーブルレイアウトでよく使う以下のようなコードがある。
floatした際に背景が消える件(IE編)
floatした際に背景が消える件でIEには『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグがあると説明しました。
逆を言えば、親要素に幅や高さを指定しなければFirefoxと同じ表示になります。
floatした際に背景が消える件【css tip】
親ボックスに背景を適応して、内包する子ボックスに対してfloatを適応した場合、IEでは子ボックスを内包する形で背景が表示されるのに対して、Firefoxでは親ボックスの背景が表示されなくなります。
1カラムフィックスレイアウト【css tips】
もっとも単純なレイアウトになります。
ページをレイアウトする。【css tips】
ウェブページのレイアウトはあまりバリエーションはなく大きく別けると3つに分類できます。
1カラムレイアウト、2カラムレイアウト、３カラムレイアウトと呼ばれるレイアウトで、それぞれ、カラムつまり列の数が異なる。(コラムと発言する方も多いです)
スタイルを初期化する【css tips】
CSSでデザインしていく際に、ブラウザによりデフォルトのスタイルが異なる為困ることがあります。
有名なものではbody要素が持つデフォルトの余白を、FireFoxやIEはmargin属性で再現しているのに対して、Operaはpadding属性で再現しています。
CSS Nite in OSAKA ザ・ルールズ・オブ・スタイルシート by 益子貴寛
ついにCSS Nite が大阪に上陸しちゃいました。
以下のような内容でした。
CSS Nite in OSAKA
2006年11月25日（土曜日）あのCSS Nite がついに大阪に上陸します。
なので『とあるWEBクリエイターのblog』では大々的に宣伝します。
やっぱ東京ばっかじゃなくて大阪でもガンガンやってほしいですね。
height100%のボックスを作成する。
xhtmlにおいてblock要素のheightプロパティに対して%で値を指定した場合反映されません。
IEとそれ以外のブラウザでアルファ画像を使う方法
pngのアルファ画像をIE6とその他のモダンブラウザでアルファの画像を表示する方法
単一の要素に複数のclassを設定する方法
cssでは１つの要素に対して半角スペース区切りで複数のクラスを割り当てることができます。
使いどころが難しいのがたまに傷
cssで画像をプリロードする方法（改
以前このblogで取り上げたcssのみで画像をプリロードする方法ですが、実は画像のプリロードが全くできてませんでした(汗
IE7用のCSSハック
Lucky bag::blogさんでIE7用のCSSハックのまとめを発見しました。
positionプロパティの考察
CSSの中でpositionプロパティは他のプロパティより異質です。
ですのでちゃんと意味を理解しないと使い方がまったく解りません。
cssでページの右上に広告を表示する。
当WEBサイト(旧サイトwebサイト+phpリファレンスの事です)右上に挿入している広告ですが
ブログのタグを複雑に変更して挿入しているものじゃありません。
cssのみで画像をプリロードする方法
PHPSPOTさんの記事を見て思いつきました。
CSSで無理やりfloatをclearする方法
MozillaやFirefoxで
『親ボックスに背景画像や背景色を指定して
子ボックスでfloatが行われている場合
親ボックスの背景画像や背景色は
floatが行われない子ボックスまでにしか反映されない』
という挙動があります。
リンクをクリックした際に表示される点線を消す方法
リンクをクリックした際に表示される点線を消す方法です
フォントサイズはどうしましょう？
この業界で昔から議論される内容で、
『フォントの絶対指定にするか？相対指定にするか？』
というものがある。
MacIE用のHolly hack
width:500px;//MacIEに対するcss
/*\*/
width:501px;//MacIE以外のブラウザに対するcss
/**/
formタグの余分な改行を取り除く
formタグを使うと上部に余分な改行が入ります。
cssを使うことによりこの改行を取り除くことができますよ
<form style="margin: 0px;">
よく間違えてborder属性を弄ろうとしてしまいます
フォームへの入力を操作する
フォームを作成する際に文字の制限ってどうしてます？
私はjavascriptとphpで確実に制限しているのですが、
ちょっとすばらしい方法を知ったので披露しときます。
cssを使って半角しか入力させない方法です。
【ソース】
■通常<br>
<input type="text"><br>
■CSS使用<br>
<input type="text" style="ime-mode:disabled">
【ブラウザ】
■通常
■CSS使用
IEでしか動作しなかったりと結構使いどころが難しいです。
phpやcgiなどのサーバーサイドでの処理を忘れずに。。
カテゴリー「css」のRSSを購読する
西畑一馬(
