CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 - ICS MEDIA

2016/08/22 945 users Flexbox ICS MEDIA CSSレイアウト CSS

ICS MEDIA Web制作 2016/08/22 CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 « Prev ボックス要素の横並びをCSSで行う場合、これまでは float プロパティを使うのが主流でした。しかし、 CSS3の新機能「Flexbox」を使うと float よりも簡潔なコードで、ボックスの豊富なレイアウトが可能です 。本記事では... 続きを読む

保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた

2015/02/04 523 users アニメーション CSS3 table-cell 保存版 横幅

この擬似クラスを使うことにより3番目のli要素にわざわざ別のクラスを付けなくても独自のスタイルを適応することができるので、運用性の向上が図れます。 ▼記事リンク Useful :nth-child Recipes | CSS-Tricks 要素を均等に横並び CSS3の「display:table-cell」は要素を均等に横並びにすることができます。「float」でも要素を横並びに出来ますが、横幅... 続きを読む

floatを解除する手法のclearfix と 次世代のレイアウトの話｜Web Design KOJIKA17

2013/06/20 898 users clearfix floatプロパティ CSS レイアウト

2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行うには、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが... 続きを読む

floatを解除する方法のまとめ: 小粋空間

2013/03/27 678 users 小粋空間 After CSS 擬似要素 まとめ

CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高... 続きを読む

float解除の決定版。clearfixを考えたら、進化した。 : Web Design KOJIKA17

2011/04/05 953 users clearfix clear CSS 理論 ソース

現在floatを解除する方法として、"clearfix"がよく使用されていると思います。 しかしclearfixが初めて公開されたのが、2004年5月8日。 それ以来、7年間ほとんど形を変えずにclearfixが使用されてきました。 ブラウザもCSS3を多く対応してきている中で、「それで良いのか？」という疑問を新しい形を模索してみました。CSSの理論とかよくわからんので、ソースだけ見る。clear... 続きを読む

[CSS]overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス

2011/03/10 712 users overflow Demo コリス フロート ラッパー

下記は各ポイントを意訳してものです。はじめにDemo 1: overflow:auto;Demo 2: overflow:hidden;overflowを使って生じる問題点と解決方法はじめにフロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。デモ：１ フロートをクリアする要素を配置して解消した例しかし、この問題を... 続きを読む

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌

2009/12/09 629 users jQuery Masonry phpspot開発日誌

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以... 続きを読む

フロートとネガティブマージンまとめ:CSS | Tech de Go

2007/05/20 649 users フロート CSS 挙動 Tech de Go HTML構造

tableレイアウトをやってた人も計算してからコーディングしてたと思います。CSSのfloatを使用したレイアウトにしても、floatの挙動を正確に覚えれば、緻密な構成が可能になります。以下は私が覚えたときのフロートレイアウトの考え方のまとめです。 A.フロートの基本（フロートしたボックスとしないボックスの関係） 良くあるHTML構造でフロートしてみます。div#wrapperの中のp#conte... 続きを読む

CSSによる段組（マルチカラム）レイアウト講座

2006/03/16 1583 users ブラウ position カラム マルチカラム 根拠

このサイトについて テーブルを使わず、CSS で段組レイアウトを実現する方法を、CSS2 の仕様を根拠に、ブラウザのバグ対策を交えながら解説します。 CSS で段組レイアウトをするには float か position を使うのが一般的です。 テーブルレイアウトとは異なり、HTML はそのままで、CSS を変更するだけで左右のカラム（段）を入れ替えられます。 基礎編では float の仕様とブラウ... 続きを読む

スタイルシートによる崩れない　2カラム　3カラム・レイアウト

2005/09/21 872 users レイアウト 3カラム 2カラム スタイルシート モジラ

ネットサーフィンをしていると、floatを使って段組しいていて、レイアウトが崩れているサイトを時々見かけます。 ほとんどの場合が、左のみwidthを指定しているが、右に指定していない場合です。これはWINのIEでのみ段組されて表示されますが、モジラ等では、右部分は下に回りこんで表示されます。　ということで、ここでは上下にヘッダーとフッターを置いたサンプルを使いながら、メイン表示部分を左右2段にスタ... 続きを読む

スタイルシートによる崩れない　2カラム　3カラム・レイアウト

2005/09/18 1365 users レイアウト 3カラム 2カラム スタイルシート モジラ

ネットサーフィンをしていると、floatを使って段組しいていて、レイアウトが崩れているサイトを時々見かけます。 ほとんどの場合が、左のみwidthを指定しているが、右に指定していない場合です。これはWINのIEでのみ段組されて表示されますが、モジラ等では、右部分は下に回りこんで表示されます。　ということで、ここでは上下にヘッダーとフッターを置いたサンプルを使いながら、メイン表示部分を左右2段にスタ... 続きを読む

ADP: floatレイアウトでつまづかないためのTips

2005/03/15 509 users Tips CSS 改訂 レイアウト ソース

ADP: floatレイアウトでつまづかないためのTips 2004年07月09日 01:14 | コメント(12) | トラックバック(2) IE7対応もかねて改訂（2006年9月12日）。 CSSのfloatを使ってよくあるレイアウトを実現する。出来上がりサンプル参照。ソースはサンプルファイル本体を参照してくだされ。 floatを使ってレイアウトに挑戦といっても、実際やろうとするといろんなとこ... 続きを読む