はじめてのHTML&CSS入門

基本的なセレクタ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSはHTMLを装飾する言語ですので、HTMLを特定(セレクト)する必要があります。まずは基本なセレクタである、タグ・クラス・IDセレクタをご紹介します。
講師:
05:24

字幕

このレッスンでは、CSS のセレクタの種類について学びます。それでは、チャプター3レッスン3のファイルを開きます。ファイルは2つあります。まず、スタイルシートのファイルとHTMLのファイルです。まず、index.html の中身を見ていきます。CSS の適応の仕方に外部ファイルを使っています。このファイルの指定方法が一般的でなぜならば、HTML は文章の構造をCSS では装飾をコントロールするという風に役割を分離できるからです。それでは、CSS の方を開きましょう。まず、タグセレクタという書き方を実践します。H1、そして { 、改行してcolor 、そして:、redこれで H1 を赤にするという命令が成り立っています。なぜ、タグセレクタというかそれは、この H1 が そのまま H1 タグと関連しているからです。なので、P タグの色を変えたい場合はp という風にセレクタを変えてあげるとOK です。それでは、class セレクタを変えてみましょう。クラスのセレクターは .(ドット)から始まります。.text 、半角スペース、{ 、改行そして色の指定、color 、:そして#009900これは真ん中の数字が上がっているのでグリーンになります。 さて、この class セレクタはtext と打ちましたけれどもこれはタグではないです。これは自分の好きな単語を付けることができます。ただし、頭に数字であったり、記号を含めることはできませんので英語から始まるようにしましょう。そして、HTML の方を見てみます。HTML の方に p class text という部分があるかと思います。ここに class とはっきり書いていますね。これは、クラス属性としてp タグに含めることでCSS のクラスを呼び出すことができます。なので、CSS 側にclass text と書いてあるだけではこの色味を付けることができずHTML のほうでクラスを呼び出す必要があります。そして、このクラスは何回も使いまわすことができますので下に p のほうにもclass text と書いてありますしもし、H4 というタグがこの後ろにあった時にそのH4の中身に class text と書けばやはり、その H4 も変えることができたりします。そして、最後、ID セレクタを学びましょう。ID セレクタは#ハッシュと打ち込みましてfooter と打ち込みましょう。そして、{ 、そしてここでは新しいプロパティfont-size と入力しておきましょう。 これは、読んで字のごとく文字の大きさを司るプロパティですので値の方は 10 ピクセルと入力をしておきましょう。ID セレクターは HTML の方でこのようにセクションに付いている ID名前と対応しています。フッターですので、フッターはID footer と付いていますね。なので、この ID footer の内側にスタイルを設定することができます。スタイル CSS を記述したら必ず、上書き保存command+SWindows では Ctrl+S を押してHTML で右クリック、コンテキストメニューを開いてOpen in Browerそしてブラウザを見てみるとまず、H1が redそして、クラスが付いたテキストが緑そしてフッターの中にあるテキストが10ピクセルというふうに他のものよりも小さくなっているということが確認できました。このように3種のセレクターを使うことで柔軟にスタイルを適応させることができます。このレッスンでは3種のセレクタについて学びました。

はじめてのHTML&CSS入門

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

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

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

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

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