CSSのタイプセットのマトリックスとコードジェネレーター

CSSのタイプセットのマトリックスとコードジェネレーターの紹介です。

CSS-Typoset Matrix and code generator

typo0901291.jpg

CSSのタイプセットのマトリックスとコードジェネレーターの紹介です。

CSS-Typoset Matrix and code generator

表の一番上のBase font-size (body)のテキストボックスから順に数値を入力して、「Typo-Set erstellen」のボタンを押すと、「Font-size」、「Line Height」、「Margin」、「Asymmetrical Margin」のところに、pxとemの数値が表示されます。

下記図が例です。

typo0901292.jpg

さらにページを下にスクロールをしていけば、「Sourcecode Symetrical Margins」と「Sourcecode Assymetrical Margins:」のところに、下記のようにCSSのソースが表示されます。

body { font: normal 1.0016em/1.5em Arial,Verdana,sans-serif; } 
html>body { font-size: 16px; } 
p { margin: 2em  0; font-size: 0.75em; line-height: 2em; }
h1 { margin: 1.2em 0; font-size: 1.25em; line-height: 1.2em; }
h2 { margin: 1.5em 0; font-size: 1em; line-height: 1.5em; }
h3 { margin: 1.7143em 0; font-size: 0.875em; line-height: 1.7143em; }
h4 { margin: 2em 0; font-size: 0.75em; line-height: 2em; }
h5 { margin: 2em 0; font-size: 0.75em; line-height: 2em; }
h6 { margin: 2.4em 0; font-size: 0.625em; line-height: 2.4em; }
body { font: normal 1.0016em/1.5em Arial,Verdana,sans-serif; } 
html>body { font-size: 16px; } 
p { margin: 3em 0 1em 0; font-size: 0.75em; line-height: 2em; }
h1 { margin: 1.8em 0 0.6em 0; font-size: 1.25em; line-height: 1.2em; }
h2 { margin: 2.25em 0 0.75em 0; font-size: 1em; line-height: 1.5em; }
h3 { margin: 2.5715em 0 0.8572em 0; font-size: 0.875em; line-height: 1.7143em; }
h4 { margin: 3em 0 1em 0; font-size: 0.75em; line-height: 2em; }
h5 { margin: 3em 0 1em 0; font-size: 0.75em; line-height: 2em; }
h6 { margin: 3.6em 0 1.2em 0; font-size: 0.625em; line-height: 2.4em; }