Google検索エンジン

トップページ » スタイルシート入門講座 » CSSでフォントの種類とサイズを指定する方法


CSSでフォントの種類とサイズを指定する方法

  • フォントとは

    フォントとは、文字をコンピュータを使って表示したり印刷したりする際の、文字の形のことで書体とも呼ばれます。 フォントにはゴシック体、明朝体など多くの種類があり、文章の種類に応じて使い分けることで、文書の表現力を向上させることができます。


    フォントに関するCSSプロパティ

    フォントの種類やサイズを指定しないと、Webブラウザにデフォルトで設定されているフォントの種類やサイズで表示されます。 日本語表示の場合は、「MS-PGothic」に設定されていることが多いです。 Webブラウザの既定のフォントの種類やサイズは変更可能で、Webブラウザの種類やバージョンによって異なりますので、フォントの種類やサイズは設定しておいた方が無難でしょう。

    CSSプロパティ 意味
    font:下記参照 フォントに関する全てを指定
    font-stylefont-style フォントをイタリック・斜体に設定
    font-variantfont-variant フォントをスモールキャップに設定
    font-weightfont-weight フォントの太さを指定
    font-sizefont-size フォントのサイズを指定
    line-heightline-height 行の高さを指定
    font-familyfont-family フォントの種類を指定

    フォントに関する全てを指定

    fontプロパティは、フォントに関する指定をまとめて行う際に使用します。 指定できるのは、 font-style、 font-variant、 font-weight、 font-size、 line-height、 font-familyの6つのプロパティの値です。 このうち font-sizeとfont-familyは 省略することができません。

    各プロパティの値を指定する際の順序は以下のように決まっています。
    line-height の指定は font-size の後にスラッシュ(/)を入れて値を書きます。
     1. font-style、font-variant、font-weight(順不同)
     2. font-size
     3. line-height
     4. font-family

    CSSファイル記述例
    div#test-font{
    	font:italic normal bold 30px/50px "MS 明朝";
    }
    
    HTMLファイル記述例
    <div id="test-font">フォントに関する全てを指定</div>
    Webページの表示
    フォントに関する全てを指定

    フォントをイタリック・斜体に設定

    font-styleプロパティは、フォントをイタリック・斜体に設定する際に使用します。 指定できる値は、標準(normal)、イタリック体(italic)、斜体(oblique)の3種類です。

    font-styleプロパティの指定値
    normal 標準フォントで表示します。これが初期値です。
    italic イタリック体フォントで表示します。
    oblique 斜体フォントで表示します。
    CSSファイル記述例
    div#test-font-style{
    	font-style:oblique;
    }
    
    HTMLファイル記述例
    <div id="test-font-style">フォントをイタリック・斜体に設定</div>
    Webページの表示
    フォントをイタリック・斜体に設定

    フォントをスモールキャップに設定

    font-variantプロパティは、フォントをスモールキャップに設定する際に使用します。 指定できる値は、標準(normal)、スモールキャップ(small-caps)の2種類です。

    font-variantプロパティの指定値
    normal 標準のフォントで表示します。これが初期値です。
    small-caps スモールキャップのフォントで表示します。スモールキャップのフォントがない場合には、大文字を縮小したものを小文字として表示します。
    CSSファイル記述例
    div#test-font-variant{
    	font-variant:small-caps;
    }
    
    HTMLファイル記述例
    <div id="test-font-variant">abcdefg123ABCDEFG123</div>
    Webページの表示
    abcdefg123ABCDEFG123

    フォントの太さを指定

    font-weightプロパティは、フォントの太さを指定する際に使用します。 数値で指定、キーワードで指定する方法があります。

    font-weightプロパティの指定値
    normal 標準の太さです。(数値で400を指定した場合と同じ)
    bold 標準の太字の太さです。(数値で700を指定した場合と同じ)
    lighter 相対的に一段階細くします。
    bolder 相対的に一段階太くします。
    数値で指定 100、200、300、400、500、600、700、800、900でフォントの太さを指定します。太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがあります。標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなります。
    CSSファイル記述例
    div#test-font-weight{
    	font-weight:bold;
    }
    
    HTMLファイル記述例
    <div id="test-font-weight">フォントの太さを指定</div>
    Webページの表示
    フォントの太さを指定

    フォントのサイズを指定

    font-sizeプロパティは、フォントのサイズを指定する際に使用します。 数値で指定、%で指定、キーワードで指定する方法があります。

    font-sizeプロパティの指定値
    数値で指定 数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の「x」の高さを1とする単位です。数値には負の値は指定できません。
    %で指定 フォントのサイズを%値で指定します。
    キーワードで指定 xx-small、x-small、small、medium、large、x-large、xx-largeの7段階があり、mediumが標準サイズです。1段階上がると1.2倍のサイズになります。また、smaller、largerを指定すると大きさが1段階上下します。
    CSSファイル記述例
    div#test-font-size{
    	font-size:150%;
    }
    
    HTMLファイル記述例
    <div id="test-font-size">フォントのサイズを指定</div>
    Webページの表示
    フォントのサイズを指定

    行の高さを指定

    line-heightプロパティは、行の高さを指定する際に使用します。 数値で指定、%で指定、キーワードで指定する方法があります。 行の高さには、負の値を指定することはできませんので注意してください。

    line-heightプロパティの指定値
    キーワードで指定 値に「normal」を記述すると、ブラウザが判断して行の高さを決定します。これが初期値です。
    %で指定 行の高さを%値で指定します。
    数値に単位をつけて指定 数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の「x」の高さを1とする単位です。
    数値のみで指定 単位をつけずに数値のみを指定すると、その数値にフォントのサイズを掛けた値が行の高さとなります。例えば「1.5」と指定すると「150%」や「1.5em」と指定した場合と同じになります。
    CSSファイル記述例
    div#test-line-height{
    	line-height:300%;
    	background-color:#FFCCCC;
    }
    
    HTMLファイル記述例
    <div id="test-line-height">行の高さを指定</div>
    Webページの表示
    行の高さを指定

    フォントの種類を指定

    font-familyプロパティは、フォントの種類を指定する際に使用します。 フォントの種類はカンマ( , )で区切って複数の候補を並べることができます。 複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。

    font-familyプロパティの指定値
    sans-serif ゴシック系のフォント
    serif 明朝系のフォント
    cursive 筆記体・草書体のフォント
    fantasy 装飾的なフォント
    monospace 等幅フォント
    フォント名で指定 「MS ゴシック」や「MS 明朝」のようにフォント名で指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション( " )またはシングルクォーテーション( ' )で囲むようにしてください。
    CSSファイル記述例
    div#test-font-family{
    	font-family: "MS 明朝",serif;
    }
    
    HTMLファイル記述例
    <div id="test-font-family">フォントの種類を指定</div>
    Webページの表示
    フォントの種類を指定

