画像の最大幅を calc() で制御する
画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (Fig 1)。 Fig 1: パディングとボーダーを持つ画像に `max-width: 100%;` を指定すると、親要素の幅を越えてしまうことがある これをつねに親要素に収めるようにするには、box-sizing プロパティを利用して画像の幅がパディングとボーダー込みで算出されるようにする、という手がある。 img { max-width: 100%; border: 1px solid sil
CSSコンパイラ最新版登場、単一ファイルから複数ブラウザ対応データを生成 | エンタープライズ | マイコミジャーナル
HSS is tool that extends the CSS syntax with powerful features such as variables and nested blocks. 策定が進められているCSS3には魅力的な機能が多い。ブラウザの実装も進んでおり、最新のブラウザではその表現の差異も小さくなりつつある。将来的には、CSS3を使ってさまざまなデザインをすっきりと表記できるようになるとみられている。 しかし、現実はそういうわけにはいかない。使われているブラウザはIE9、IE8、IE7、IE6、Firefox 4、Firefox 3.x、Chrome、Safari、Operaとバラバラであり、それぞれがサポートしているCSSは統一されておらず、さらにIE6やIE7などはそもそも表示する内容がほかのブラウザと異なっていたり、サポートしていない機能も多い。結局、さまざま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Reference
