| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>WindowsOSの標準的な欧文フォント</title>
<style type="text/css">
<!--
body {font-size:20px;}
.arial {font-family:"Arial";}
.ariab {font-family:"Arial Black";}
.comic {font-family:"Comic Sans MS";}
.courier {font-family:"Courier New";}
.time {font-family:"Times New Roman";}
.impact {font-family:"Impact";}
.trebuchet {font-family:"Trebuchet MS";}
.verdada {font-family:"Verdada";}
-->
</style>
</head>
<body>
<div class="arial">WindowsOS 0123456789ABCDEFG</div>
<div class="ariab">WindowsOS 0123456789ABCDEFG</div>
<div class="comic">WindowsOS 0123456789ABCDEFG</div>
<div class="courier">WindowsOS 0123456789ABCDEFG</div>
<div class="time">WindowsOS 0123456789ABCDEFG</div>
<div class="impact">WindowsOS 0123456789ABCDEFG</div>
<div class="trebuchet">WindowsOS 0123456789ABCDEFG</div>
<div class="verdada">WindowsOS 0123456789ABCDEFG</div>
</body>
</html>
WindowsOSの標準的な和文フォント
ウインドウズの標準的な和文フォントです！
ウインドウズの標準的な和文フォントです！
ウインドウズの標準的な和文フォントです！
ウインドウズの標準的な和文フォントです！
ウインドウズの標準的な和文フォントです！
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>WindowsOSの標準的な和文フォント</title>
<style type="text/css">
<!--
body {font-size:20px;
line-height:1.5em;}
.msgo {font-family:"ＭＳ ゴシック";}
.mspgo {font-family:"ＭＳ Ｐゴシック";}
.msmin {font-family:"ＭＳ 明朝";}
.mspmin {font-family:"ＭＳ Ｐ明朝";}
.msui {font-family:"MS UI Gothic";}
-->
</style>
</head>
<body>
<div class="msgo">ウインドウズの標準的な和文フォントです！</div>
<div class="mspgo">ウインドウズの標準的な和文フォントです！</div>
<div class="msmin">ウインドウズの標準的な和文フォントです！</div>
<div class="mspmin">ウインドウズの標準的な和文フォントです！</div>
<div class="msui">ウインドウズの標準的な和文フォントです！</div>
</body>
</html>
複数のフォントを指定する。
ＭＳ Ｐゴシック（Windows）, Osaka-等幅（Mac）, sans-serif
ＭＳ 明朝（Windows）, 細明朝体（Mac）, serif
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>font-family</title>
<style type="text/css">
<!--
p {font-size:18px;}
.goshi {font-family:"ＭＳ Ｐゴシック", "Osaka-等幅", "sans-serif";}
.min {font-family:"ＭＳ 明朝", "細明朝体", "serif";}
//複数のフォントを指定することで，どのOSで閲覧してもある程度のデザインを保つことができる。
-->
</style>
</head>
<body>
<p class="goshi">ＭＳ Ｐゴシック（Windows）, Osaka-等幅（Mac）, sans-serif</p>
<p class="min">ＭＳ 明朝（Windows）, 細明朝体（Mac）, serif</p>
</body>
</html>
一般ファミリー名を指定する。
serifは，明朝系のフォントです。
sans-serifは，ゴシック系のフォントです。
cursiveは，筆記体系のフォントです。
fantasyは，飾り文字のフォントです。
monospaceは，等幅フォントです。
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>一般ファミリー名を指定する</title>
<style type="text/css">
<!--
div {font-size:18px;
line-height:1.5em;}
.serif {font-family:serif;}
.sansserif {font-family:sans-serif;}
.cursive {font-family:cursive;}
.fantasy {font-family:fantasy;}
.monospace {font-family:monospace;}
//それぞれの系統のフォントがブラウザによって自動的に決定される。
-->
</style>
</head>
<body>
<div class="serif">serifは，明朝系のフォントです。</div>
<div class="sansserif">sans-serifは，ゴシック系のフォントです。</div>
<div class="cursive">cursiveは，筆記体系のフォントです。</div>
<div class="fantasy">fantasyは，飾り文字のフォントです。</div>
<div class="monospace">monospaceは，等幅フォントです。</div>
</body>
</html>
30px
24px
18px
12px：ピクセル
30pt
24pt
18pt
12pt：ポイント
pxとptは，ブラウザの文字サイズの表示設定を変えても大きさは変わりません。
2.5em
2em
1em：エム
0.7em
250%
200%
100%：パーセント
70%
emと%は，ブラウザの文字サイズの表示設定によって大きさが変わります。
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>文字の大きさの指定</title>
<style type="text/css">
<!--
span {margin:2px 10px;}
#px30 {font-size:30px;}
#px24 {font-size:24px;}
#px18 {font-size:18px;}
#px12 {font-size:12px;}
#pt30 {font-size:30pt;}
#pt24 {font-size:24pt;}
#pt18 {font-size:18pt;}
#pt12 {font-size:12pt;}
#em25 {font-size:2.5em;}
#em2 {font-size:2em;}
#em1 {font-size:1em;}
#em07 {font-size:0.7em;}
#wariai250 {font-size:250%;}
#wariai200 {font-size:200%;}
#wariai100 {font-size:100%;}
#wariai70 {font-size:70%;}
-->
</style>
</head>
<body>
<div><span id="px30">30px</span>
<span id="px24">24px</span>
<span id="px18">18px</span>
<span id="px12">12px：ピクセル</span></div>
<div><span id="pt30">30pt</span>
<span id="pt24">24pt</span>
<span id="pt18">18pt</span>
<span id="pt12">12pt：ポイント</span></div>
<span id="pt12">pxとptは，ブラウザの文字サイズの表示設定を変えても大きさは変わりません。</span>
<div><span id="em25">2.5em</span>
<span id="em2">2em</span>
<span id="em1">1em：エム</span>
<span id="em07">0.7em</span></div>
<div><span id="wariai250">250%</span>
<span id="wariai200">200%</span>
<span id=wariai100">100%：パーセント</span>
<span id="wariai70">70%</span></div>
<span id=wariai100">emと%は，ブラウザの文字サイズの表示設定によって大きさが変わります。</span>
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
nomal 通常の太さ
bold 文字を太くする
bolder 文字をより太くする
lighter 文字をより細くする
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>文字の太さの指定</title>
<style type="text/css">
<!--
body {font-size:20px;}
#futosa1 {font-weight:nomal;}
#futosa2 {font-weight:bold;}
#futosa3 {font-weight:bolder;}
#futosa4 {font-weight:lighter;}
-->
</style>
</head>
<body>
<div id="futosa1">nomal 通常の太さ</div>
<div id="futosa2">bold 文字を太くする</div>
<div id="futosa3">bolder 文字をより太くする</div>
<div id="futosa4">lighter 文字をより細くする</div>
</body>
</html>
italic 文字を斜体に指定。obliqueと表示の違いはありません。
oblique 文字を斜体に指定。italicと表示の違いはありません。
nomal 文字を通常の状態にします。
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>文字を斜体に指定する</title>
<style type="text/css">
<!--
body {color:royalblue;font-size:18px;}
.shatai1 {font-style:italic;}
.shatai2 {font-style:oblique;}
.shatai3 {font-style:nomal;}
-->
</style>
</head>
<body>
<div class="shatai1">italic 文字を斜体に指定。obliqueと表示の違いはありません。</div>
<div class="shatai2">oblique 文字を斜体に指定。italicと表示の違いはありません。</div>
<div class="shatai3">nomal 文字を通常の状態にします。</div>
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
font-style,font-variant,font-weight,font-size/line-height,font-familyの値をまとめて指定。
並び方の順番①（font-style,font-variant,font-weight）②（font-size,line-height）③（font-family）
①は，順番を入れ替えて指定できる。font-sizeとfont-familyは省略できない。
font-variantのsmall-capsとは，アルファベットの小文字をサイズの小さい大文字で表示すること。
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>文字をまとめて指定する</title>
<style type="text/css">
<!--
.matomete1 {font:italic small-caps bold 14px/10px "Times New Roman";}
.matomete2 {font:italic small-caps bold 14px/10px "ＭＳ 明朝";}
.matomete3 {font:14px "Times New Roman";}
.matomete4 {font:14px "ＭＳ 明朝", "細明朝体";}
-->
</style>
</head>
<body>
<p class="matomete1">font-style,font-variant,
font-weight,font-size/line-height,font-familyの値をまとめて指定。</p>
<p class="matomete2">並び方の順番①（font-style,font-variant,font-weight）
②（font-size,line-height）③（font-family）</p>
<p class="matomete3">①は，順番を入れ替えて指定できる。font-sizeとfont-familyは省略できない。</p>
<p class="matomete4">font-variantのsmall-capsとは，
アルファベットの小文字をサイズの小さい大文字で表示すること。</p>
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
text-align:left;
text-align:center;
text-align:right;
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>行を左・中央・右にそろえる</title>
<style type="text/css">
<!--
p#left {text-align:left;}
p#center {text-align:center;}
p#right {text-align:right;}
-->
</style>
</head>
<body>
<p id="left">text-align:left;</p>
<p id="center">text-align:center;</p>
<p id="right">text-align:right;</p>
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
文字を上に指定する。
[vertical-align:middle;]で中央。[vertical-align:bottom;]で下。ただし，IE6ではbottomは上に表示されてしまう。
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>文字の垂直位置を指定する</title>
<style type="text/css">
<!--
body {font-size:14px;}
img {vertical-align:top;}
-->
</style>
</head>
<body>
<div>
<img src="buz.gif">文字を上に指定する。
</div>
<br>
[vertical-align:middle;]で中央。[vertical-align:bottom;]で下。
ただし，WinIE6ではbottomは上に表示されてしまう。
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
【通常の高さ】・・・LiFE with PhotoCinema2
は，デジカメの写真を映画を見ているように音楽とテロップと共に楽しめるソフト。作成したフォトシネマは、CD-ROMやスクリーンセーバーで配布できるほか、ホームページ上に簡単に公開することや、さらにはDVDビデオにして家庭のテレビやホームシアターで観ることができる。
【高さ18px】・・・LiFE with PhotoCinema2
は，デジカメの写真を映画を見ているように音楽とテロップと共に楽しめるソフト。作成したフォトシネマは、CD-ROMやスクリーンセーバーで配布できるほか、ホームページ上に簡単に公開することや、さらにはDVDビデオにして家庭のテレビやホームシアターで観ることができる。
【高さ3em】・・・LiFE with PhotoCinema2
は，デジカメの写真を映画を見ているように音楽とテロップと共に楽しめるソフト。作成したフォトシネマは、CD-ROMやスクリーンセーバーで配布できるほか、ホームページ上に簡単に公開することや、さらにはDVDビデオにして家庭のテレビやホームシアターで観ることができる。
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>行の高さを指定する</title>
<style type="text/css">
<!--
body {font-size:12px;}
.gyou_px {line-height:18px;}
.gyou_em {line-height:3em;}
-->
</style>
</head>
<body>
<p>【通常の高さ】・・・LiFE with PhotoCinema2は，デジカメの写真を映画を見ているように
音楽とテロップと共に楽しめるソフト。作成したフォトシネマは、
CD-ROMやスクリーンセーバーで配布できるほか、ホームページ上に簡単に公開することや、
さらにはDVDビデオにして家庭のテレビやホームシアターで観ることができる。</p>
<p class="gyou_px">【高さ18px】・・・LiFE with PhotoCinema2は，デジカメの写真を映画を見ているように
音楽とテロップと共に楽しめるソフト。作成したフォトシネマは、
CD-ROMやスクリーンセーバーで配布できるほか、ホームページ上に簡単に公開することや、
さらにはDVDビデオにして家庭のテレビやホームシアターで観ることができる。</p>
<p class="gyou_em">【高さ3em】・・・LiFE with PhotoCinema2は，デジカメの写真を映画を見ているように
音楽とテロップと共に楽しめるソフト。作成したフォトシネマは、
CD-ROMやスクリーンセーバーで配布できるほか、ホームページ上に簡単に公開することや、
さらにはDVDビデオにして家庭のテレビやホームシアターで観ることができる。</p>
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
文章の縦書き
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>たてがき</title>
<style type="text/css">
<!--
body {font-size:14px;}
.tate1 {writing-mode:tb-rl;}
.tate2 {writing-mode:tb-rl;
line-height:200%;}
-->
</style>
</head>
<body>
<p class="tate1">今すぐブロードバンドプロバイダ探し！特典割引多数！
■価格.com■ADSLよりもはるかに高速にインターネットを楽しめる「光ファイバ」。
しかし、回線事業者によって、速度も料金も大きく異なります。
光ファイバを導入する前に、どれが速くておトクか確認しましょう！</p>
<p class="tate2"><今すぐブロードバンドプロバイダ探し！特典割引多数！
■価格.com■ADSLよりもはるかに高速にインターネットを楽しめる「光ファイバ」。
しかし、回線事業者によって、速度も料金も大きく異なります。
光ファイバを導入する前に、どれが速くておトクか確認しましょう！</p>
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>文字の間隔を設定する</title>
<style type="text/css">
<!--
h1,h2 {text-align:center;
color:#6a6acd;
background-color:#eeeeee;}
.spacing1 {letter-spacing:30pt;}
.spacing2 {letter-spacing:2em;}
-->
</style>
</head>
<body>
<h1 class="spacing1">文字の間隔</h1>
<h2 class="spacing2">文字の間隔</h1>
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
ダウンロードサイト・・・半角スペース
ダウンロードサイト・・・全角スペース
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>単語の間隔を設定する</title>
<style type="text/css">
<!--
body {font-size:15px;}
h3 {color:crimson;}
.download {word-spacing:2px;
margin-bottom:30px;}
a {color:#ffffff;
background-color:crimson;
padding:5px 20px;
text-decoration:none;}
-->
</style>
</head>
<body>
<h3>ダウンロードサイト・・・半角スペース</h3>
<!-- 下記の</a>と<a href="・・・">の間に半角スペースを入れます。 -->
<div class="download">
<a Href="aaa.htm">PC-サクセス</a>
<a Href="bbb.htm">楽天ダウンロード</a>
<a Href="ccc.htm">＠SOLA SHOP</a>
<a href="ddd.htm" >アット・ニフティストア</a></div>
<h3>ダウンロードサイト・・・全角スペース</h3>
<!-- 下記の</a>と<a href="・・・">の間に全角スペースを入れます。 -->
<div class="download">
<a Href="aaa.htm">PC-サクセス</a>
<a Href="bbb.htm">楽天ダウンロード</a>
<a Href="ccc.htm">＠SOLA SHOP</a>
<a href="ddd.htm">アット・ニフティストア</a></div>
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
上のpreviewをご覧ください。
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>空白や改行をそのまま表示する</title>
<style type="text/css">
<!--
body {font-family:"ＭＳ ゴシック", "Osaka－等幅";}
.emoji1 {color:#c71585;
white-space:pre;} //値preは，半角スペースやタブ，改行をそのまま表示する。
.emoji2 {color:royalblue;
white-space:nowrap;} //値nowrapは，指定した範囲を自動改行しない。
-->
</style>
</head>
<body>
<div class="emoji1">
へ ひなまつり
o⌒o
彡从ミミ、 彡爪爪ミ、_o
W ー －W /(ー ーミヽ
C σ .σぅ ( C丶。丶 ぅ )
( " ー "/ )(" ー " 从(
Λー─-Λ ((Λー─イ ))
／~＼＼▽ ///ヽ ／~＼＼？ ///ヽ
／ ３εヽ ＼ ／ ３εヽ ＼
( ／ V V ＼ ) ( ／ V V ＼ )
ゝ＿＿／=∞=＼＿_ノ ゝ＿＿／=∞=＼＿_ノ
／ /人 ヽ ／ /人 ヽ ＜＞
＼＿＿＿ノ/人ゝ＿＿／ (＿＿＿＿ノ/人ゝ＿＿_） 工
□■□■□■□■□■□■□■□■□■□■□■□■□■
</div>
<div class="emoji2">
←このテキストをnowrapで指定し，さらに絵文字よりも幅が広くなるようにしています→
</div>
</body>
</html>
フォント関連
Copyright（C)1997. itoben style. All Rights Reserved.
C:002921 T:001 Y:013