p, ul, ol, dl などのテキストの下にできてしまう意図しない余白を解決するうまい方法をCSS-Tricksから紹介します。 下記は各ポイントを意訳したものです。 Spacing The Bottom of Modules 上記のコードはシンプルで、divをラッパーとして、見出しとパラグラフを配置しているだけです。 HTML <div class="module"> <h3>Module</h3> <p>Pellentesque habitant morbi tristique senectus...</p> </div> スタイルシートもシンプルです。 CSS html { background: #333; } .module { width: 20rem; padding: 1.5rem; margin: 1.5rem auto; background: white; } h
CSSにおいてマージンの相殺される際の基本的な規則は下記の通り： 水平方向（左右）のマージンは相殺されない（マージンの相殺が行われるのは垂直方向のみ）。 パディング、ボーダーによって分離されず隣接するマージンにおいては、親ボックスとの間でも相殺が生じる。 floatされたボックスマージンは相殺されない。 overflow属性の値に"visible"以外が指定された要素は、その子要素とのあいだでマージンを相殺しない。 絶対配置（position:absolute;）されたボックスのマージンは相殺されない。 inline-block要素（display:inline-block;と指定されたボックス）のマージンは相殺されない。 クリアランスが与えられた要素の上のマージンは相殺されない。 ルート要素のマージンは相殺されない。 隣接するマージンがすべて正の値の場合は、もっとも大きいマージンの値が適
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
CSSでボーダーを画像の内側につける マウスオーバーした際に、ボーダー処理をCSSでつける作業をしていた所、 画像の内側にもボーダーをつけたいと言われてやり方を調べました。 誰かの参考なれば幸いです。 ↑このような状態が理想です。 結論を言うと、画像にネガティブマージンを適用すればOKのようです。 以下のようなコードで実装できました。 a { overflow: hidden; float: left; } a:hover { border: 5px solid #000000; } a:hover img { margin: -5px; } 以下のサイトを参考にさせて頂きました。感謝。 Image Rollover Borders That Do Not Change Layout
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
大抵のCSSバグは、回避法が有るので何とかなるのですが、回避法が特に存在していないバグの場合非常に困ります。 最近の仕事で、IEバグでは比較的発生しやすいIEバグが起こったのでメモとして記しておきます。 floatで左右どちらかに寄せているボックスに、marginの値を指定するとIE5.x/IE6の環境下で、指定値の2倍程度のmarginが設定される。 大抵の場合はpaddingで代用出来るのですが、今回のケースではdivなどのボックスに対して指定せず、h3などのblock要素に直接floatを指定し、marginで調整しようとした際に発生。 該当のh3には背景画像が指定されており、テキストの位置をpaddingで調整していたので、marginを指定するしか無く、バグが発生しました。 対応方法でいくつか候補はあったのですが、今回はアンダースコアハックで対応。 divを追加して対応という方法
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く