スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

連載-08 テキストのスタイルの種類

 テキストに適用するスタイルで、ブログでよく使いそうなものについて書いてみたいと思います。

color: 文字の色を指定します
  指定は #110011 のように16進数で指定するか、
  red、blue、yellow、gold のように色でも指定できます
font-size: 文字のサイズを指定します
  直接 14px 20em などとサイズで指定するか
  120% あるいは large,small,x-small,x-smallと相対指定もできます
font-family: 文字のフォントを指定します
  MS ゴシック",sans-serif; などとフォントの種類を指定します
  ウインドウズやマックなどで違うフォントを同時に指定できます
line-height: 行間のサイズを指定します
  直接 30pxなどと指定できますが
  1.5 150% などと文字のサイズとの相対指定もできます
font-weight: 文字の太さを指定します
  いろいろな指定がありますが、現状のブラウザーでは bold
  が有効のようです。
font-style: 文字のスタイルを指定します
  italic 現状ではイタリック体を使うことができます
text-decoration: 文字の装飾を指定します
  underline テキストに下線が付きます。
  overline テキストに上線が付きます。
  line-through テキストに打ち消し線が付きます。
  blink テキストが点滅します。
letter-spacing: 文字の間隔を指定します

 とたくさんありますが、やってみて遊ぶことがスタイルシート上達の鍵です。

 ここで文字のスタイルシート変更を利用した遊びを作ってみました。文字をクリックすると文字の大きさと色が変わります。Javascriptでフォントのサイズを指定するときは、下の例では this.style.fontSize=50; などとします。font-sizeでなくてfontSizeであることに注意してください。

<
<
文字の大きさが変わります


ソースです
<span style="font-size:1"><<div id="flag" width=1></div><<div onmouseover="this.style.cursor='hand';this.style.color='red'" onmouseout="this.style.color='black'" onclick="if(flag.width==1){this.style.fontSize=120;flag.width=2;}else{this.style.fontSize=30;flag.width=1;}"></span><span style="line-height:120px;">文字の大きさが変わります</span></div>

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。