1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【CSS3学習】 テキストの基本あれこれ

Last updated at Posted at 2017-11-30

font-size

フォントサイズを指定###

数値で指定 : 数値にpxやemやrem、%などの単位をつけて指定。

rem :「em」や「%」などの従来の相対指定と違って、親要素を継承しないという特徴があり、入れ子にするとどんどん拡大、縮小されてしまったり、指定に細かな計算が必要だったりすることもなし。
常にroot要素に対して「何倍」という使い方ができるので、指定の仕方が非常にわかりやすく、便利。
htmlに「font-size: 62.5%;」を指定しておくと、「10px = 1rem」となり、px単位で計算ができる。

キーワードで指定

xx-smallx-smallsmallmediumlargex-largexx-largeの7段階があり、mediumが標準サイズ。1段階上がると1.2倍のサイズになり、また、smaller、largerを指定すると大きさが1段階上下する。

font-weight##

フォントの太さを指定###

数値で指定

100200300400500600700800900でフォントの太さを指定。太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがある。標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなる。フォントの太さとして実際に指定する値は「bold」のみで事足りることが多いよう。

キーワードで指定

normal : 標準の太さです。(数値で400を指定した場合と同じ)
bold : 一般的な太字の太さです。(数値で700を指定した場合と同じ)
lighter : 相対的に一段階細くします。
bolder : 相対的に一段階太くします。

font-family##

フォントの種類を指定###

フォントの種類はカンマ( , )で区切り、複数の候補を並べることができる。 複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、 より多くのユーザーに対して自分のイメージに近いフォントで表示させることができる。
指定したフォントがユーザーの環境にインストールされていない場合には、ブラウザで設定されたデフォルトのフォントで表示される。

フォント名で指定

「MS ゴシック」や「MS 明朝」のようにフォント名で指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション( " )またはシングルクォーテーション( ' )で囲む。

キーワードで指定 : フォントの種類を表すキーワードで指定。

sans-serif : ゴシック系のフォント
serif : 明朝系のフォント
cursive : 筆記体・草書体のフォント
fantasy : 装飾的なフォント
monospace : 等幅フォント

text-align##

行揃えの位置や均等割付を指定する###

left : 左寄せ
right : 右寄せ
center : 中央揃え
start : 先頭揃え(初期値)
end : 末尾揃え
justify : 均等割付

text-alignプロパティの値にjustifyを指定した上で、 text-justifyプロパティで均等割付の形式を指定しないと実際に均等割付にならないよう。

###text-justify###
text-alignプロパティの値にjustifyを指定した際の、行端揃えの形式を選択する際に使用。

auto : ブラウザーの仕様に従って行端揃えの形式が決まる。 (初期値)

none : 行端揃えを実行しない。

inter-word : 単語の区切り位置で間隔が調整される。
この値は,英語や韓国語などのように単語を空白で区切って表示する言語に用いる。

inter-ideograph : 単語の区切り位置とブロックス・クリプトの文字と文字の間で間隔が調整される。この値は,CJK(中国語,日本語,韓国語)を典型として用いる。

inter-cluster : 単語の区切り位置とクラスタス・クリプトの文字と文字の間で間隔が調整される。この値は,タイ語・ラオ語・クメール語・ミャンマー語などで用いる。

distribute : 単語の区切り位置と文字と文字の間で均等に間隔が調整される。
日本語で時々使用される。

kashida : アラビヤ語の カシダ(kashida)や他の筆記体(cursive scripts) で文字を伸張して調整する。

改行方法を指定する##

###overflow-wrap (word-wrap)

単語の途中で改行するかどうかを指定する際に使用する。
改行しない文字列が長すぎて行ボックスに収まらないとき、通常は文字列がボックスからはみ出して表示される。このような場合、値にbreak-wordを指定すると、単語内で改行してボックスからのオーバーフロー(はみ出し)を防ぐことができます。
word-wrapプロパティは、text-wrapプロパティの値がnormal、または、suppressのときにだけ有効となります。

normal : 単語の途中で改行はしない。必要に応じて表示範囲を拡大する。

break-word : 必要に応じて単語の途中で改行する。
途中で折り返さないと行ボックスの幅からあふれてしまうときのみ、その単語の途中で折り返します。単語の途中で折り返しが発生するのは、その単語の幅が行ボックスの幅より大きい場合のみとなる。つまり、可能な限り禁則処理が保持され、可能な限り単語途中での折り返しを避けることができる。

CSS3仕様案ではword-wrapからoverflow-wrapへと改称された。
Internet ExplorerやFirefoxでは未だ新しいoverflow-wrapのプロパティ名称がサポートされていないため、overflow-wrapを用いる場合は、後方互換性のためにword-wrapの名称も一緒に記載する必要がある。

(word-break:break-all;を折り返しの制御に使用するのは好ましくないとされています。その理由として、word-break: break-all;では一切の禁則処理が解除されるため、好ましくない位置で単語を折り返してしまうことが起こりえます。たとえば英語のorのように2文字だけの単語でも、orが行ボックスの幅からあふれそうな位置にあれば、あふれる直前で折り返すためoとrの途中で折り返してしまいます。日本語においても行頭が句読点で始まるなどの違和感のある文体になることが起こり得ます。)

###word-break###

word-breakプロパティで指定できる値に、normalkeep-allloosebreak-strictbreak-allがある。
単語の途中で折り返さないと行ボックスの幅からあふれてしまうときのみ、その単語の途中で折り返す。単語の途中で折り返しが発生するのは、その単語の幅が行ボックスの幅より大きい場合のみとなる。つまり、可能な限り禁則処理が保持され、可能な限り単語途中での折り返しを避けることができ、特に単語の途中に折り返しを基本的に入れない欧文文字のような文字列を表現する場合は、word-wrap:break-word;(overflow-wrap:break-word;)が望ましい折り返しの制御とされる。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?