はじめてのHTML&CSS入門

文字に関するプロパティ2

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
行間など、文章を読みやすく整形する方法を学びましょう。
講師:
04:37

字幕

このレッスンでは、テキスト全体に関わる装飾について学びます。それでは、チャプター3レッスン6のファイルを開きましょう。レッスン6の style.css の中には 既に body に関するスタイルが入っています。この続きにセレクタを書いてスタイルを定義しましょう。ID main の中の pそして命令であるプロパティはletter_spacing というスタイルを打っていきたいと思います。そして値には3ピクセルと入力してみました。それでは、上書き保存をします。Command+S、Windows では、Ctrl+S です。では、HTML の方に移動してまず、スタイルがかかる場所をチェックしましょう。ID main そしてその中の p になります。では、コンテキストメニューを開いてブラウザで見てみましょう。ブラウザの方では main の p はこの位置です。letter_spacing は、文字と文字の間の隙間です。なので、全体的に文字の隙間が広がっているのが分かるかと思います。それでは、Sublime text に戻ります。そして、style.css の中に更に定義を進めていきましょう。今度は、ID footer の中の p というセレクタを書いてプロパティは text-alignそして値は right と書きましょう。 text-align は行揃えを制御します。では、結果を見てみましょう。Command+S で上書き保存してCommand+Tab でアプリケーションの切り替えを行ないます。ブラウザに移動してここで、Command+R もしくはCtrl+R でブラウザを更新しましたらこのように footer の中にある p の中の文章が右揃えになりました。それでは、Sublime text に戻ります。他にも、right とではなく center と入れてみましょう。また、Command+S で上書き保存してアプリケーションを切り替えそしてブラウザを更新そうすると、ブラウザ全体の中央揃えになります。また、Sublime text に戻ります。そうしましたら、body のセレクタの中にもう1個プロパティを加えていきます。ここで、改行を打ってline-hight と打ちまして値は、1.7 と入力しました。また、上書き保存アプリケーションの切り替えそしてリフレッシュを行ないます。そうすると、すこし文字の間隔行の間隔が広がったと思います。これが、line-hight による行の高さの制御です。Sublime text に戻ります。 この1.7というのは、1.7 倍ということです。なので、長い文章を読む時に行間が詰まっていると非常に読みづらいのを1.7 倍を2倍にすることによって行の間を広げて読みやすくする効果があります。今回は、body に入力することによって全体の行間を制御してみました。このレッスンでは、テキスト全体の装飾について学びました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

3時間35分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月26日

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

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

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