HTML入門トレーニング

テキストを制御する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSを使って、テキストを制御する方法について学びます。
講師:
11:06

字幕

このレッスンでは、CSS を使って タイポグラフィ テキストを制御する方法について学びます 現在コードエディターで サンプルファイルのHTML を 開いているところです HTML の中には、h1 見出しや p 段落で、長いテキストがはいっています そしてHTML の上を見ると すでに style 要素を使って body 要素に対して いくつかの style が設定されています この中身を見てみましょう width プロパティは 幅を指定するプロパティです ここでは 70% に指定されています margin は 0、auto と書いてあります これはよくわかりませんね 実際にブラウザで確認してみましょう ブラウザに切り替えました 先ほどの、幅 70% という指定は このブラウザ・ウィンドウの幅に対して 70% の幅で body 要素 つまりページ全体を表示する、という指定です そのためブラウザ・ウィンドウの幅を縮めると 中身の body 要素についても 表示の幅が 70% に縮まります コードに戻りましょう 先ほど、よくわからなかった この margin というプロパティは body 要素に対する margin つまり、周りの空白を指定するプロパティです そして、0 スペース auto と書かれているのは この margin が ショートハンド・プロパティと呼ばれる 特殊なプロパティだからです ショートハンド・プロパティでは 複数のプロパティを 一括して指定することができます ここで 0 auto と指定しているのは 別々の箇所の margin を指定しています まず一つ目の値 0 は 上下の margin です 上下の margin は 0 という 指定になっています そして半角スペースを空けて もう一つの値を指定すると こちらの auto という値は 左右の margin になります この場合 auto を指定すると 左右に同等の margin を作り つまり、全体をセンタリングする という指定になっています さて、それではこのウェブページの中の テキストに対して style を設定していきましょう まずは h1 要素に対しての style です h1 要素の、要素に対して style を適用するには このように h1 と記述し とくに山形括弧は必要ありません 波括弧でルールを囲います プロパティと値を指定していきましょう 最初はこの h1 という要素が どのようなフォントで表示されるかを指定する font-familyプロパティの指定です font-family プロパティは font ハイフン family と記述します ここで指定した font を使って h1 要素が表示されるようになります フォントの名前はここでは Georgia と記述しましょう この Georgia フォントが 入っている環境では この h1 要素は Georgia フォントで表示されます しかし、この Georgia フォントが 使っているシステムに インストールされていない場合 その場合は別のフォントに 置き換えて表示されてしまいます これは閲覧する環境に依存します つまり、製作者のマシンに この Georgia という フォントが入っていても 見ている人の環境に この同じフォントが無い場合は フォントは適用されません そのため、このように font-family でフォントを 指定する場合は いくつかのフォントと 代替フォントを指定するのが良いでしょう 代替フォントを指定するには カンマで区切って もう一つのフォントの名前を入力します ここでは Times New Roman というフォントを指定してみましょう Times New Roman そして、このように フォントの名前にスペースを含む場合は 名前全体を ダブル・クォーテーションでくくります フォントの名前の中にスペースが無い場合は ダブル・クォーテーションは不要です さらに Georgia も Times New Roman も 入っていない環境のために serif という文字を入力しておきます この serif というのは serif というフォントを 指定しているわけではなく serif 体を指します 日本語では、いわゆる明朝体 と同じようなものだと 考えていただいてかまいません この指定では、まずユーザーの環境に Georgia フォントを探し そのフォントがあれば Georgia フォントで もしそのフォントが無ければ Times New Roman で Times New Roman も無ければ serif 体 つまり、そのユーザーが使っている システムのデフォルトの serif 体で そのようなフォントで表示する という指定になります このように font-family プロパティを使うときは 必ず何らかのフォントで 置き換えて表示されるように フォントのフォールバック 代替フォントを指定することを 忘れないようにしましょう 続いて、フォントの大きさを指定します フォントの大きさは font-size プロパティで指定します ここでは 2em という値を指定します この em という単位は どういう単位でしょうか この em は 1em が一文字の 大きさという意味になります そのため、ここでは 二文字分の大きさで h1 要素を表示する という指定になっています ここではピクセルという単位を 使うこともできますが あえて em という単位を使っています em のように相対的なフォントサイズでは デスクトップから スマートフォンのような小さなデバイスまで 様々なデバイスで相対的に フォントサイズを指定することができ デフォルトのフォントサイズがどうであれ とにかく二倍のフォントサイズで 表示するという 非常に相対的な指定ができるようになります 続いて font-weight つまり、フォントの太さプロパティを normal さらに font-style プロパティを使って フォントの表示方法を italic 斜体に設定します CSS ではこのように様々なプロパティと 値を同時に適用することができます 実際に保存して ブラウザで確認してみましょう リロードすると、この h1 の部分に 先ほど指定した italic などが 適用されていることがわかります さて、続いて他のテキストについても style を設定していきましょう 現在コードエディタが 自動的にフォーマットをかけ style はプロパティの部分が このようにインデントされていますが これは必須ではありません 次に指定するのは p 要素です p 要素に対してフォントを 指定していきましょう ここでは先ほどと同じように font-family プロパティを使って 今度は Arial, Helvetica といったフォントを指定していきます これらのフォントが インストールされていない環境では 最終的に sans-serif ゴシック体で表示されるように 指定をしておきます 続いて font-size、 こちらは 1em デフォルトのフォントサイズの 一文字分の大きさにします さらに line-height これは行の高さを指定するものです ここでは 1.6 としましょう このように line-height プロパティでは 単位を省略して設定することもできます 続いて text-align これは行の整列の仕方です ここでは justify と設定して 両端が揃うように設定しましょう そして CSS のセレクターの後の 波括弧は ルールが始まる前に波括弧を付けたら ルールが終わった後には もう一つ波括弧を入力します これで一つのルールが作成できました 保存し、ブラウザに切り替えて リロードすると 先ほどとは異なって、少し段落が余裕を持って 美しく表示されるようになりました コードに戻ります このように一つ一つの要素に対して フォントを指定していけば フォントを変えられることがわかりましたが 全ての要素に対してこのように プロパティを指定していくのは大変ですよね そのため、まず、body 要素に対して フォントを指定すると body 要素以下の全ての要素に対して フォントが指定されることになります ここでやってみましょう ここでは font プロパティを使います font プロパティは冒頭で紹介した margin プロパティと同様で ショートハンド・プロパティと呼ばれる プロパティです 様々なフォント関連のプロパティを 一括して指定することができます 例えば、まずサイズ、そして、フォントです このように、他の箇所では font-family プロパティや font-size を使って 別々に指定していたプロパティを font プロパティでは一括して 指定することができるのです ここでは Helvetica そして最後に sans-serif というように font-size と font-family を 一括して指定しました こうすることで body 要素全体 それ以下の要素には全て この指定が適用されることになります こうすることで、この p 要素に対する 指定は必要なくなりました 100% という指定は 1em と同じことですので この font-family と font-size の指定は この body 要素での指定と かぶっていることになります このプロパティと値は削除しておきましょう 保存し、ブラウザでリロードすると 先ほどと見た目は変わっていませんね このようにして、CSS の プロパティとその値は 一度指定したものをもう一度別の箇所で 上書きすることもできます ここでは全体に対して 100% のフォントサイズや Arial, Helvetica, sans-serif という フォントが指定されていますが h1 要素にはGeorgia, Times New Roman, serif が指定されていますので、 h1 要素のみ、 この font-family、 あるいは font-size、 2em というフォントサイズで 表示されることになります このレッスンでは、CSS を使って タイポグラフィ、テキストを 制御する方法について学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。