
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
ITコラム
2017.05.24
fontプロパティは、フォント関連のプロパティをまとめて指定できるショートハンドプロパティです。
font-sizeプロパティやfont-familyプロパティなど、フォントに関する6つのプロパティの値を一括で指定することができます。
今回は、fontプロパティについてまとめたいと思います。
1.fontプロパティで指定できるプロパティ
2.font-family
3.font-size
4.font-variant
5.font-style
fontプロパティは、ショートハンドプロパティで、フォントに関する各プロパティをまとめて指定できます。
fontプロパティで指定できるのは、次の6つのプロパティの値です。
font-style フォントのスタイルを指定
値:normal(デフォルト値)、italic、obliquefont-variant フォントをスモールキャップスにする
値:normal、small-capsfont-weight フォントの太さを指定
値:normal、bold、lighter、bolder、数値(100、200、・・・、900)font-size フォントのサイズを指定
値:xx-small、x-small、small、medium(標準)、large、x-large、xx-large、%、単位付きの数値line-height 行の高さを指定
値:normal(デフォルト値)、%、単位付きの数値、数値のみfont-family フォントの種類を指定
値:sans-serif、serif、cursive、fantasy、monospace、フォント名
●fontプロパティで各プロパティの値をまとめて指定する場合には、以下の順序で指定します。
1.font-style、font-variant、font-weight(この3つのプロパティ内は順不問)
2.font-size
3.line-height
4.font-family
●fontプロパティを使用する場合は、指定可能な6つのプロパティのうち、font-sizeプロパティとfont-familyプロパティは省略することができません。
●fontプロパティでline-heightを指定する場合は、次のようにline-heightの値の前にスラッシュ( / )を記載します。
font: bold large/150% serif;
●fontプロパティを使用すると、フォント関連のスタイルが一旦リセットされた上で、fontプロパティで指定した値が適用されます。
省略した値は、親要素の値を継承するのではなく、デフォルト値となります。
font-familyプロパティは、フォントの種類を指定する際に使用するプロパティです。
フォントの種類は、カンマ( , )で区切って複数指定することができます。
フォントの種類を複数指定しておくと、ユーザ環境で表示可能なものが指定した順番で選択されるため、より多くのユーザに対して、作成者のイメージに近いフォントで表示させることができます。
指定したフォントがユーザの環境で表示できない場合は、ブラウザで設定されたデフォルトのフォントで表示されます。
font-familyプロパティの値は、次の通りです。
sans-serif ゴシック系のフォント serif 明朝系のフォント cursive 筆記体(草書体)のフォント fantasy 装飾的なフォント monospace 等幅フォント フォント名 フォント名にスペースが含まれている場合は、ダブルクォーテーション( ” )またはシングルクォーテーション( ‘ )で囲み、”MS ゴシック”のように指定
font-familyプロパティの値は、継承されます。
また、font-familyプロパティは、全ての要素で使用できます。
font-familyプロパティでフォントの種類を指定すると、次のように表示されます。
font-family:sans-serif;
(ゴシック系のフォント)
font-family:serif;
(明朝系のフォント)
font-family:cursive;
(筆記体(草書体)のフォント)
font-family:fantasy;
(装飾的なフォント)
font-family:monospace;
(等幅フォント)
font-family:”MS P明朝”;
(MS P明朝)
ソースは次の通りです。
(CSS) p#sample { height: 100px; padding: 20px; background-color: #FF9696; font-family:sans-serif; /*またはserif、cursive、fantasy、monospace、"MS P明朝"*/ } (HTML) <p id="sample"> font-family:〇〇〇; (〇〇のフォント) </p>
font-sizeプロパティは、フォントのサイズを指定する際に使用するプロパティです。
font-sizeプロパティの値は、次の通りです。
xx-small 7つのキーワードの中で最小のサイズ x-small xx-smallの1.2倍のサイズ small x-smallの1.2倍のサイズ medium smallの1.2倍のサイズ(デフォルト値) large mediumの1.2倍のサイズ x-large largeの1.2倍のサイズ xx-large x-largeの1.2倍のサイズ 単位付きの数値 数値にpx、em、ex等の単位を付けて指定(マイナスの指定は不可)
px:1ピクセルを1とする単位(実際に表示されるサイズはモニターの解像度に依存)
em:フォントの高さを1とする単位
ex:小文字の「x」の高さを1とする単位% デフォルトのサイズに対する%で指定
font-sizeプロパティの値は、継承されます。
また、font-sizeプロパティは、全ての要素で使用できます。
font-sizeプロパティでフォントのサイズを指定すると、次のように表示されます。
font-size:xx-small;
(7つのキーワードの中で最小のサイズ)
font-size:x-small;
(xx-smallの1.2倍のサイズ)
font-size:small;
(x-smallの1.2倍のサイズ)
font-size:medium;
(smallの1.2倍のサイズ(デフォルトのサイズ))
font-size:large;
(mediumの1.2倍のサイズ)
font-size:x-large;
(largeの1.2倍のサイズ)
font-size:xx-large;
(x-largeの1.2倍のサイズ)
font-size:80%;
(デフォルトの80%のサイズ)
font-size:100%;
(デフォルトのサイズ)
font-size:150%;
(デフォルトの150%のサイズ)
font-size:10px;
(10px)
font-size:10em;
(10em)
font-size:10ex;
(10ex)
ソースは次の通りです。
(CSS) div#sample { height: 100px; padding: 5px; background-color: #31A9EE; } div#sample p:nth-child(1) {font-size:xx-small;} div#sample p:nth-child(2) {font-size:x-small;} div#sample p:nth-child(3) {font-size:small;} div#sample p:nth-child(4) {font-size:medium;} div#sample p:nth-child(5) {font-size:large;} div#sample p:nth-child(6) {font-size:x-large;} div#sample p:nth-child(7) {font-size:xx-large;} div#sample p:nth-child(8) {font-size:80%;} div#sample p:nth-child(9) {font-size:100%;} div#sample p:nth-child(10) {font-size:150%;} div#sample p:nth-child(11) {font-size:10px;} div#sample p:nth-child(12) {font-size:10em;} div#sample p:nth-child(13) {font-size:10ex;} (HTML) <div id="sample"> <p> font-size:xx-small; (7つのキーワードの中で最小のサイズ) </p> <p> font-size:x-small; (xx-smallの1.2倍のサイズ) </p> <p> font-size:small; (x-smallの1.2倍のサイズ) </p> font-size:medium; (smallの1.2倍のサイズ(デフォルトのサイズ)) </p> <p> font-size:large; (mediumの1.2倍のサイズ) </p> font-size:x-large; (largeの1.2倍のサイズ) </p> <p> font-size:xx-large; (x-largeの1.2倍のサイズ) </p> <p> font-size:80%; (デフォルトの80%のサイズ) </p> <p> font-size:100%; (デフォルトのサイズ) </p> <p> font-size:150%; (デフォルトの150%のサイズ) </p> <p> font-size:10px; (10px) </p> <p> font-size:10em; (10em) </p> <p> font-size:10ex; (10ex) </p> </div>
font-variantプロパティは、要素内の小文字をスモールキャップスにする際に使用するプロパティです。
スモールキャップスとは、小文字と同じ高さで作られた大文字のことです。
指定したフォントにスモールキャップスがない場合は、大文字を縮小したものを表示します。
font-variantプロパティの値は、normalとsmall-capsの2つです。
normal 通常のフォントのまま表示 small-caps 大文字は大文字のまま、小文字をスモールキャップスで表示
font-variantプロパティの値は、継承されません。
また、font-variantプロパティは、全ての要素で使用できます。
大文字と小文字が混在する「ABCDEFabcdef」という文字列について、font-variantプロパティでnormalとsmall-capsをそれぞれ指定すると、次のように表示されます(上がnormal、下がsmall-capsです)。
ABCDEFabcdef
ABCDEFabcdef
ソースは次の通りです。
(CSS) div#sample { padding: 20px; font-size:200%; background-color: #B20000; } div#sample p:nth-child(1) {font-variant:normal;} div#sample p:nth-child(2) {font-variant:small-caps;} (HTML) <div id="sample"> <p> ABCDEFabcdef </p> <p> ABCDEFabcdef </p> </div>
font-styleプロパティは、フォントの表示スタイルを指定する際に使用するプロパティです。
font-styleプロパティの値は、normal、italic、obliqueの3つです。
normal デフォルト値
標準フォントで直立表示italic 斜体用フォントで斜体表示 oblique イタリック斜体(より草書的な斜体)用フォントで斜体表示
font-styleプロパティの値は、継承されます。
また、font-styleプロパティは、全ての要素で使用できます。
日本語の場合、oblique(斜体用フォント)やitalic(イタリック斜体用フォント)が用意されていることはほとんどなく、 標準フォントを斜めに傾けて表示するため、obliqueとitalicとでブラウザ上の表示に違いがない場合も多いです。
font-styleプロパティでフォントの表示スタイルを指定すると、次のように表示されます。
font-style:normal;
(標準フォントで直立表示)
font-style:oblique;
(斜体用フォントで斜体表示)
font-style:italic;
(イタリック斜体用フォントで斜体表示)
ソースは次の通りです。
(CSS) div#sample { padding: 20px; background-color: #006DD9; } div#sample p:nth-child(1) {font-style:normal;} div#sample p:nth-child(2) {font-style:oblique;} div#sample p:nth-child(3) {font-style:italic;} (HTML) <div id="sample"> <p> font-style:normal; (標準フォントで直立表示) </p> <p> font-style:oblique; (斜体用フォントで斜体表示) </p> <p> font-style:italic; (イタリック斜体用フォントで斜体表示) </p> </div>
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.