『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

CSS03 行揃えと幅の指定、行の高さの指定(6分38秒)

独学 CSS 行揃えと幅の指定、行の高さの指定

今回は、行揃えと幅の指定、行の高さの指定について解説しています。

概要

  • 幅の指定
  • 行揃えの指定
  • 行の高さの指定

補足・ポイント

ブロックレベル要素の幅の指定

スタイルシートでブロックレベル要素の幅を指定するにはwidthプロパティを使います。

この横幅の値は、pxなどの単位での数値や%を使った割合で指定します。

widthプロパティを指定していない場合は、一般的に横幅の値としてautoが自動的に設定されています。

div {
width:200px;
}

ブロックレベル要素の行揃えの指定

スタイルシートでブロックレベル要素の行揃えを指定するにはtext-alignプロパティを使います。

text-alignプロパティを使うことで、左揃え、右揃え、中央揃えのいずれかを指定できます。

div {
text-align:center;
}

  • left 左揃え
  • right 右揃え
  • center 中央揃え

行の高さの指定

スタイルシートで行の高さを指定するにはline-heightプロパティを使います。

このline-heightプロパティの値は、pxなどの単位での数値や単位なしの倍率、%を使った割合で指定します。

一般的なブラウザでは、行の高さの初期設定値はブラウザとフォントが初めから持っている値としてnormalが設定されています。

例えば、

font-sizeプロパティ「14px」のp要素にline-heightプロパティの値を「20px」とすると、「20px」から「14px」を引いた「6px」分の隙間ができます。

line-heightプロパティの例

p {
font-size:14px;
line-height:20px;
}

行間によりテキストの読みやすさは大きく影響します。

一般的に読みやすいと言われている行間は、フォントサイズの1.5倍くらいです。

line-heightプロパティの注意点

数値や割合を使って指定する場合、文字サイズを拡大したり、フォントサイズの違う要素が混在したりといった状況の時、行間がつまりすぎてしまうことがあります。

行間は単位なしの倍率で指定するのがベストです。

p {
font-size:14px;
line-height:1.5;
}

この記事が気に入ったら
いいね ! しよう

福本 智子

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

Pocket
LINEで送る

関連記事

Webデザインの参考書を何冊やっても先に進めない方へ

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!