HTML入門トレーニング

インラインスタイルを作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
インラインスタイルを使って、特定の要素にスタイルを適用する方法について学びます。
講師:
04:46

字幕

このレッスンでは、 インラインスタイルを使って 特定の要素に対してスタイルを 適用する方法について学びます。 画面では、コードエディターで サンプルファイルのHTMLファイルを 開いているところです。 ご覧のように、 これは非常にシンプルなファイルです。 要素の中には、二つの要素があります。 の見出しとの見出しです。 これだけです。 そして、実際に、この要素に対して インラインスタイルでcssを記述していきます。 インライン要素とは、HTMLの中に 直接スタイルを書き込むことです。 通常のcssと違って、スタイルを適用したい 要素に直接スタイルを記述していきます。 ここでは、この要素、この要素に対して インラインスタイルを適用していきましょう。 インラインスタイルを記述するためには、 HTMLのタグの属性に 「style」という属性で値を指定します。 値の中には、cssのプロパティと値を指定します。 ここでは、どのようなプロパティがあるのか、 あるいはどのような値があるのか、 ということは覚えなくても構いません。 実際に、この要素に 文字色を指定してみましょう。 文字色を指定するには、 「color」プロパティを使います。 プロパティの名前の後には、 記号の「:」を入力します。 「:」の後に、 このプロパティに対する値を入力します。 ここでは、赤色にしたいので 「red」と文字を入力し、 最後に「;」を入力します。 このように、cssのプロパティを 記述するときは値の後ろに「;」、 そして、プロパティと値の間に 「:」を入力する、これがルールです。 一旦保存して、 ブラウザーで確認してみましょう。 このように、二番目の 見出しに対して文字色が赤、 このようなスタイルが適用されています。 他にもスタイルを適用してみましょう。 コードエディターに戻って 複数のプロパティを適用する場合は、 この「;」の後に 別のプロパティを宣言します。 ここでは、フォントの太さを定義するため、 「font-weight」という プロパティを使います。 プロパティの後には「:」、 そして値は「normal」、 これは、フォントの太さは通常の 太さになるように、という指定です。 値の最後には「;」を入力し、保存、 ブラウザーに切り替えて表示します。 すると、先程と比べて、 このの見出しの部分が太字ではなく 通常の太さで表示されて いることがわかります。 このように、インラインスタイルを使うと、 このように非常に簡単に スタイルを適用することができます。 では、cssはこのように書いていけばいいのか? と思うかもしれません。 しかし、想像してみてください。 このようにインラインスタイルで スタイルを指定する場合、 HTMLの要素に、直接スタイルを 一つ一つ指定しなければいけません。 そのため、同じようなの見出しが 他にも20ページあったらどうでしょうか? ここで書いたスタイルを20ページ全てに コピー&ペーストしなければいけない、 そういう状況になってしまいます。 つまり、インラインスタイルは、一般的に、 様々なウェブページに対してスタイルを 適用するためにはあまり適さない方法です。 効率面でも、 あまり効率が良いとはいえません。 しかし、このように、HTMLに対して 直接スタイルを指定できる、ということは、 一つのメリットもあります。 例えば、動的に動作するウィジェットに スタイルを適用したい時など、 既にcssが書かれている環境に対して 少しだけスタイルを上書きしたい、 そのような時には、 インラインスタイルを使うのが便利です。 しかし、先程述べたように、一般的に、 ウェブページでスタイルを記述していく時は あまり使われない手法である、 ということを覚えておきましょう。 このレッスンでは、 インラインスタイルを使って 特定の要素に対してスタイルを 適用する方法について学びました。

HTML入門トレーニング

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

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

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

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

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