全国5万人が受講している「サイタ」

ホームページ作成・作り方講座

ホームページ作成・作り方講座を選ぶ

初回60分無料体験OK

まずは60分の体験レッスンからスタート。
無料で実際のレッスンを体感できます。

月々4,900円〜の低料金

先生ひとりじめの個人レッスンを、この価格でご提供。レッスンは全てプライベート形式の60分間です。

通わない月は0円

曜日と時間を選べるので、
無理なくマイペースに通えます。

詳しくはこちら

Web・デザインスクールホームページ作成講座東京 初心者歓迎ホームページ作成講座 スクールブログ まずは基本的な...

まずは基本的な物だけ覚えよう!CSSのセレクタに関して。

今日は、よく使うCSSのセレクタに関してです。
CSS3の登場で、非常に多くの、有用なセレクタが出てきて、とっても便利になりました。
とはいえ、一気に覚えるのは大変なので、まずは基本的な物を覚えていきましょう。
基本的なセレクト方法だけでも、工夫する事で大体のホームページは作れます。


■-□-■-□-■-□-■-□-■-□-■
まずはこの5つを覚えよう
■-□-■-□-■-□-■-□-■-□-■
1.タイプセレクタ
2.IDセレクタ
3.classセレクタ
4.子孫セレクタ
5.複数セレクタ

まずは、この5つを使える様にしましょう。
長くなってしまうので、子孫セレクタと複数セレクタは、別の記事で紹介します。


■-□-■-□-■-□-■-□-■-□-■
タイプセレクタ
■-□-■-□-■-□-■-□-■-□-■
HTMLのタグを、直接セレクトするのに使います。

例)
HTML
<p>テキストテキスト</p>

CSS
p{
color:red;
}

もっとも単純で解りやすいセレクタです。


■-□-■-□-■-□-■-□-■-□-■
IDセレクタ
■-□-■-□-■-□-■-□-■-□-■
HTMLのid属性に記述した内容をセレクトするのに使います。

例)
HTML
<p id="idSelector">テキストテキスト</p>

CSS
#idSelector{
color:red;
}

id名の前に、「#」を付けて記述していきます。id名は、自由に決められますが、
半角の英数字で記述する、又数字で初めてはいけないというルールがあります。
また、id名は、同一のhtmlファイルで重複してはいけないというルールもあります。


■-□-■-□-■-□-■-□-■-□-■
CLASSセレクタ
■-□-■-□-■-□-■-□-■-□-■
HTMLのclass属性に記述した内容をセレクトするのに使います。

例)
HTML
<p class="classSelector">テキストテキスト</p>

CSS
.classSelector{
color:red;
}

class名の前に、「.」を付けて記述していきます。
idと違って、class名は同一のhtmlファイルの中で、何度でも使う事が出来ます。


■-□-■-□-■-□-■-□-■-□-■
まとめ
■-□-■-□-■-□-■-□-■-□-■
CSSのセレクタは、CSS3の登場で、とても沢山増え便利になりました。
ただ、その分習得するのが大変になっています。
まずは、基本的なセレクタを覚えましょう。


■-□-■-□-■-□-■-□-■-□-■
今日の出来事
■-□-■-□-■-□-■-□-■-□-■
先日、用事があって実家に帰ってきました。
久しぶりに友人に会ったり、家でまったりしたり、
のんびりと休日を過ごせました。

それではまた☆

■-□-■-□-■-□-■-□-■-□-■
石川健太(イシカワケンタ)
無料体験はこちら

記事の一覧ページはこちら

こちらでも、webサイト制作に関しての情報を書いています。
webサイト作成方法の紹介ページ
■-□-■-□-■-□-■-□-■-□-■

 

(2014年10月3日(金) 0:10)

前の記事

次の記事

この記事を書いたコーチ

250名以上の生徒を指導!テキスト通りにいかないケースも論理的に説明

初心者歓迎ホームページ作成講座
石川健太 (ホームページ作成)

新宿・新大久保・高田馬場・目白・池袋・初台・幡ヶ谷・笹塚・明大前・下高井戸・桜上水・...

ブログ記事 ページ先頭へ