スタイルシート(CSS) text-decoration

フォントを装飾するには、「text-decoration」プロパティを使用します。

スタイルシートの「text-decoration」プロパティで使用できるフォントの装飾は次の通りです。

underline: 文字に下線を付ける。

overline: 文字に上線を付ける。

line-through: 文字の取消線。

blink: 文字の点滅。

normal: 装飾していないデフォルト表示。

text-decorationのフォーマット。
text-decoration: 値;

値は複数指定することも出来ますが、その場合は半角スペースで区切ります。
text-decoration: 値 値;


実際にtext-decorationで文字に各値を適用すると、次のような表示になります。

文字に下線を付ける。

文字に上線を付ける。

文字の取消線。

文字の点滅。


text-decorationで出来る文字の装飾はこれだけですが、その他のスタイルシートのプロパティを組み合わせることで、いろんな表現が出来るようになります。

スタイルシート(CSS) フォントスタイル font-style

フォントの表示を変えるには、font-styleプロパティを使用します。

表示を変えるとは、フォントを斜体かイタリック、ノーマルなど字体の変更をすることです。

フォーマット
font-style: 字体;

字体には次の3種類があります。

normal: 通常の字体(初期値)

italic: 草書体を斜めにしたような字体。

oblique: 標準の字体を斜めにした斜体。

上記は、それぞれに対応するフォントスタイルを適用していますが、italicとobliqueは、見た目あまり差がありません。なのでitalicを使うことが多いと思います。

HTMLにイタリックで表示する要素<i>がありますが、スタイルシートのfont-styleで適用することが推奨されています。

スタイルシート(CSS) 行揃え text-align

テキストの行揃え(表示位置)を設定するにはtext-alignプロパティを使います。

text-align:行揃え位置;

行揃え位置」には、次の値が指定できます。

left : 左揃え(初期値)。

center : 中央揃え。

right : 右揃え。

text-alignプロパティを適用するテキストは、ブロックレベル要素で囲まれている必要があります。

例えば、適用したいテキストを、p要素やdiv要素などのブロックレベル要素で囲んだうえで、その要素にtext-alignプロパティを適用します。

<p>適用したいテキスト<p>

このp要素に次のようにスタイルを設定します。
p{text-align: center;}


あるいは、クラスやID属性を使用します。
<p class="classname">適用したいテキスト<p>
このp要素に次のようにスタイルを設定します。
.classname{text-align: center;}


<p id="idname">適用したいテキスト<p>
このp要素に次のようにスタイルを設定します。
#idname{text-align: center;}



text-alignプロパティは、ブロックレベル要素の内容を行揃え設定するプロパティです。

スタイルシート(CSS) フォントの行間隔 line-height

行間を指定するには、line-heightプロパティを使います。

フォーマットは次の通りです。

line-height: 行の高さ;

行の高さには、次のような指定方法があります。

normal: 通常の行間隔で初期値です。

数値: ここで指定した数字にフォントのサイズを掛けた値が、行間の高さになります。

%: %で指定するとフォントのサイズに対する割合が、行間の高さになります。

単位付きの数値: font-sizeで指定できるpxやemなど単位付きの数値が使用できます。

このうちnormalの指定は、通常の行間隔ですので詳細は省きます。


数値での指定は、半角の数値で指定します。

2.0と指定するとフォントサイズに2.0を掛けた値が行間隔で、1.5を指定するとフォントサイズの1.5倍の値が行間隔の値です。


%での指定は、100%が初期値と考えて下さい。これより大きい値は行間隔が広がります。
100%未満の値で指定すると行間隔が狭くなりますが、数値が小さくなると上下の行が重なることがあります。


単位付きの数値で、pxでの指定の場合はフォントサイズの値から指定した数値を引いた値が行間隔になります。
フォントサイズよりもline-heightで指定した数値が小さいと上下の行が重なることがあります。

いずれの指定値でもマイナスの指定は出来ません。


次のような指定は、フォントサイズが同じとすると、すべて同じ表示になります。

line-height: 1.2;
line-height: 1.2em;
line-height: 120%;


注意が必要なのが、古いブラウザの中には、単位のない数値で指定すると行間が重なってしまうなどのバグがあります。

スタイルシート(CSS) フォントの太さ font-weight

フォントの太さを指定するには、font-weightプロパティを使用します。

フォーマットは次の通りです。
font-weight: 太さ;

太さのところに、次に示すキーワードか数値で指定します。

