スタイルシートを使う その２
今回は主にスタイルシートでフォント選びや文字の装飾、その他様々な指定を行う方法を説明しようと思います。
テキストの指定
色の指定
書式： color:＿;
＿の部分にはHTML文書と同じで#00ff00のように指定することもできればpinkなどと単語で表すこともできます。
背景色の指定
書式： background-color:＿;
colorの場合と同じように背景色を指定できます。
背景画像の指定
書式： background-image:url("＿");
""の中にURLで記述された画像ファイルを背景画像として使用します。外部のスタイルファイルを読み込む形式の場合、相対パスはスタイルファイルからの相対パスになります。
色の指定
書式： color:＿;
＿の部分にはHTML文書と同じで#00ff00のように指定することもできればpinkなどと単語で表すこともできます。
フォントの種類の指定
書式： font-family:＿;
フォントは見る人の環境によって異なり、指定したフォントが存在するとは限らないので、このフォントの指定は必ずしも適用されるとは限りません。なので第一希望、第二希望、…といった具合に指定することになります。また、特徴の似たフォントグループを表すフォントファミリー名で指定することも可能です。フォントファミリー名にはserif,sans-serif,cursive,fantasy,monospaceなどがあります。
フォントを斜体にする
書式： font-style:italic;
"normal"が普通の状態です。
フォントの太さを変える
書式： font-weight:＿;
＿の部分には太くしたいときはboldとして下さい。また数字で100から900まで100刻みで指定することもできます。
フォントのサイズを変える
書式： font-size:＿;
＿の部分には、10.5ptなどと単位つきで数字を記述することもできるし、単語で表すこともできます。用意されてる単語は、larger,smaller,xx-small,x-small,small,medium,large,x-large,xx-largeなどです。長さの単位には、mm,cm,in,pt,pc,em,ex,pxなどがあります。
文字を装飾する
書式： text-decoration:＿;
＿の部分には、どのような装飾をするか指定します。underline,overline,line-through(打消線),blink(点滅),noneなどがあります。
テキストの位置
書式： text-align:＿;
＿にはHTMLのalign属性と同じようにleft,center,rightを指定します。
さて、これまでの知識を使い文字の書式を変えてみましょう。
リストのマークの指定
リストのマークを変える
書式： list-style-type:＿;
＿にはマークの種類を指定します。disc,circle,square,decimal(数字),upper-roman,lower-roman,upper-alpha,lower-alpha,noneなどがあります。
リストのマークを画像にする
書式： list-style-image:url("＿");
＿に指定した画像がリストのマークになります。
ボックスを使う
ボックスとはテキストの回りに表示される枠線のことです。ボックス指定を適用したタグではさまれた部分が枠線で囲まれることになります。
ボックスのスタイルを指定する
書式： border-style:＿;
＿のところには、どのような種類の枠線で囲むかを指定します。solid,double,groove,ridge,inset,outset,noneなどがあります。
ボックスの幅を指定する
書式： border-width:?; (上下左右の幅)
border-width:? ?; (上下、左右の幅)
border-width:? ? ?; (上、左右、下の幅)
border-width:? ? ? ?; (上、右、下、左の幅)
?の幅指定は1ptのように単位つきで行います。
ボックスの色を指定する
書式： border-color:?; (上下左右の色)
border-color:? ?; (上下、左右の色)
border-color:? ? ?; (上、左右、下の色)
border-color:? ? ? ?; (上、右、下、左の色)
?の色指定はcolorの時と同じような指定方法でやって下さい。
この知識を使い、ここのページの見出しをまねてみましょう。