Jon Tan 陳のエントリーより、12のパラグラフタイポグラフィとCSSの紹介です。
1.ブラウザデフォルトスタイル
2.ブロックの左寄せ、右ラグ
CSS
p {
font-size: 1em;
line-height: 1.25em;
margin: 1.25em 0;
text-align: left;
}
3.正当化されたブロック
CSS
p {
font-size: 1em;
line-height: 1.25em;
margin: 1.25em 0;
text-align: justify;
}
4.境界で1emインデント
CSS
p {
font-size: 1em;
line-height: 1.25em;
margin: 0.625em;
text-align: left;
}
p + p {
text-indent: 1em;
}
5.境界なしで2リードインデント
CSS
p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: left;
}
p + p {
text-indent: 2.5em;
}
6.境界線のない2つのトップインデント
CSS
p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: justify;
}
p + p {
text-indent: 2.5em;
}
7.左寄せ、右ラグ、境界のないアウトデント
CSS
p {
font-size: 1em;
line-height: 1.25em;
text-indent: -1em;
text-align: left;
}
8.連続したテキスト、分割された段落
CSS
p {
font-size: 1em;
line-height: 1.25em;
display: inline;
text-align: justify;
}
p + p:before {
content: "¶ ";
}
9.高められたキャップ
CSS
p {
font-size: 1em;
line-height: 1.25em;
margin: 0.625em 0;
text-align: justify;
}
p:first-letter {
font-size: 3.5em;
line-height: 1em;
}
p + p:first-letter {
font-size: 1em;
line-height: 1.25em;
}
10.大胆な開始を備えた文字見出し
CSS
p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: left;
}
p + p {
text-indent: 2.5em;
}
p:first-letter {
font-size: 3.5em;
line-height: 1em;
font-weight: 400;
float: left;
margin: -0.107em 0.107em 0 0;
}
p:first-line {
font-weight: 800;
}
p + p:first-letter {
font-size: 1em;
line-height: 1.25em;
float: none;
margin: 0;
}
p + p:first-line {
font-weight: 400;
}
11.開いている大胆なスモールキャピタルを備えたアウトデントキャップ
CSS
p {
font-size: 1em;
line-height: 1.25em;
margin: 0.625em 0;
padding: 0 0 0 8em;
text-align: justify;
}
p:first-line {
font-weight: 800;
font-variant: small-caps;
}
p:first-letter {
font-size: 8em;
line-height: 1em;
font-weight: 400;
float: left;
margin: -0.156em 0 0 -0.1em;
}
p + p:first-letter {
font-size: 1em;
line-height: 1.25em;
float: none;
margin: 0;
}
p + p:first-line {
font-weight: 400;
font-variant: normal;
}
12.イニシャルアウトデントブロック
CSS
p {
font-size: 1em;
line-height: 1.25em;
margin: 1.25em 0;
padding: 0;
text-align: justify;
}
p:before {
content: "§ ";
}
p + p {
padding: 0 0 0 8em;
}
p + p:before {
content:: "• ";
}
:beforeと:first-letterはIEではサポートされてないので、注意が必要です。















コメントする