スタイルシート入門講座
it-manual.comのウェブサイト
書籍の紹介
  • 全部無料でつくるはじめてのホームページ & HTML for Windows 7/Vista/XP
    全部無料でつくるはじめてのホームページ & HTML
    発売:2010/07/30
    定価:1,869円
    著者:浅岡 省一
    出版:翔泳社
    内容:ホームページの雛形となるサンプルが丸ごと収録されているので、ソフトや素材と組み合わせれば、自分好みのホームページを無料で簡単に作ることも可能です。Windows7/Vista/XPに対応してます。
  • フェイスブック 若き天才の野望 (5億人をつなぐソーシャルネットワークはこう生まれた)
    フェイスブック 若き天才の野望
    発売:2011/01/13
    定価:1,890円
    著者:デビッド・カークパトリック
    出版:日経BP社
    内容:ユーザー数が5億人を超え、会社の時価総額が2兆円を超え、グーグルを驚かす存在となった、フェイスブック。同社を率いるマスコミ嫌いのCEO、マーク・ザッカーバーグからの信頼を勝ち得たベテラン記者が、徹底取材からフェイスブックの真実を初めて明かします。
  • Twitter×アメブロでビジネスを加速する方法
    Twitter×アメブロでビジネスを加速する方法
    発売:2010/12/09
    定価:1,554円
    著者:青山 華子
    出版:ソーテック社
    内容:ブランディングと人脈を構築する86の法則。twitterやFacebookなど、ソーシャルメディアの時間短縮と有効活用方法を徹底解説。
  • 起業のファイナンス ベンチャーにとって一番大切なこと
    起業のファイナンス ベンチャーにとって一番大切なこと
    発売:2010/09/30
    定価:2,310円
    著者:磯崎 哲也
    出版:日本実業出版社
    内容:人気ブログ「isologue」の磯崎哲也が教える、成功する会社の作り方。
  • できるホームページ HTML&CSS入門 Windows 7/Vista/XP対応
    できるホームページ HTML&CSS入門
    発売:2010/12/24
    定価:1,659円
    著者:佐藤 和人
    出版:インプレスジャパン
    内容:オールカラーの大きな画面で操作手順がよく見える初心者向けの書籍です。HTMLタグやスタイルシートの入力手順を丁寧に解説してます。手順の横にヒントも掲載されており、関連知識も身に付きます。ホームページやHTMLの用語集も付属してます。
  • ネットではじめる! 輸出ビジネス
    ネットではじめる!輸出ビジネス
    発売:2010/08/21
    定価:1,575円
    著者:陳 立浩
    出版:すばる舎
    内容:売れる商材の特徴、言葉の壁の乗り越え方、ネット輸出会社の作り方、効果抜群の広告宣伝のコツやクレームへの対処法まで、この1冊で新たなビジネスモデルが見えてきます。
  • Webサイト制作・運営に役立つ! ホームページ担当者が最初に覚える100の基本
    Webサイト制作・運営に役立つ! ホームページ担当者が最初に覚える100の基本
    発売:2010/06/05
    定価:1,575円
    著者:服部 洋二
    出版:ソーテック社
    内容:初心者向けの書籍です。中小企業のWebサイトに携わる方向けの書籍ですので、個人のウェブサイトにも適用しやすい内容となっています。
  • Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)
    Webデザインの基本ルール
    発売:2009/03/27
    定価:1,890円
    著者:デザインラボ編集部
    出版:ソフトバンククリエイティブ
    内容:色の力を最大限に活かす配色の基本とベースカラー別配色パターン集、XHTMLとCSSでデザインをカタチにするWeb制作技術の概要と基本、Web標準、SEO、ユーザビリティ、アクセシビリティの考え方など。
  • HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる
    HTML/XHTML&スタイルシートレッスンブック
    発売:2007/06/20
    定価:2,604円
    著者:エビスコム
    出版:ソシム
    内容:初心者の方におすすめしたい参考書籍です。 HTMLやCSSに関しても基礎的なことを、丁寧にとても分かりやすく説明してます。 Webページを作成する過程が、段階的に解説されているため、無理なくHTMLとCSSを習得できます。
  • Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
    Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
    発売:2005/07
    定価:2,520円
    著者:益子 貴寛
    出版:秀和システム
    内容:「Web標準」とは、Web上で標準的に利用される技術の総称です。Webサイトをより多様な環境に対応させ、誰にでもアクセスできるようにするには、この概念が必要不可欠だといえるでしょう。
  • SEOを強化する技術 エンジニアが内側から支えるサイト設計・構築術
    SEOを強化する技術
    発売:2009/12/18
    定価:1,890円
    著者:安川 洋
    出版:インプレスジャパン
    内容:TwitterのSEO効果など最新のトピックについても記載されています。エンジニアだけではなく、エンジニアの力を借りてより高度なSEO対策を行いたいWeb担当者にも最適の内容です。
  • もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら
    もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら
    発売:2009/12/04
    定価:1,680円
    著者:岩崎 夏海
    出版:ダイヤモンド社
    内容:ドラッカーとはピーター・ドラッカーのことで、経営学者・社会学者です。真面目な本ではなく、マネジメントはもちろん経済やビジネスの参考にはなりません。突拍子のないことが書かれているので、息抜きに読んでみると面白いです。
