上図のような表をdlで作成する場合、 今まではdt、ddにきっちりwidthを指定し、 それぞれにborder-bottomを指定。 dtにfloat:left;、ddにfloat:right;を指定するという方法でやっていました。 でも、「う」の段のように、ddのテキストの行数がdlよりも多いと border-bottomがずれてしまいます。 ならborder-top指定すれば？と思いますが、 「え」の段のように、逆にdtのテキストの行数が多いと 「お」の段が回り込んでしまいます。 そうすると、一段ずつdlにするというような 何とも不細工なソースになってしまっていました。 調べてみると、下記の様にすればで崩れずソースもきれいなままです。 それは、dtにwidthとfloat:left;を指定border-bottomの指定はナシ。 ddには、dtのwidth分のpadding-leftと
CSS Beautify automatically formats your style to be consistent and easy to read Only one blank line between two rulesets Closed curly brace is at its own line There is no empty line between declarations inside a ruleset No space between the property name and colon One space between colon and the property value Comments are preserved
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
