[CSS] 丸や三角など任意の形にコンテンツをレイアウトできる「shape-outside」

Shape outside

こちらの画像は、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] 見出しと本分のレイアウトサンプル

h2, h3, h4 で見出しを付けて、pで本分を書くという良くやるレイアウトのサンプルCSSです。ただ単に見出しを太字で大きくして、少しマージンをとってその下に本分を書くというものから、サイドにレイアウトするものまで様々あります。

参考にしてみるのもよいかもしれません。

[ Setting subheads with CSS ]