はじめてのHTML&CSS入門

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
装飾するためのプロパティを学んでいきましょう。まずは文字を装飾してみましょう。
講師:
06:08

字幕

このレッスンではテキストの装飾方法について学びます。チャプター3、レッスン5のファイルを開きます。style.css の中身を見てみましょう。既に body というセレクターがありfont-family というプロパティそして、なんだか長い値が入っています。これは body という全体を包んでいる要素ですね。なので、全体に指定する時はbody というセレクターを使います。そして font-family とは書体のことです。文字の書体を複数指定することができます。この様に「Verdana」「Arial」そして「ヒラギノ角ゴ」「メイリオ」最後は「sans-serif」といって髭のないゴシック体を指定するような指定の仕方です。この様にフォント名を正確に指定しなければいけませんので基本的にはコピー&ペーストで正確に記述することを求められます。また、英語のフォントと日本語、和文のフォントを同時に設定できることも覚えておきましょう。このことにより英語は英語フォント日本語は和文フォントという風に書体を指定することができます。しかし、閲覧する方の PC にそのフォントファイルが入っていないとフォントがでません。 ですので、複数フォントを指定してできるだけ閲覧者が見やすいというフォントを選んであげましょう。それでは、この下にh1 というセレクターを書いて新しい装飾を定義していきましょう。{ font-size です。font-size そして単位は基本的にはpx で指定していきます。px の他にも em という一文字分という指定方法であったり%という相対指定も使用することができますが最初は px で統一して指定をしていきましょう。これで h1 は文字が大きくなっているはずですので確認をしてみましょう。上書き保存をしてHTML に行きコンテキストメニューからOpen in Browser を実行します。そうしますと、h1 の部分が32px になっています。それでは Sublime text に戻ります。style.css を開いて今度は h2 というセレクターを作り{ そして新しいプロパティfont-weightというものを記述します。font-weight は書体の重さですがこれは太字関係を扱うプロパティです。ここに normal と打ちましょう。そして上書き保存そしてアプリケーションの切り替えMac では Command+TabWindows では Alt+Tab です。 ブラウザーを選びブラウザー上で Command+RWindows では Ctrl+R を押してブラウザーを更新そうしますと h2 が太字からノーマルな状態になりました。h2 を使うとブラウザーが自動的に太字にしてしまうのをスタイルシートでノーマルの状態に戻すといったふうに装飾しました。では Sublime text に戻ります。更にセレクターを増やします。今度は子孫セレクターID main の中の em をfont、今回も font-weight を打ち込みます。ただ、値の方をbold と入力をします。そして、もう一度改行をしてfont-styleそして :そして normal と打ち込みましょう。この様に CSS は ; の後ろで改行をして複数のプロパティを設定することができます。ではどのようになったかブラウザーで確認してみましょう。Command+S で上書き保存そしてアプリケーションの切り替えでブラウザーに行き現在の em を確認しておきます。この「世界中から寄せられたクチコミ」がちょっと斜体になっています。このエリアがブラウザーが解釈して斜めになってしまっています。これを Command+RCtrl+R でブラウザーの更新すると太字になり斜めではなくなりました。 またスタイルシートに戻ります。この font-weight: bold はノーマルの書体のものを太字にする命令です。そして、font-style は斜めになっているものオブリークやイタリックといった斜めの書体をノーマルな状態に戻すという命令行っています。この様に font-family、size、weight、style は非常に使用頻度が高いので是非覚えておきましょう。このレッスンではテキストの装飾について学びました。

はじめてのHTML&CSS入門

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

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

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

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

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