ネットショップ構築サービス
  • ネットショップ開業に必要な機能が全て揃っており、初めての開業をトータルで支援します。もちろんモバイルショップにも対応しており、さらにショップブログも付いてきます。利用開始から30日間はお試し期間なので、安心して利用できます。
  • 高機能のショッピングカートが標準装備されたネットショップ向けレンタルサーバーを提供してます。顧客管理、在庫管理、受注管理、ポイントシステム、アフィリエイト対応などネットショップの開店、運営、集客の機能が全て揃っています。既に他社のサーバーを利用している人も、ショッピングカートの機能を利用することが可能です。本格的にネットショップを開業したい方におすすめです。
  • 商品管理や在庫管理なども簡単操作で、ネットショップ運営をトータルサポートします。携帯ショップにも対応しており、パソコンと同じURLで携帯ショップも自動生成できます。決済は、クレジット、コンビニ、ネット銀行、電子マネーに対応してます。利用開始から30日間はお試し期間なので、安心して利用できます。
  • 会員管理、ポイント管理、プレゼントキャンペーン、メルマガなど、高機能なショッピングカートです。テンプレート選択でもネットショップが出来るから初心者でも簡単です。
  • e-shopsカート2は初心者の方から繁盛店まで多数の導入実績を誇ります。初めてのネットショップでも簡単にショッピングサイトを作成できます。プラグイン対応のホームページ・ビルダーでショッピングカートの設置も簡単です。
