TOP > スタイルシートで文字をデザイン

スタイルシートで文字をデザインのカテゴリ

文字の色(前景色)を指定する

文字の色を変えるには"color"プロパティを使用します。Webページを創るとき、 文字の色を変えたことがない人はいないのではないでしょうか?

文字の太さを変える。

文字の太さを変えるには"font-weight"プロパティを使用します。文字の色を変えることと同様、 文字の太さを変える事で文章内の重要な単語やセンテンスを強調することが出来ます。

文字を斜体にする

”font-style”プロパティを使うことで、文字を斜体にすることが出来ます。太字にしたり、 文字の色を変えたりすることで重要な単語やセンテンスを強調する以外にも、斜体をうまく使うことで、 あなたのサイトに訪れた人に好奇心を持たせましょう。

文字サイズを指定する

いままではHTMLのfontタグを使って文字のサイズを指定するのが一般的でした。ただ、fontタグを使った場合、 文字の色を変えるごとにテキストをfontタグで囲む必要が出てきます。

システムフォントを使用する。

Webページのフォントを、OSのシステムフォントで表示することも可能です。ただし、 実際にはWebブラウザによって表示されるフォントは統一されていません。

スモールキャップでアルファベットを表示する。

アルファベットをサイト上に表現する場合、大文字(ABCD)と小文字(abcd)があります。 基本的にはこの2つを利用することになります。

文字フォントを指定する。

ユーザーのPCにインストールされているフォントに依存してしまう、という欠点はありますが、 文字フォントをスタイルシートで指定することも出来ます。font-familyプロパティを使います。

文字列の上下に線を引くには。

重要な単語や強調したいキーワードなどがある場合、文字列の上や下もしくは上下両方に線を入れることができます。

HTMLでは、<u>タグを使うことで下線を引くことが出来ます。ただし、上線や上下同時に線を引くことは出来ません。

文字に取り消し線を引くには。

以前書き込んだ文字列を取り消したい場合、それもWebページ上から消さずに、『現在はこの文字列は意味がありません』 という風に表現する場合には、取り消し線を利用すると良いでしょう。

HTMLでは<strike>タグを使って取り消し線を引くことが出来ます。もちろんCSSでも可能です。

文字を点滅させる(IE非対応)

スタイルシートには、文字を点滅させることも出来ます。なにか特別なキーワードを目立たせる時に使うと良いかもしれません。ただし、 CSSでは必ずしも対応しなくても良いことになっていますので、ブラウザによってはこの方法で文字を点滅させることは出来ません。

HTMLでは文字を点滅させるタグは存在しません。

文字の間隔を調整する

文字と文字の間をもうちょっと離したら読みやすくなるのに・・・そんな風に思ったことありませんか? スタイルシートには文字間隔をコントロールする機能もあります。

単語の間隔を指定する

英文でWebページを作成する場合に重宝する機能です。英文では単語と単語の間をスペースで区切りますが、 その幅をスタイルシートで指定することが可能です。

行の高さを指定する

Webページで、文章が長くてページ幅ないに収まらない場合は、折り返して表示されることになります。

この場合、問題になるのは行と行の間隔です。この間隔が大きすぎれば間延びした感じになってWebページが締まりませんし、 かといって間隔が小さすぎれば、文字が近すぎて読みにくいです。

行のそろえ方を指定する方法

Webページを作っていて、タイトルや見出しなどの特殊なセンテンスは、中央そろえにしたい場合もあります。また、 場合によっては右寄せにしたいこともあるでしょう。

スペース文字などを使って文字位置を変えようとすると、ユーザーのPC環境やブラウザ幅によって、 中央そろえにうまくならないことがあります。

均等割り付けを使用する(IEのみ)

行のそろえ方を指定するで紹介したとおり、 『text-align』 プロパティにjustifyを指定した場合には均等割付の設定になります。 均等割付はCSSレベル3で採用予定の機能で、InternetExplorerのみが先行対応してます。実際、 ワープロなどでは重宝する均等割り付けですが、Webページでは使いづらいかもしれません。

行の縦方向のそろえ方を決める

一行のセンテンスの中に高さの違う文字が混ざっている場合、デフォルトではベースライン (ベースラインとはアルファベッチのaやkの文字の下のラインです。)にそろえて表示されます。

しかし、場合によっては上付きや下付き、中央そろえなど、 デザインの都合によって高さの小さい文字列の表示位置を変えたい場合があるでしょう。

文章の先頭を字下げする

日本語であれ、英語であれ、文章の段落の先頭は一字分字下げして始めることが一般的です。もちろん実際に、 文章の先頭にスペース文字を入れて表現することも可能ですが、スタイルシートを使ってコントロールすることもできます。

英単語の大文字小文字を決定する。

英単語を多く使用するWebページであれば、いちいち大文字や小文字を自分で入力するのが面倒くさいこともありますよね。 ところがスタイルシートを使えば、英単語の大文字小文字の変換を自動化できます。

フォント関連のプロパティをまとめて設定する

スタイルシートで文字デザインの締めは、フォント関連のプロパティ6種類をまとめて設定する方法です。「font」プロパティを使用します。

 
『1歩!スタイルシート』はリンクフリーです。ご意見・ご感想等なんでもどうぞ!メールはこちらから
『1歩!スタイルシート』の許可なく本サイトの一部あるいは全文のコピーならびに転用を禁じます。