Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

CSS セレクタ / 解説してみた

[更新:16-05-18]

"参考" + " 和馬の説明 " で、CSSのセレクタを説明してみました。

 

[via] CSS Syntax and Selectors/ CSS Tutorial  --- w3schools.com

   CSS Syntax and Selectors

[via] Selector/ CSS2.1 --- W3C

   Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

 

 

 

CSSの構文*1とセレクタ*2

CSS の 構文

 CSS*3とは、html文書にスタイル(色・フォントサイズなど)を付加する為のスタイルシート言語であり、以下のように書き表します。

   

 

              セレクタ 部分     {                      宣言 部分                       }

 

[例]                   h1                 {     color:  blue;       font-size:  12px;      }

                     HTMLの部分           カスタマイズの詳細

 

 

 

セレクタ

   セレクタとは、HTMLの部分(要素など)を指定する記述の事です。

HTMLのカスタマイズしたい部分を、セレクタ部分(左側)で指定し、宣言部分(右側)で、具体的にどの様にカスタマイズするかを記述します。そうする事によって、指定した場所のフォントサイズや色など、HTMLの様々な部分をカスタマイズする事ができます。

 

 

セレクタの種類

 HTMLを指定する記述(セレクタ) には、様々なパターンがあります。非常によく使われる基本的な記述パターン(セレクタの種類)は、以下の4つです。

   ❶要素セレクタ*4

   ❷idセレクタ  

   ❸classセレクタ  

   ❹グループ化セレクタ*5

                 ______

❶要素セレクタ

    [ 例 ]

body{font-size: 15px; }
 
 
❷idセレクタ

   [ 例 ]

#kazuma1{font-size: 15px; }
 
 
 
❸classセレクタ

    [ 例 ]

.kazuma1{font-size: 15px; }
 
 
❹グループ化セレクタ
 
 
p, h1{font-size: 15px; }
 

 

 

この他にも沢山の種類のセレクタがあります。数が多く抽象的な記述になっていますので、先に全部覚えるよりは、実践しながら身に付ける方が分かりやすく、また覚えやすいかと思います。

幾つぐらいあるのか等気になる方は、以下のサイトをご参照下さい。

 

   ●w3schools --- CSS Selector

      http://www.w3schools.com/cssref/css_selectors.asp

   ●W3C --- CSS規格化団体/ 公式文書(CSSの仕様書 )

     http://www.w3.org/TR/2011/REC-CSS2-20110607/selector.html#q5.0     

 

 

 

 

実行してみた

僕もw3sさんの様に、実行画面を追加してみましたw ₍₍(꒪່౪̮꒪່)⁾⁾✨♪

See the Pen zqbPye by Kazuma Tojo (@Kazumax) on CodePen.

 
 
 
 

投稿後記

もう少しCSS等に馴染んでからの方が良かったかしら…( ¯∀¯٥)w いざ説明してみると、理解が曖昧な部分があったりして、中々に難しかった。

 

また、コンピューター・サイエンスとも関連する部分のようで、抽象的な内容であり・仕様書も決して分かりやすい説明とは言い難かった。その為か、「セレクタとは"何"か」をきちんと解説している日本語サイトはほとんど無かった。

 



セレクタとは、HTMLの部分を指示する記述の事であり、パターンである。自分の言葉で再定義してみました®

これは仕様書には明記されていたが、開発者向けの文書の為か、少し書き方が分かりにくかった印象。selectorの分かりやすい説明が少ないのは、そのせいもあるのかしら。。

 

 

 

 

 一見は、百聞より多くを物語る

   又、w3schoolsさんも、チュートリアルの最初に書かれていたのだけれど、「100の説明よりも1つの具体例の方が分かりやすい」という事を身に染みて感じた。言葉で説明すると、かえって難しくなってしまう事もあると実感。納得しました⁉︎( ˙◊˙◞ )◞💡

 

 

 

 

解説するという事

 当たり前っちゃ当たり前だけれど、解説するという事は、"それ"を知らない人に、"それ"を理解できる様に教えるという事。当然だか"それ"について知識を持たない人に、"それを"説明するという事。 

 

 

  ●語彙を正確に使う

  ●一文を、意味がスッと理解できる様に書く

  ●ムダな説明・冗長性の高い説明は避ける

  ●なるべく日常的な言葉で説明する

 

事が重要だと感じた。自分が「分かりやすい」と感じる解説は、上記の4つが満たされている事が多い気がする。

もっと…セツメイガ    ワカリヤスイ   

サウイフモノニ   ワタシモナリタヒ…。。::(っ`ω´c)::💦

  

 

 

*1:Syntax

*2:Selector

*3:Cascading Style Sheet

*4:Element Selector

*5:Grouping Selector

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️