CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整えるWebサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用の HTML と CSS コードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらっても OK です :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Sa
『Dezinerfolio流』自動的に横幅を調節してくれるCSSタブメニューの作り方*ホームページを作る人のネタ帳
いつも購読している海外のブログ記事ですが、図つきでわかりやすく紹介されています。 こういうのは過去にもいくつか見た事がありますので『Dezinerfolio流』と名づけておきます。 ようするにCSSタブメニューの横幅を、中に書かれたテキストによって、自動的に幅を調整すると言うもの。 タブメニューは結構使うようになってきたので覚えておいて損はないですよね。 もうタブの画像生成に悩まない 実際タブメニューは結構使いますので、これでひとつまた作業が楽になります。 タブの画像も、海外では無数に配布されていたり、生成できたりしますので、利用頻度は高いかと。 サンプルはこちら 図つきのため本当にわかりやすくなっています。 ソースコードはエントリに書かれていますので、そちらを参考にしてください。 Creating Liquid CSS Tabs for Menus もしもタブを作るのがそもそも面倒なら・
pastelmilk ♥ [CSS] XML宣言を削除しないでIEでも画像に写真枠とドロップシャドウを表示させる
CSSで画像に本物の写真のように枠とドロップシャドウを付ける CSSで画像に本物の写真のように枠をつけてドロップシャドウ（影）を付ける方法は、最近普及してきています。 下の画像も、CSSで枠（白太枠+その外側のグレー細枠）とドロップシャドウを表示させています。 枠とドロップシャドウを含めて1つの画像ではなく、 写真部分だけがimgで置いてあり、枠とドロップシャドウはCSSで表示させています。 CSSで表示させるメリット 「Photoshopで画像を加工したほうが簡単でしょ。」 そう最初は私も思っていました。 Web用に画像をサイズ変更や色調補正するからそのついでに。 でも毎回Photoshopでドロップシャドウをつける作業がないのは楽です。 そして、例えばすでにサイズもそのままで良くて色調も良い場合や、Flickrの画像を載せるとかPhotoshopを使わないときにはこの上なく
yaml – CSSフレームワークライブラリとそのブラウザエディタ yaml builder | 秋元@サイボウズラボ・プログラマー・ブログ
via Ajaxian 名前が紛らわしいのだけど、データフォーマットのYAMLとは関係ない。ドイツ製のウェブサイトレイアウトライブラリyamlは、CSSベースのマルチカラムレイアウトをマルチブラウザ対応で行なうライブラリ。 それだけだと他にもいろいろあるのだけど、特徴としてはドキュメントがすごく充実していることらしい。そのわりに知られていなかったのはドイツ語圏で開発が続けられていたかららしいが、英語のドキュメントも揃えて本格的なバイリンガルプロジェクトとなったそうだ。 プレビューが公開されたばかりらしいyaml builderが良くできていて、ブラウザ上のオンラインエディタでドラッグアンドドロップでレイアウトを試すと、できあがったレイアウトを再現するHTMLとCSSを入手できるというもの。 こんな風にマルチカラムを編集し、ヘッダや本文などのコンテンツを置いていく。 “Get Code”を押
CSSだけで円グラフを表示するサンプル:phpspot開発日誌
Have a Slice This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries CSSだけで円グラフを表示するサンプル。 次のような円グラフをCSSのみで実現するサンプルが公開されています。 HTMLコードは以下のようにシンプルに表現できます。 <div class="shadow"> <div id="example"> <div class="pie size35"></div> <p class="percent">37%</p> </div> </div> 次のような１個の円グラフを並べた横長画像のbackground-positionをずらして、必要な部分だけ表示することで実現しているようです。 サーバサイドでもクライアントサ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ボタンを背景でロールオーバー