トップ > スッキリかんたんスタイルシート


フォトシネマはこちらへ
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
font-family WindowsOSの標準的な欧文フォント
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
WindowsOS 0123456789ABCDEFG
>>> HTMLソース
WindowsOSの標準的な和文フォント
ウインドウズの標準的な和文フォントです!
ウインドウズの標準的な和文フォントです!
ウインドウズの標準的な和文フォントです!
ウインドウズの標準的な和文フォントです!
ウインドウズの標準的な和文フォントです!
>>> HTMLソース
複数のフォントを指定する。

MS Pゴシック(Windows), Osaka-等幅(Mac), sans-serif

MS 明朝(Windows), 細明朝体(Mac), serif

>>> HTMLソース
一般ファミリー名を指定する。
serifは,明朝系のフォントです。
sans-serifは,ゴシック系のフォントです。
cursiveは,筆記体系のフォントです。
fantasyは,飾り文字のフォントです。
monospaceは,等幅フォントです。
>>> HTMLソース
font-size 文字の大きさの指定
30px 24px 18px 12px:ピクセル
30pt 24pt 18pt 12pt:ポイント
pxとptは,ブラウザの文字サイズの表示設定を変えても大きさは変わりません。
2.5em 2em 1em:エム 0.7em
250% 200% 100%:パーセント 70%
emと%は,ブラウザの文字サイズの表示設定によって大きさが変わります。
>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
font-weight 文字の太さの指定
nomal 通常の太さ
bold 文字を太くする
bolder 文字をより太くする
lighter 文字をより細くする
>>> HTMLソース
font-style 文字を斜体に指定する
italic 文字を斜体に指定。obliqueと表示の違いはありません。
oblique 文字を斜体に指定。italicと表示の違いはありません。
nomal 文字を通常の状態にします。
>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
font 文字をまとめて指定する

font-style,font-variant,font-weight,font-size/line-height,font-familyの値をまとめて指定。

並び方の順番@(font-style,font-variant,font-weight)A(font-size,line-height)B(font-family)

@は,順番を入れ替えて指定できる。font-sizeとfont-familyは省略できない。

font-variantのsmall-capsとは,アルファベットの小文字をサイズの小さい大文字で表示すること。

>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
text-align 行を左・中央・右にそろえる

text-align:left;

text-align:center;

>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
vertical-align 文字の垂直位置を指定する
文字を上に指定する。

[vertical-align:middle;]で中央。[vertical-align:bottom;]で下。ただし,IE6ではbottomは上に表示されてしまう。
>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
line-height 行の高さを指定する

【通常の高さ】・・・LiFE with PhotoCinema2 iconは,デジカメの写真を映画を見ているように音楽とテロップと共に楽しめるソフト。作成したフォトシネマは、CD-ROMやスクリーンセーバーで配布できるほか、ホームページ上に簡単に公開することや、さらにはDVDビデオにして家庭のテレビやホームシアターで観ることができる。

【高さ18px】・・・LiFE with PhotoCinema2 iconは,デジカメの写真を映画を見ているように音楽とテロップと共に楽しめるソフト。作成したフォトシネマは、CD-ROMやスクリーンセーバーで配布できるほか、ホームページ上に簡単に公開することや、さらにはDVDビデオにして家庭のテレビやホームシアターで観ることができる。

【高さ3em】・・・LiFE with PhotoCinema2 iconは,デジカメの写真を映画を見ているように音楽とテロップと共に楽しめるソフト。作成したフォトシネマは、CD-ROMやスクリーンセーバーで配布できるほか、ホームページ上に簡単に公開することや、さらにはDVDビデオにして家庭のテレビやホームシアターで観ることができる。

>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
文章の縦書き

今すぐブロードバンドプロバイダ探し!特典割引多数! ■価格.com■ADSLよりもはるかに高速にインターネットを楽しめる「光ファイバ」。しかし、回線事業者によって、速度も料金も大きく異なります。光ファイバを導入する前に、どれが速くておトクか確認しましょう!

今すぐブロードバンドプロバイダ探し!特典割引多数! ■価格.com■ADSLよりもはるかに高速にインターネットを楽しめる「光ファイバ」。しかし、回線事業者によって、速度も料金も大きく異なります。光ファイバを導入する前に、どれが速くておトクか確認しましょう!

>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
letter-spacing 文字の間隔を設定する

文字の間隔

文字の間隔

>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
word-spacing 単語の間隔を設定する

ダウンロードサイト・・・半角スペース

ダウンロードサイト・・・全角スペース

>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
white-space 空白や改行をそのまま表示する
上のpreviewをご覧ください。
>>> HTMLソース
フォント関連

つくろう!魅せよう! スッキリかんたんスタイルシート〜基本 スッキリかんたんスタイルシート〜文字 スッキリかんたんスタイルシート〜色と背景 スッキリかんたんスタイルシート〜リンク スッキリかんたんスタイルシート〜ボックス スッキリかんたんスタイルシート〜配置 スッキリかんたんスタイルシート〜リスト スッキリかんたんスタイルシート〜表 スッキリかんたんスタイルシート〜いろいろ スッキリかんたんスタイルシート〜HP構成
Copyright(C)1997. itoben style. All Rights Reserved.