サイト構築でデザイン調査していたときのメモ
環境
- HTML5
一般的なWEBアプリを作成するときによくあるのが、人物画像の横に投稿文章を配置するというデザインです。twitterとかfacebookが典型的ですね。
僕がいままでサイトを作成する時は、floatとclearを使ってデザインを構築していたのですが、twitterは違う方法でやっていたので以下にメモを残しておきます。(2014/3/28調査)
twitterの場合、画像以外のオブジェクト、つまり文章やリンクを、margin-leftで右横にずらして配置しています。
そして画像のclassにwidthとheightを指定して、ずらしたmargin-left内に収まるように画像を配置します。
このやり方の良いところは、とてもわかりやすいことです。
floatやclearでごちゃごちゃしないので、ソースが読みやすくなります。
実際に試したい人は、chromeのデバッガを使ってtwitterのソースコードをコピーしてみてください。
この記事がお役にたちましたらシェアをお願いします
0 件のコメント:
コメントを投稿