ダメ男のブログ: HTML

2014年3月28日金曜日

サイト構築でデザイン調査していたときのメモ

一般的なWEBアプリを作成するときによくあるのが、人物画像の横に投稿文章を配置するというデザインです。twitterとかfacebookが典型的ですね。

僕がいままでサイトを作成する時は、floatとclearを使ってデザインを構築していたのですが、twitterは違う方法でやっていたので以下にメモを残しておきます。(2014/3/28調査)

twitterの場合、画像以外のオブジェクト、つまり文章やリンクを、margin-leftで右横にずらして配置しています。
そして画像のclassにwidthとheightを指定して、ずらしたmargin-left内に収まるように画像を配置します。

このやり方の良いところは、とてもわかりやすいことです。
floatやclearでごちゃごちゃしないので、ソースが読みやすくなります。

実際に試したい人は、chromeのデバッガを使ってtwitterのソースコードをコピーしてみてください。

2012年4月7日土曜日

HTML5とCSS3でレイアウトを組み上げているとき、「マージンの相殺」の罠にはまりました。
display:blockを設定したsectionのボックスを入れ子にしたとき、内側のmargin-topの設定が反映されない現象です。

解決方法はこちらです。

結論を言うと、外側にpadding-top、内側にmargin-topを挟むことで解決できます。

「マージンの相殺」なんて名称がついていますが、ただのブラウザのバグですな。
ファミコンゲームのバグを裏技と信じていた純粋な子供時代を思い出しました。

ダメ男のブログ