・normal:標準の太さ
・bold:一般的な太字
・100:normal(400)よりも三段階細い細字
・200:normal(400)よりも二段階細い細字
・300:normal(400)よりも一段階細い細字
・400:標準の太さ
・500:normal(400)よりも一段階太い太字
・600:normal(400)よりも二段階太い太字
・700:boldに相当する太さ
・800:bold(800)よりも一段階太い
・900:bold(800)よりも二段階太い

このようにフォントの太さを細かく設定できますが、100〜500のフォントの太さは、フォントサイズにもよりますが、見た目それほど変りません。

また600〜900も同様に見た目の変化を感じることは出来ません。

そのため使用頻度が高いのは「bold」で、「normal」はフォントの太さを指定しないと「normal」と同様の太さで表示されるので、あまり使うことはないでしょう。

スタイルシート(CSS) フォントサイズ font-size

フォントサイズを指定するには、font-sizeプロパティを使用します。

font-sizeプロパティで指定した大きさで文字が表示されます。

次のように指定します。
font-size:サイズ指定;

サイズ指定には、単位付きの数値、あるいはキーワードが入ります。

指定の方法には幾つかの方法があります。
単位付き数値指定
・%:指定した要素の親要素のフォントサイズに対する割合で、100%が基準です。

・em:親要素のフォントサイズの高さを1とした単位で、1emが基準となります。

・px:1ピクセルを1とした単位で、表示するディスプレイの解像度によって大きさが変ります。

・pt:1ポイントは1/72インチ(約0.35mm、1インチ2.54cm)で、絶対的な大きさの指定になります。

キーワード指定
・xx-small、s-small、small、medium、large、x-large、xx-large
:ユーザーのブラウザ環境等に左右されます。mediumが標準サイズで、7段階で表現します。

フォントサイズの指定には様々な意見があります。

絶対的な値を指定するとユーザーが文字の変更を出来ないなど、ユーザーの自由度を奪ってしまうユーザビリティの問題があります。

相対的な値で指定するとユーザビリティの問題はなくなりますが、見る環境によって大きさが変ることからデザイン側の問題が生じます。

指定方法でよく利用されるのが、em、px、%ですが、%等の相対的な値で指定するのが理想とされています。

しかし、紹介した指定方法はすべてW3Cの勧告では、使用可能となっています。

スタイルシート(CSS) フォントの指定「font-family」

CSSのプロパティ、font-familyではフォント名を指定します。

font-familyのフォーマットは次の通りです。

font-family: フォント名;

複数のフォント名を指定するには、次のように「,(カンマ)」で区切って指定します。

font-family: フォント名,フォント名,フォント名;

また、フォント名にスペースが含まれている場合は、次のように「"(ダブルクォーテーション)」あるいは「'(シングルクォーテーション)」で囲む必要があります。

font-family: "Times New Roman";


フォント名を複数指定している場合は、一番最初あるいは、より左に指定したフォントが優先されますが、指定したフォントがユーザーの環境で表示できることが前提となります。

フォント名とは別に、下のようなフォントの種類名で指定することも出来ます。

・serif: 明朝系フォント
・sans-serif: ゴシック系フォント
・cursive: 草書体、筆記体系フォント
・fantasy: 装飾体系フォント
・monospace: 等幅フォント

このようなフォントの種類で指定すると、ユーザーの環境にあったフォントで表示されます。


注意が必要なのは、このプロパティで指定したフォントが、ユーザーのPCに入っている必要があります。

デフォルトの状態でも「Windows」「Mac」「Linux」「UNIX」等のOSによってインストールされているフォントが異なることを覚えておきましょう。



スタイルシート(CSS) 色の指定 color

colorプロパティは、文字色を指定するのに使います。

スタイルシートの適用のしかたで出てきた書き方の中に、次のように指定します。

{color: 色指定;}

色指定の部分では、数種類の指定方法があります。

・「#RRGGBB」のようにRGBを16進数で指定する。
#記号に続き、
R(赤)R(赤)G(緑)G(緑)B(青)B(青)
のようにRGBの各値を2桁ずつ16進数で指定します。

16進数は「0〜f」の16桁の数字とアルファベットで、0から始まり9の次から、abcdefと続く数字の表記方法です。

赤の場合は「#ff0000」となります。


・「#RGB」のようにRGBを16進数で指定する。
上記と違って#記号に続き、
R(赤)G(緑)B(青)
のようにRGBの各値を1桁ずつ16進数で指定します。

赤を指定する場合は、「#f00」となります。


