サイタ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)

前の記事

次の記事

目的・種類別にホームページ作成・作り方講座を探す

新着記事

今日はCMSに関して書いていきます。 一般的に、ブログの更新の様に、HTMLタグを知らなくても、 ホームページを更新していく事が出来る仕組みを、CMS(コンテンツマネジメントシステム)と呼びます。 企業が独自で開発したもの、有料の物、無料の物、色々あります。 現状一番人気で、世界的...

今日は、CSSの子孫セレクタと複数セレクタに関してです。 特に子孫セレクタは、HTMLのツリー構造をしっかり理解していないと、 使いこなす事が出来ないので、しっかり練習しましょう。 ■-□-■-□-■-□-■-□-■-□-■ HTMLのツリー構造とは? ■-□-■-□-■-□...

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

今日は、CSSの文法に関してです。 ルールをきちんと覚えてしまえば、さほど難しく無いので、是非覚えましょう ■-□-■-□-■-□-■-□-■-□-■ 「何に」、「何を」、「どうするか」 ■-□-■-□-■-□-■-□-■-□-■ CSSは、無理矢理日本語に翻訳するなら、 ...

今日は、HTMLの初心者が一番最初につまずきやすい、パスに関して書いていきます。パスにも、いくつかの種類がありますが、今回は、基本となる相対パスに関して書いていきます。 HTMLで画像等の外部ファイルを読み込むときは、「パス」という考え方をしていきます。 この「パス」の考え方は、HTM...

レッスン無料相談窓口のご案内

サイタでは、ホームページ作成レッスンに関する疑問に
専門カウンセラーがお電話にてご案内しております。
お気軽にご利用ください。

お電話相談窓口はコチラ

ブログ記事 ページ先頭へ