おすすめレンタルサーバー
  • 「コロリポプラン」なら月額105円で容量2GB、「ロリポプラン」なら月額263円で容量13GB、マルチドメイン、データベース、共有SSLが使えます。「チカッパプラン」なら月額525円で容量30GB利用可能です。
  • 月額263円で、ディスク容量が30GB利用可能です。ポイント制があり、ポイントを最大まで利用すると、月額約197円の換算になります。
  • 50GBの大容量で、月額525円からのレンタルサーバーです。マルチドメイン、無料お試し期間、その他ユーザーツールなど便利な機能がたくさんあります。
  • 月額125円のプランからビジネスにも使えるプランまで、予算や利用目的で選べる共用レンタルサーバや、サーバ1台まるごと利用できる専有レンタルサーバなど様々なサービスが用意されています。
  • 100GBの容量以外は、ほとんど無制限のレンタルサーバーです。マルチドメイン、サブドメイン、FTPアカウント、データベース、メールアカウントなどが無制限で利用できます。
  • サポート充実、高機能、高セキュリティーをお求めなら、イチオシのレンタルサーバーです。セコムと提携することで、業界屈指の高セキュリティーを実現してます。
  • サーバー自体が高性能なビジネス仕様のレンタルサーバーです。さらに高性能な専用レンタルサーバーも用意されています。
独自ドメイン取得サービス
  • 「ムームードメイン」は「ロリポップ!レンタルサーバー」を運営するpaperboy&co.の低価格ドメイン取得サービスです。2004年のサービス開始以来、初心者でも簡単にドメイン設定ができる機能と、580円/年〜の手軽な価格帯で、個人を中心に多くの人が利用してます。「ロリポップ!レンタルサーバー」との契約を考えている人には、特におすすめの独自ドメイン取得サービスです。
  • ネットオウル株式会社のスタードメインなら、.comドメインが年額950円で取得できます。スタードメインを利用すると「ネットオウルポイント」が進呈されますので、ネットオウル株式会社のレンタルサーバー「ミニバード」「ファイアバード」「クローバー」との契約を考えている人には、特におすすめの独自ドメイン取得サービスです。
  • 「お名前.com プレミアムドメイン」では、世界中で取引されるプレミアムドメインを提供してます。プレミアムドメインとは「英単語を含む」「短く覚えやすい」「ドメインの種類が.com」など、稀少なドメイン名を指してます。個人名や会社名など特定のドメイン名を取得したい方に、おすすめのサービスです。