忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[95] [94] [93] [92] [91] [90] [89] [88] [87] [86] [85

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSSにできること―文字(フォント)編

大学の講師に、
「CSSって、何ができるの。HTMLによるデザインの限界と、CSSデザインの限界を知りたい。」
と言われたため、書き出してみることにしました。

今回は、文字に関することをピックアップました。
ちなみに、フォントに関する全てのプロパティを紹介しているわけではなく、
私の独断で利用できそうなもののみを抜粋しています。


1.文字色の変更

これはHTMLのfontタグでもできる。CSSではcolorというプロパティで行う。指定方法もほぼ同様、色名や16進数で色を指定することができる。


2.フォントファミリー(書体)の変更

HTMLではfontタグface属性だったが、CSSではfont-familyで指定できる。CSSでは、書体名を名指しで指定するだけでなく、サンセリフ(ゴシック)、セリフ(明朝)といった大まかな指定も可能。


3.フォントサイズの変更

fontタグではサイズの変更に限界があったが、CSSではfont-sizeプロパティでサイズを自由に変更可能。ピクセル指定、パーセント指定はもちろん、larger(より大きく) 、smaller(より小さく)などの相対的な指定も可能。


4.フォントスタイルの変更

HTMLではiタグで指定していた、イタリック体(斜体)にするという指定が、CSSではfont-styleで指定できるようになった。デフォルトスタイルシートではem(強調)タグを使うとイタリック体になるので、これを直すのに使用するのが一般的。(日本語だとイタリック体は見にくいので)
bタグで指定していた文字の太さは、font-weightで変えることができる。値をboldにすると太字になる。デフォルトスタイルシートではstrong(強い強調)や見出しタグが太字で表示されるので、この場合normalと指定すると通常の太さになる。


5.その他

font-variantというプロパティで、英文の小文字を大文字の綴りにし、サイズを小さくすることができる(英語のみ)。日本語で説明すると非常に分かりにくいので、下記に例を。

This sentence is normal.
This sentence is small-caps.

なぜわざわざこの機能を使うのかというと、HTMLに英単語を全部大文字で記述すると、単語として認識してくれず、音声ブラウザではアルファベットの羅列として読み上げられてしまうからです。


6.追記

文章を組んだときの行間を指定できるline-heightというプロパティも追加でここに記述しておく。文章組みの説明のときに紹介する予定だったが、どうもfont類と一緒に定義されているようだったので。

line-heightは、行間を調整できるプロパティ。HTMLに行間調節の機能はありません。ちなみに、このブログは行間をたぶん150%あたりで指定をしていますが、この段落では行間を200%に指定しているので、きっと上の文章よりも行の間隔が大きくあいているように見えるはずです。


以上。書いてたら意外と長くなってしまい、論文発表に支障をきたしそうだったので、今日はここまで。
次回は文章編。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
04« 2017/05 »06
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
ブログ内検索
忍者ブログ [PR]