画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
CSSレイアウト時のよくやる失敗と対処法｜WEB制作（html,css(スタイルシート) )｜プログラムメモ
■floatでレイアウトしたときのボックスの間に隙間が出来る →隙間が出来るボックス要素全てに float 要素を追加 ■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る → 下記を追加 img { display: block; } ■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる →ずれる<div>等に vertical-align を設定する（top 又は bottom） ■ <td>内のフォントが正しく指定したとおりでない（Win IE Mac IE） →<td>の中に<span>をいれて対応する ■MacIEで<div>を floatさせると表示が崩れる。 → フロートさせるdiv の width height 属性を指定する ■<ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると 隙間
IE6でよく遭遇するCSSのバグとその解決方法 | コリス
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが２倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが２倍になってしまうバグ IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
CSSのレイアウト作成に役立つ便利なリソースいろいろ
最近のページやサイト作成に欠かすことのできない「CSS（カスケーディング・スタイル・シート）」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろっています。 Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! CSSのフレームワーク blueprintcss - Google Code 16種類の異なるCSSベースのレイアウト intensivstation :: CSS Templates :: Templates 12種類のCSSによるレイアウト Dynamic Drive CSS Layouts- CSS Frames CSSのレイアウトを作成する
テキストの回りこみ処理をCSSで実現するための『CSS Text Wrapper』 | 100SHIKI
テキストの回りこみ処理をCSSで実現するための『CSS Text Wrapper』 December 7th, 2007 Posted in その他 Write comment 他サイトでも紹介されているが、個人的にぐっと来たのでご紹介。 複雑な図形の形にあわせてテキストを回り込ませたい、というときがたまにある。 ワードやイラストレーターではそういった処理が可能だが、ウェブでそれを再現しようと思うとちょっと厄介だ。 そこで登場したのがCSS Text Wrapperだ。このサイトでは自分で好きな図形を描き、それにあわせてテキストを配置することができる。 そのようにして作った「テキストの回りこみ処理」はCSSのコードでダウンロードすることができる。このコードを回り込ませたいテキストの直前に配置するなどすれば自分のサイトで簡単に応用可能だ。 ウェブで表現するのが厄介、で思考停止せずに、こうした
CSSの最適化とファイルサイズ削減をしてくれる無料ネットサービスいろいろ
ページの制作において必須とも言えるCSSですが、そのCSSファイルを最適化することによってページの読み込みを早くしてみたり、トラフィックの多いサイトであれば転送料の節約にも貢献できるらしい。 というわけで、現時点で存在するCSS最適化ネットサービスをいろいろと探して列挙してみました。最適化といってもサービスによって方法はいろいろなので、この中から自分の目指す方向の最適化サイトが見つかるかも。 CSSの最適化とファイルサイズ削減をしてくれる無料ネットサービスのリストは以下の通り。 Clean CSS - A Resource for Web Designers - Optmize and Format your CSS http://www.cleancss.com/ コメントを残したり、並べ替えたり、圧縮したり、最適化レベルやオプション指定によってかなりカスタマイズできるCSSファイルの容
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス
あなたのマークアップのどこがどう正しくないかを具体的に指摘してくれる『xhtml-css』 | 100SHIKI.COM
スタイルシートデザインを始めたい方へ-WEB工房きくちゃん-
CSSセレクタ簡易対応表｜CSS HappyLife