中級講座】シリーズ第2弾は、CSSコーディングには必携の知識「clearfix」について。した場合、しっかりそれを解除しないと続く要素にも影響しちゃって、レイアウトが崩れてしまいます。そんな困った時に使われる「float状態を解除する方法」を通称して「clearfix(クリアフィックス)」と呼ぶのですが、実はいろいろな方法があります。実装前の状態まず最初に、clearfixを使う前の「レイアウト崩れてもうた」状態のマークアップをば。id="text">僕はどうなってしまうのでしょーか。追加する」って方法!具体的には下記のようにします。{background-color:#ccf;float:right;}HTMLは一切変えてないので省略しますが、このたった1行を追加したサンプルが下記。使い勝手がとても良いのですが、マークアップによっては使えないケースも。した要素の直後にあるモノには効かず、結果的に悲しい表示になります。id="text">僕はどうなってしまうのでしょーか。実装後」と同じCSSのまんまだと、こんな感じ。「こんな時、どういうコトしたらいいのか、分からないの。追加したサンプルページは下記。実装後こんな感じで「実装法その1」「実装法その2」を使い分ければ、:after擬似要素なんざ一切使わなくても、しっかりとしたCSSレイアウトが構築できます!明日は「CSS3のプレフィックスは今」を検証しちゃいます。中級講座】横並びにしたliタグで隙間が出来る問題のエレガントな対応策IE6の頻出CSSバグいろいろと、それに対処するハック術(恐らく)最も簡単な、対IE用CSSハック術docomo新機種の『iモードブラウザ2.0』の仕様をまとめてみました。第4引数に「文字列をまるめた後に付加する文字列を指定」する際、色々気を付けないと文字化けるよ、というお話。linksDropboxデバイスを選ばないオンラインストレージ。tenpu無広告のおしゃれなファイル転送サービス。ギガファイル便大容量ファイル(25GB)にも対応の転送サービス。aguse.jpURLからサーバやドメイン管理者などを取得。SimilarWeb競合サイト解析ツール。Fontsの全フォントを任意の文字で一覧化。Insightsサイトの読み込み時間と問題箇所をスコア化。LookupHTML特殊文字を類似文字から逆引き出来るサービス。Regexpreg_matchのマッチング結果を出力。Mail時間延長可能なワンタイムメールサービス。ご利用環境チェックツール自分のIP/HOST、OS、ブラウザ、解像度などを表示。Akinator頭に浮かべた人物を当てる超能力サービス。thisこのブログはウェブデザインやプログラミングなどをはじめ、web制作者向けの様々な技術や情報を掲載しています。現・フリーランスwebクリエイター。verb」として、フルスタックフリーランスやってます。