このCSSの記事は2006年頃のものです。内容が古いのでご注意下さい。


CSSフォントサイズ指定まとめ■標準モードのサンプル

このエントリーをはてなブックマークに追加 Tweet


テキストのサンプル 互換モード標準モード 表示比較 OS別ブラウザ別 記事制作 2006/07/10
修正 2007/01/29

DOCTYPE宣言 標準モード

ブログの箇所
セレクタ
ソース(font-sizeはwin-ie.cssのもの、各CSSファイルのfont-sizeは右の相違表のものが入ります)
各CSSファイルでのフォントの大きさ相違表
表示サンプル
win-ie
win-nn
win-nn6
mac-ie
mac-nn
mac-nn6
記事タイトル
h1
{ font-size: small ; font-weight: bold }
small medium medium small large large

CSS、スタイルシートの設定をまとめたページを作ってみました。

ブログの本文
.main-text
{ font-size: x-small ; line-height: 150% ; margin-top: 20px }
x-small
small small x-small medium medium
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
記事投稿日時
.time
{ font-size: x-small }
x-small small small x-small medium medium
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
書いた人
.author
{ font-size: x-small }
x-small small small x-small medium medium
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
コメント・
トラバした人
.comment
{ font-size: x-small ; text-align: right ; margin: 15px }
x-small small small x-small medium medium
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
コメント・
トラバのタイトル
.cmmt-ttl
{ font-weight: bold ; border-left: 5px solid navy ; padding: 10px }

CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
コメント・
トラバのテキスト
.cmmt-txt
{ font-size: x-small ; line-height: 150% ; margin: 15px }
x-small small small x-small medium medium
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
左・メニューテキスト
.menu
{ font-size: x-small ; line-height: 125% ; margin-bottom: 3px }
x-small small small x-small medium medium
メニューのタイトル
「最近の記事」とか
(下記と組み
合わせて利用)
.menu-ttl
{ font-size: x-small ; font-weight: bold ; margin-left: 15px ; color: white }
x-small small small x-small medium medium
メニュータイトルの
バックグランド
(テーブルセルに適用)
td.menu-back
{ background: black }


DOCTYPE宣言 標準モード

xx-small
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
x-small
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
small
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
medium
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
large
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
x-large
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
xx-large
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
smaller
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw
larger
CSS、スタイルシートの設定をまとめたページを作ってみました。それぞれOS、ブラウザごとで表示させたハードコピーを貼り付けてます。実際の大きさの感じを確認できると思います。ちなみにこれはサンプルテキスト。特に意味のない文章だけどw