ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
Category ： CSS リファレンス今まで使ってコーディングが楽になったと思われるCSSテクニック（一部CSSではない部分もありますが...）などをまとめておきたいと思います。コーダーの方は知っている事が殆どだと思いますが、知らない人は直ぐにでも使える簡単な事も多いので是非使ってみて下さい。... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色ん... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
![[CSS]スタイルシートの記述をより読みやすくする5つのルール | コリス フィード](/thumbnail/347024.png)
5 Rules To Write More Readable CSS Files1. プロパティをアルファベット順に各エレメントのプロパティの記述順をアルファベット順にします。#nav{border: solid 1px #DEDEDE;color: #000;padding: 10px;widt... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
|
前回の「IE8で修正されたfloat関連のバグ その1」に続けて、IE8で修正されたfloat関連のバグを確認していきたい。なお、サンプルではIE8の互換表示ボタンを利用して、IE7とIE8のStandardsモード（標準準拠モード）で表示を比較していく。Standardsモードや互換表示ボタンに... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。IE6 で float を使ったレイアウトをしているとき、文章の末尾（最後の2文字くらい）が変なところに表示されるということがあります。 どう変かというと、末尾の文字をそのままコピーしてはみ出たよう... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。 さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfix... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
『 div.container{border:1pxsolid#000000;overflow:auto;width:100%} 』 [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
CSS による段組レイアウト文書構造を極力いじらずにレイアウトを変更できるようなフレームワーク。以下の各サンプルでは分かりやすいように head 要素内の style 要素でスタイルを指定、先頭で defaultReset.css と common.css をインポート。実際に使用する際には、st... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
ブログでよくある横幅固定、2カラムのレイアウトです。横幅は 700px として説明します。 ウインドウ幅が狭くなると横スクロールが出ますが、レイアウトは保持されます。 幅固定 2カラム 右サイドバー 手順 1. センタリング #container { width:700px; margin-lef... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
何だか間があいてしまいました、、、 ここ以外でのアウトプットが増えてたので、こっちに書くパワーが減っておりました。 さて、言い訳は良いとして、現在も日々コーディングな訳ですが、久々にはまったので同じ状況のを作ってみました。 タイトルだけでは意味がわからないと思ったんですが、どう書いたらよいのかさっ... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。１．「回り込み」とは例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。マークアップ<p><im... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
|
『 フロートについて詳しく書かれている 』 [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
翻訳に挑戦してみます。 CSS Float Theory: Things You Should Know | Smashing Magazine floatはCSSの中でも最も直感に反する存在である。floatは周辺の要素を動かしてしまう(floating)ので可読性やユーザビリティを損ない、誤解... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
どことなく良くありそうなリストのサンプルです。 ちょっと前にこんな感じのデザインのを組んだので、メモがてら色んなバージョンも作ってみました。 sample04辺りが良いかもしれないす。 サンプルページ ダウンロード ul要素のサンプル Sample 03まではul要素でやってみました。 XHTML... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
タイトルが長い… サイトやブログの価値を調べる10の指標とツール｜前向きストラテジー 10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか？ボクはしっかりバテてダレてます。あんまり仕事してま…（加藤さまに給与減らされるので自... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
|
『 段組｜画像置換｜メニューリスト｜丸角｜その他のテクニック｜クロスブラウザ・ブラウザハック 』 [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
『 定番リファレンスやサンプルコードなど。 』 [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
![[CSS]横並びのレイアウトをfloatで配置するTIPS -Floater | コリス フィード](/thumbnail/133936.png)
CSS Globeでは、下記の画像のような横並びのレイアウトを単純にfloatでレイアウトするのではなく、一工夫してレイアウトを行っています。Css Globe - FloaterFloaterで紹介されているテクニックは、左のエレメントにはheightを指定し、右のエレメントにはfloat:ri... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12まず，マークアップは次の通り<dl class="recent"><dt>2008-05-12</dt><dd>ページ5を更新しました。テキストテキストテキスト。... [ 詳細 ] [ 関連 ] [ ニコニコ風 ]
|
