初心者向けにCSSで書くline-heightの使い方について解説しています。line-heightは行間の調整を行う際に便利です。良いデザインにするためには必要な知識なので、ぜひ使えるようにしておきましょう。[テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。CSSで書くline-heightの使い方について解説していきます。行間の広さを変える時に便利な知識なので、使い方を理解していきましょう。本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。今回はline-heightを使ってみよう。行の高さを設定するプロパティで、これによって文字列の行間の幅を調整することができるんだ。大石ゆかり文章などのレイアウトで必要になりそうですね。お願いします!line-heightとはline-heightプロパティを使用すると、文章の行間の広さを設定することができます。行間調整の書き方line-heightプロパティは以下のように記述します。値;値はpxなどの単位で指定する方法、数値のみで指定する方法、%で指定する方法の3つがあります。line-heightで指定される高さは、フォントの大きさ+上下の余白になります。そのため、文字と文字の間の余白はline-heightで設定した数値からフォントサイズを引いた数値が上下に均等に割り振って配置されます。フォントサイズが16pxの文章にline-heightで20pxを指定した場合、2px分の行間が上下に配置されます。他の2つの方法が相対値での設定であるのに対して、単位での指定は絶対値での設定となります。数値のみで指定する場合フォントのサイズにその数値を掛けた値が適用されます。%で指定する場合フォントのサイズを100%とした場合のパーセンテージで設定します。大石ゆかりline-heightの長さには、文字自体も含まれているってことですね。値の種類によって、どのように適用されるかというのが少しずつ違うんだ。実際の例を見てみよう。class=”content1′′>此書は趣向もなく、構造もなく、尾頭の心元なき海鼠なまこの様な文章であるから、たとい此一巻で消えてなくなった所で一向差さし支つかえはない。実際消えてなくなるかも知れん。将来忙中に閑を偸ぬすんで硯すずりの塵ちりを吹く機会があれば再び稿を続ぐ積つもりである。猫が生きて居る間は――猫が丈夫で居る間は――猫が気が向くときは――余も亦また筆を執とらねばらぬ。40px;}画面では以下のように表示されます。設定した40pxからフォントの大きさ(font-sizeを指定していないためここではブラウザの標準サイズ16px)を引き、残りの24pxを上下に12pxずつ割り振っています。4;}画面では以下のように表示されます。設定した4をフォントサイズ16pxに掛けた64pxからフォントの大きさの16pxを引き、残りの48pxを上下に24pxずつ割り振っています。150%;}画面では以下のように表示されます。フォントサイズ16pxの150%である24pxから16pxを引き、残りの8pxを上下に4pxずつ割り振っています。以上、CSSのline-heightについて解説しました。行間が少し違うだけで、見え方も大きく変わります。良い見た目を作るためにも行間の調整方法を覚えておきましょう。単位の場合、数値のみの場合、%の場合の例をそれぞれ見てみたよ。大石ゆかり例えばpxなどの単位で指定したとき、フォントよりも小さい数値を設定したらどうなるんですか?田島悠介その場合は行同士が重なって表示されることになるよ。単位と数値で指定するときには注意が必要だね。大石ゆかりなるほど、気をつけます。ありがとうございました![お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。関連する記事CSSで画像に指定色の透過カラーを重ねる方法を現役エンジニアが解説【初心者向け】CSSで画像に指定色の透過カラーを重ねる方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。...CSSCSSで背景色を指定する方法を現役エンジニアが解説【初心者向け】CSSで背景色を指定する方法について解説します。CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。本記事では、これからWebデザインを勉強したいという初心者向けに「CSSとは何か」について解説します。HTMLとはの記事もあるので合わせてお読みください。...CSSすぐに使いたい!レスポンシブWebデザイン対応のHTMLテンプレート30選スマートフォンやタブレットの普及に伴って、Webサイトを多デバイスに対応することが増えてきました。その1つの解決策として、「レスポン...CSS色々な動きを表現できる!CSSのtransitionプロパティの書き方【初心者向け】CSSのtransitionプロパティを使う方法について解説しています。一定時間でプロパティを変化させ、アニメーションをつけたい時に便利です。メニューの...CSSCSSでlist-style-typeを使って箇条書きを連番にする方法を現役デザイナーが解説【初心者向け】CSSでlist-style-typeを使って箇条書きを連番にする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者...CSSあわせてよく読まれている記事CSSでline-hightを使って行間を指定する方法【初心者向け】CSS初心者向けに、line-hightを使って行間を指定する方法を解説する記事です。CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。CSSのline-hightプロパティを使用することで、文字列の行の間隔を調整することができます。間隔が狭すぎても広すぎても見にくくなってしまいますので、サイトに合わせて調整しましょう。事前準備として、HTMLファイルとCSSファイルをそれぞれ用意しました。CSSのファイルは「sample.css」にすることにします。ブラウザのデフォルトサイズを16pxとしています。自分のPCでもやってみましょう。class=”sample1′′>廣い門の下には、この男の破瓜に誰もゐない。所々丹塗の剥げた、大きた圓柱に、蟋蟀が一匹とまつてゐる。羅生門が、朱雀大路にある以上は、この男の破瓜にも、雨やみをする市女笠や揉烏帽子が、もう二三人はありさうなものである。それが、この男の外には誰もゐない。class=”sample2′′>何故かと云ふと、この二三年、京都には、地震とか、辻風とか火事とか飢饉とか言ふ災がつヾいて起つた。そこで洛中のさびれ方は一通りではない。舊記によると、仏像や仏具を打砕いて、その丹がついたり、金銀の箔がついたりした木を、路ばたにつなみ重ねて、薪の料に売つてゐたと言ふ事である。洛中がその始末であるから、羅生門の修理などは、元より誰も捨てヽ顧る者がなかつた。するとその荒れ果てたのをよい事にして、狐狸が棲む。しまひには、引取り手のない死人を、この門へ持つて来て、棄てヽ行くと言ふ習慣さへ出来た。そこで、日の目が見えなくなると、誰でも気味を悪るがつて、この門の近所へは足ぶみをしない事になつてしまつたのである。具体的に使ってみましょう。値をnormalに設定してみます。デフォルトではこの状態に設定されているので、当然なにも変わりません。ここからは、下記の3つの指定方法を紹介します。コンピューターで画像や文字を表すときの、色情報を持つ最小単位「px(ピクセル)」で設定します。下記のように記述します。ブラウザで確認してみましょう。line-heightで指定した数値から文字のサイズ(ここではデフォルトの16px)を引き、残った数値を上下に均等に振り分けます。そのため、数値が大きいほど行の間隔も広くなります。続いて、単位「em(エム)」で指定した場合の例です。emはfont-sizeプロパティで指定された大きさを1とした単位で、親要素などで指定されていない場合は1em=16pxとなります。下記のように記述します。ブラウザで確認してみましょう。こちらも指定した値が大きいほど行間も広くなります。デフォルトが16pxでしたので、2em=32px、4em=64pxで指定したことと同じです。最後に%で指定します。font-sizeプロパティで指定された大きさを100%とし、指定した%の数値で行間を指定します。親要素などで指定されていない場合は100%=16pxとなります。下記のように記述します。ブラウザではこのようになります。デフォルトが16pxでしたので、150%=24px、200%=32pxで指定したことと同じです。今回の記事は以上です。CSSをさらに学びたい場合は、CSSでfont-styleを使って文字のスタイルを指定する方法も合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。CSSfontタグの使い方!HTMLでフォントサイズを指定する方法【初心者向け】HTMLでフォントサイズを指定する方法について解説しています。初心者でも簡単にフォントサイズや色を指定できるので、ぜひ書き方を覚えておくと良いでしょう。HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。fontタグは、HTMLの要素で文字の色やサイズやフォント(書体)の種類を指定することが出来ます。文字の色は指定しない場合、黒(ブラック)になります。fontタグでは、文字のサイズを1から7までの相対的な数値で変更することが出来ます。フォントの指定とは広く書体と同じ意味で用いられるもので、美的感覚に基づき、字体を統一的にデザインした文字のスタイルのことを指します。角ばったゴシック体のフォントや細長い明朝体などがあります。文字そのものの形のデザインと言ったところです。文字の色をfontタグで指定するには、fontタグにcolorの属性を追加して値を指定します。色の指定方法には、#(ハッシュ)から始まる6桁のカラーコードで書く方法と、redやblueやwhiteやorangeというふうに直接、カラーネームを書く方法があります。カラーコードは16進数で0から9、そしてaからfまでの数値指定できます。これは2桁ずつRGB(レッド・グリーン・ブルー)という光の三原則の割合になっています。#ff0000とした場合、赤色になります。#00ff00は緑色です。文字のサイズをfontタグで指定するには、fontタグにsizeの属性を追加して1から7の値を指定します。3が通常の文字の大きさになります。文字のスタイルをfontタグで指定するには、fontタグにfaceの属性を追加してフォントを指定します。フォントは複数指定することが出来て、先頭のフォントから優先され、カンマ区切りで記述していきます。フォントを指定しても、その人の端末にフォントがインストールされていなければ、フォントは表示されないので最後の方で共通の一般的なフォントを指定するようにします。fontタグを実際に使用してみます。今回はCSSでフォントを指定する方法を説明します。フォント一つでサイトの印象が大きく変わるので、非常に重要な知識になります。実際の業務でも必ず必要になるので、覚えておきましょう。そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。フォントの変更にはfont-familyプロパティを使うよ。フォント名で指定する方法と、種類ごとに決まったキーワードによって値を指定する方法があるよ。それぞれの書き方を見てみよう。実際にCSSでフォントを指定する方法を説明していきます。フォントの指定には「font-family」というプロパティを使います。フォントの指定には「フォントファミリ名」で指定する方法と「総称ファミリ名」で指定する方法があります。フォントファミリ名での指定方法を説明します。上記のように書くことでフォントを指定することができます。フォントの指定もWebページのコーディングにおいて大事な要素の一つになります。総称ファミリ名で指定する方法では、次の5種類で指定することができます。候補としていくつか設定することができます。上記のように”,”(カンマ)で区切って複数の候補を設定することで、候補1が使えない時、候補2のフォントを適用します。候補2が適用できない時は候補3を適用し、それを繰り返します。フォントファミリ名を使ってもいいですが、候補の最後には総体ファミリ名を指定しましょう。「cursive」を指定して日本語のテキストを表示しようとすると、一部環境ではそのテキストが正常に表示されないこともあるようです。上記のように、利用者の各環境で正常に動作しないことも想定してコーディングしていきましょう。font-familyの基本の書き方になるよ。候補は複数指定することもできるんですね。次は実際にフォントを変更して、ブラウザで確認してみよう。実際にコードを書いてみましょう。p.font2{CSSCSSでfont-weightを使って文字の太さを指定する方法【初心者向け】CSS初心者向けに、font-weightを使って文字の太さを指定する方法を解説する記事です。CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。CSSのfont-weightプロパティを使用することによって、文字の太さを指定することができます。文字を目立たせたい場合なのに使いましょう。事前準備として、HTMLファイルとCSSファイルをそれぞれ用意しました。CSSのファイルは「sample.css」にすることにします。自分のPCでもやってみましょう。具体的に使ってみましょう。基本となるnormalとboldを使います。下記のように書くことができます。normalは通常の太さで、初期値はこれに設定されています。boldに値を設定すると太字になります。ブラウザではこのように表示されます。続いて、文字列を3行にしてそれぞれの数値で文字の太さを指定してみます。HTMLファイルはこのように3行に変更します。CSSは下記のように数値で指定します。数値で指定した場合の種類は100/200/300/400/500/600/700/800/900の9段階ありますが、実際にはブラウザで2種類のみで設定されていることが多く、画面上でも一番下の800のみが太字で表示されています。親要素に指定された形式よりbolderは太く、lighterは細く表示されます。具体的には下記のように記述しましょう。bodyでまず全体を太字に設定している点にご注意ください。ブラウザではこのように表示されます。1行目はinherit(親要素を継承)したので太字です。2行目はbolderで親要素よりも太くなるように指定されていますが、先ほどと同様フォントにそれ以上の太さが用意されていないため、画面上では1行目と同じになっています。3行目は親要素のboldよりもlighterで細くなるように指定され、通常の太さに変化しています。今回は3種類を紹介しましたが、用途に応じて使い分けてください。CSSの基礎をさらに学びたい場合は、CSSでfont-familyを使ってフォントを指定する方法も合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。CSSおしゃれに見せよう!WordPressのフォントを変更・カスタマイズに便利なプラグインまとめWordPressのプラグインにはコードなどを編集せずに直感的操作でフォントデザインを変えることのできるものが存在します。公式や個人で配布されている各種テーマをインストール・有効化した後で、フォントの大きさや種類などを更に細かく設定したい時などにも役立ちます。ここでは、「テーマの編集」メニューなどを使わずにWordPressのフォントやサイトデザインを調整することのできるプラグインを紹介していきます。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。WordPressの管理画面ではなく、サイトを表示させたままの状態で上の管理バーからフォントの変更をすることができるプラグインです。手描き風の文字など独特なデザインのフォントを使用することができます。デフォルトで使用できるフォントは英語対応のものばかりですが、TTFやOTF形式のファイルを自分でアップロードして利用することもできるので日本語サイトでも活用することができます。Font同様、サイトを表示させながらフォントの調整ができるプラグインです。フォントの種類・太さ・色・イタリック表記や打ち消し線などの一通りの設定もここで変えることが可能です。Undo・Redoなどの編集時に便利な機能もショートカットやメニューアイコンで操作できるのでじっくりデザインにこだわりたい人にもおすすめです。スマホやタブレットでサイトを表示させた場合のプレビューが見れるのも特徴です。アニメーションなどの追加機能がついた有料版もあります。このプラグインをインストールすると、WordPressの管理バー「カスタマイズ」からフォントの編集ができるようになります。見出し1~6それぞれを別々のフォント設定にすることも可能なので、各テーマデフォルトの見出し表示を好きなものに変えたいときにも便利です。フォントの大きさや種類の他にline-heightなども操作することができるのでサイトデザインの調整に役立ちます。以上、フォントをカスタマイズできるプラグインを紹介しました。フォントの種類を知っている人はなかなかいないですし、一つずつ確認しながら好きなフォントに変更したいところ。サイトなどで調べながら行うとどうしても時間がかかってしまうので、プラグインを活用しましょう。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。WordPressHTML+CSSでフォントサイズをpxで指定する方法を現役デザイナーが解説【初心者向け】HTML+CSSでフォントサイズをpxで指定する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。HTMLの書き方について解説した記事を読むとさらに理解が深まります。本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。webサイトの文字のフォントサイズを変更する場合には、HTMLファイルのタグに記述されたテキストをCSSファイルの方で大きさの指定をしていきます。CSSでフォントサイズを指定しない場合には、それぞれの各ブラウザごとに決められているフォントサイズの大きさでwebサイトに表示されるようになります。Pタグ内に記述された文字テキストを一括してフォントサイズ指定する場合にはCSSファイルではPタグに対して適宜の大きさの値を指定します。ファイルの方でセレクタで指定し、プロパティの値を表示したい数値にするとwebサイトに表示されるようになります。フォントサイズの大きさ指定をする場合には単位の違いを把握する必要があります。pxはピクセルでの指定が出来るようになります。pxで指定した場合には基本的にどのブラウザでも同じpx数値で表示されます。ブラウザの標準のフォントサイズに対する比較値で大きさを変更させる場合は%を使用します。InternetExplorerやSafariなどのブラウザは標準が16pxなので値を100%と記述した場合は、フォントサイズは大きさ指定をする前と変わりませんが、62.5%とした場合(10÷16=0.625)にはフォントサイズは10pxで表示されます。コンテンツ内の親要素に対する比較値で大きさを指定する場合にはemを使用します。emは全体的に文字サイズを修正したい場合にも、親要素のフォントサイズを変更するだけでemで指定している子要素のフォントサイズの変更もされるため、利用しやすい単位です。似たような単位にremがありますが、こちらは親要素に対する比較ではなくルート要素であるHTMLファイル自体のフォントサイズに対する比較値で大きさを指定することが出来るようになります。絶対値の単位はミリやセンチによる指定が出来ますが、基本的には使われません。TechAcademyの現役メンター。現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。CORPORATION.。