こちらの画像は、CSS Shapeのshape-outsideという属性を使った一例。
斜めにカットされた透明png画像のカットラインに沿って、テキストがレイアウトされています。通常であれば下のラインに沿ってレイアウトされますが、shape-outsideを使うと雑紙のようなレイアウトも可能になるんですね。
タグ: レイアウト
[ブラウザ] 画像やレイアウト間のサイズを測れるChrome拡張「Dimensions」
「Dimensions」は、Webページの画像やレイアウトのサイズを測ることができるChrome拡張機能です。
画像のサイズやレイアウトのサイズ、ボタンやアイコンのサイズなどをソースを見ずに知る事ができるので、Webデザインの調節を行うときにかなり便利。サイズを%やem指定で行っている時でも、実際のpixelで測れるので、人によっては、必須のツールといってもいいかもしれません。
Source: Dimensions Browser Extension
[ブラウザ] Web開発者向けのFirefox Developer Edition
Webサイトやブログなどの作成者向けに、Mozillaが「Firefox Dev Edition」を提供しています。
使ってみた感じでは、通常のFirefoxにFire Bugアドオンをインストールした状態に近くて、ソースコードなどの表示ができるWebコンソール、レイアウトのピクセル表示などが行えるページインスペクター、デバッガー、スタイルエディター、パフォーマンスチェック、ページの表示速度をチェックして、ボトルネックになっているファイルを調べるといったツールを実装しています。
[CSS] レスポンシブデザインの参考やサンプルとして使える「Web Starter Kit」
マルチデバイスの観覧に対応したレスポンシブレイアウトのデザインサンプルとして使えるWeb Starter Kit。出来合いのテーマだとオリジナリティに欠けるという場合、このフレームワークを活用してオリジナリティを出す事が出来ます。
[CSS] 見出しと本分のレイアウトサンプル
h2, h3, h4 で見出しを付けて、pで本分を書くという良くやるレイアウトのサンプルCSSです。ただ単に見出しを太字で大きくして、少しマージンをとってその下に本分を書くというものから、サイドにレイアウトするものまで様々あります。
参考にしてみるのもよいかもしれません。