Embedded Files
テキスト(text-)のスタイルとルビ(ruby)のスタイル
テキスト(text-)のスタイルとルビ(ruby)のスタイル
行揃え
text-align: left
値：left, center, right
例
ｾﾚｸﾀ{
text-align: left
}
left： 左揃え
center： 中央揃え
right： 右揃え
左揃え
中央揃え
右揃え
フォントの装飾(text-decoration)
text-decoration: underline
値：none,line-through, blink
underline, overline
例
ｾﾚｸﾀ{
text-decoration: none
}
none： 標準フォント
underline： 下線
overline： 上線
line-through： 取り消し線
blink： 点滅(NNのみ)
標準フォント
下線
上線
取り消し線
点滅
リンク文字の色/スタイル
aを頭に、：コロン+ link visited
active hover
{ }大括弧の中に
color text-decoration
background-color などで
各リンク状態をスタイリングできます。
例
a:link {
color: #0000ff
text-decoration: none
}
a:link： クリック前リンクの色
a:visited： クリック後リンクの色
a:active： クリック時のリンクの色
a:hover： カーソルが上の時の色
指定なし
色#0000ffで下線なし
color:#0000ff;text-decoration:none
上線下線
text-decoration:underline overline
背景に色つけたり、いろんなことができるよ。
カーソルをのせた時やクリック済み（訪問後）
のリンクのスタイルをオシャレにしよっ★
ルビのスタイル
ルビの揃え
ruby-align : auto
値：left, center, right,auto,
distribute-letter,
distribute-space, line-edge
ルビの位置
ruby-position : above
値：above, inline
例
<head>
<style >
ruby{
ruby-align : left
ruby-position : inline
}
</style>
</head>
<body>
<ruby>
<rb>漢字<rt>かんじ</ruby>
</body>
<RUBY><RB>漢字<RT>かんじ</RUBY>
left： 左揃え
center： 中央揃え
right： 右揃え
distribute-letter： 均等
distribute-space： 前後に空白＋均等
auto： 自動
line-edge： テキストの状態による
above： 文字の上にルビ
inline： 文字の後ろにルビ
適用可、不可のブラウザ有り
(Firefoxは×でした。
右の例画像はIEでのｽｸﾘｰﾝｼｮｯﾄ）
ruby-position : inlineでの揃えの例 ↑
この他に、
文字間隔を指定するスタイル letter-spacing 値：normal, pxやptなどの単位付きの数値
単語間隔を指定するスタイル word-spacing 値：normal, pxやptなどの単位付きの数値
などなど！！！
Page updated
Google Sites
Report abuse