・「rgb(0,0,0)」のように10進数で指定する。
rgbに続き、
(R(赤),G(緑),B(青))
のように()内にRGBをそれぞれ「,」で区切り「0〜255」の数字で指定します。

赤を指定する場合「rgb(255,0,0)」のように指定します。


・「rgb(0%,0%,0%)」のようにパーセントで指定する。
rgbに続き、
(R(赤)%,G(緑)%,B(青)%)
のように()内にRGBをそれぞれ「,」で区切り「0〜100」のパーセンテージで指定します。

赤を指定する場合「rgb(100%,0%,0%)」のように指定します。


・色名で指定する。
直接、色の名前を指定することが出来ますが、HTML4.01で定義されている16色が基本となります。

赤を指定する場合「red」となります。


このブログでは、最もよく使用されている1番最初の方法で解説していきます。


赤を指定する場合は、
{color:#ff0000;}
と指定します。

colorプロパティで注意したいのは、背景色と同じにならないようにすることです。

例えば、白の背景色に白い文字色を指定すると読むことが出来ない。

そのためcolorプロパティを指定するときは、背景色も指定しておいた方が良いでしょう。

スタイルシート(CSS)の適用 ID、クラス編

これまでのスタイルシート(CSS)の適用のしかたは次の通りでした。

○HTML要素名{プロパティ:値;}
○*(アスタリスク){プロパティ:値;}

この他に最も使用頻度の高い方法が、前回でも少し触れた次の方法です。

○#ID名{プロパティ:値;}
○.class{プロパティ:値;}

上記の書き方は、「*#ID名{プロパティ:値;}」、「*.class{プロパティ:値;}」の省略形になりますので、すべてのIDあるいはクラスに適用することになります。

特定の要素にID名、クラス名でスタイルを適用したい場合は次のように書きます。

○HTML要素名#ID名{プロパティ:値;}
○HTML要素名.class{プロパティ:値;}

ID名、クラスでスタイルを適用するには、適用したいHTML要素に、それぞれid属性、class属性を入れておく必要があり、属性を入れた要素に適用されます。

例えば、ID名の場合は
<p id="ID名"> 〜 </p>

あるいはクラス名の場合
<p class="クラス名"> 〜 </p>

ID名とクラス名は、半角英数字であれば好きな文字が使えますが、管理のしやすいように、意味を関連づけた文字列にした方が良いでしょう。

またID名は、HTML文章内では、固有の名前でなければいけません。
これは、同一ページ内でID名は一度しか使えないことを意味していますので注意が必要です。

クラス名は、種類名や分類名を表すもので、同じクラス名を同一ページ内で複数回使用することが出来ます。


*プロパティであるべき所を、セレクタとしていたため修正。

CSS(スタイルシート)の書き方 外部ファイル編

スタイルシートを外部ファイルにする方法は、スタイルシート記序の中で、メンテナンス性、汎用性、効率を考えると一番適した方法で、web制作でも最も利用されている方法。

まずスタイルシートを記序したファイルを準備します。

記序のしかたは、以下のような書き方で書きます(詳細は次回以降で解説します。)。

要素名{プロパティ:値;}

あるいは、すべてに適用する場合。
*(アスタリスク){プロパティ:値;}

1つの要素に複数設定する場合。
要素名{プロパティ:値; プロパティ:値; プロパティ:値;}

複数の要素にスタイルを適用する場合。
要素名,要素名,要素名{プロパティ:値; プロパティ:値;}

IDを利用する場合。
ID名{プロパティ:値; プロパティ:値; プロパティ:値;}

classを利用する場合。
class名{プロパティ:値; プロパティ:値; プロパティ:値;}

上記に従って書いたファイルを任意の名前を付け、「.css」という拡張子を付けて任意の場所に保存します。

最もスタンダードなのは、「style.css」というファイル名を付けて「css」というディレクトリーに保存します。


次にhead要素内に次のようにスタイルシートの場所を指定します。
<link rel="stylesheet" href="スタイルシートの場所" type="text/css">

XHTMLの場合。
<link rel="stylesheet" href="スタイルシートの場所" type="text/css" />

通常スタイルシートの場所には、スタイルシートの位置を相対パスで記序します。

例えばcssディレクトリにstyle.cssというスタイルシートを準備していたとすると。
<link rel="stylesheet" href="css/style.css" type="text/css">
のようになります。


*プロパティでなければいけないところを、セレクタとしていたところを修正。

Recent Comments

Recent Trackbacks