カテゴリー

  • Tech
  • 英語学習
  • セブ島・留学準備
  • キャリア
  • Kredo
KredoのIT留学
スタッフ募集中
留学体験談
無料相談はこちら
セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」
  • TECH Tech
    • Web・プログラミング

      Web・プログラミング

    • テクノロジー

      AI・テクノロジー

  • ENGLISH 英語学習
    • 英語学習法

      英語学習法

    • 英語表現・フレーズ

      英語フレーズ

  • STUDYABROAD セブ島・留学準備
    • 語学留学

      語学留学

    • IT留学

      IT留学

    • セブ島情報

      セブ島情報

  • CAREER キャリア
    • ITキャリア

      ITキャリア

    • 転職・海外就職

      転職・海外就職

    • インタビュー

      インタビュー

  • KREDO Kredo
    • ニュース・キャンペーン情報

      ニュース・キャンペーン情報

    • CEO・STAFFブログ

      CEO・STAFFブログ

    • IT×英語留学体験談

      IT×英語留学体験談
      [Kredo公式サイトへ]

5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • Tech
  • Web・プログラミング
  • CSSで使われる「#」「>」「$」などの意味とは?使い方とあわせて完全網羅

CSSで使われる「#」「>」「$」などの意味とは?使い方とあわせて完全網羅

太田 ヨウタ
太田 ヨウタ
公開日:2019.12.24
更新日:2021.03.04
Web・プログラミング |
  • ツイート
  • シェア
  • はてな
  • ポケット
 loading
少女

CSSで使われる記号の意味が知りたい

少年

#や>、$以外にも使われる記号はある?

こんな疑問、要望に答えるべく、CSSで利用される記号の意味について解説する記事です。

CSSで利用される記号は多く、ここではよく利用される記号はもちろん、普段目にすることがあまり多くない記号まで含めた9つの記号の意味を解説します。

あわせて、記号の意味を知るためにCSSセレクタの基本も覚えておいたほうがよいでしょう。

記号以外のCSSセレクタで使われる擬似クラスや疑似要素も紹介していますので、ぜひご覧ください。

記事のもくじ

  • 記号の意味の前にCSSセレクタの基本を知る
  • 頻出するCSSで使われる記号の意味
    • 「,」(カンマ)の意味
    • 「.」(ドット)の意味
    • 「#」の意味
    • 「*」の意味
    • 「>」の意味
  • 他にもあるCSSで使われる記号の意味
    • 「+」の意味
    • 「~」の意味
    • 「$」の意味
    • 「&」の意味
  • 記号以外のCSSセレクタの意味の一例
    • 「:link」の意味
    • 「:visited」の意味
    • 「:hover」の意味
    • 「::first-letter」の意味
  • まとめ:CSSで使われる記号には明確な意味がある

記号の意味の前にCSSセレクタの基本を知る

CSSで使われる記号の意味を解説する前に、CSSセレクタの基本をおさらいしましょう。 CSSセレクタとは、CSSのスタイルを適用する要素を選択するための条件式です。

要素はHTMLタグで囲まれた1つの塊であり、階層構造で記述することもできます。 階層構造となった場合は、大きな塊から親→子→孫と要素が定義づけられます。

CSSセレクタは、このような要素のプロパティをどのような値にするのか、を選択するための条件式なのです。

さまざまな要素の指定を行うために、記号が利用されています。

頻出するCSSで使われる記号の意味

それでは、具体的にCSSで使われる記号の意味を見ていきましょう。ここでは、頻繁に利用されるCSSの記号について解説します。

「,」(カンマ)の意味

「,」(カンマ)は、複数の要素を指定する際に利用するセレクタです。複数の要素にスタイルを適用したい場合は、「,」(カンマ)で区切って利用しましょう。

例では、pタグとspanタグにフォントカラーを赤色にするスタイルが適用されますが、divタグにはスタイルは適用されません。

「.」(ドット)の意味

「.」(ドット)は、指定したclass名の要素にスタイルを適用するクラスセレクタです。クラスセレクタは非常に利用頻度が高いセレクタですので、必ず覚えましょう。

要素を指定する場合と指定しない場合がありますが、要素を指定すると異なる要素では適用されません。また、クラスセレクタは複数適用することも可能です。

id名と異なり、class名は同じHTML文書内で何度も利用できるため、CSSのスタイルを適用する際に頻繁に利用されます。

「#」の意味

「#」は、指定したid名の要素にスタイルを適用するIDセレクタです。HTMLタグで設定したid名の要素に指定したスタイルを適用します。

id名は1つのHTML文書内で、一意の名称にする必要があります。つまり、同じid名を使い回すことはできない、ということです。

「*」の意味

「*」は、すべての要素にスタイルを適用する全称セレクタです。指定の方法により、適用する要素の範囲を指定できます。

「*」を単体で利用すると、すべての要素に適用されます。例のように「div」要素を加えると、divタグの配下の要素全てに適用されるスタイルとなります。

例では、最初のpタグと最後のolタグは全適用のスタイルである「赤色のフォントカラー」が適用されます。

しかし、divタグ配下のpタグ・ulタグには、「フォントサイズが20pxで、青色のフォントカラー」が適用されるのです。

「>」の意味

「>」は、指定した要素の直下にある要素にスタイルを適用します。子要素にのみスタイルを適用するということですね。

class名「sample」の要素「div」の子要素であるpタグにはスタイルが適用されますが、spanタグ内のpタグは、孫要素となるためスタイルが適用されません。

他にもあるCSSで使われる記号の意味

よく利用されるCSSの記号の他にも、次に紹介するような記号が使われる場合もあります。 前述の記号と比べると利用頻度は高くありませんが、覚えておくとCSSの記述の幅が広がりますよ。

「+」の意味

「+」は、指定した要素に隣接する要素にスタイルを適用します。「>」と似ていますが、子要素ではなく「隣接する要素」にのみ適用します。

明確に使い方が異なりますので注意しましょう。

例では、h3タグに隣接するpタグにのみスタイルが適用されます。その下のpタグは、h3タグと隣接していないため、スタイルが適用されません。

「~」の意味

「~」は、「+」と似ていますが、指定した要素の後にある要素全てに適用されます。

「+」よりも適用される範囲が広いことを覚えておきましょう。

「+」では、h3タグに隣接するpタグにのみスタイルが適用されていました。しかし、「~」ではh3タグ以降のすべてのpタグに適用されます。

「$」の意味

「$」は今までのセレクタと異なり、要素ではなく属性を指定する際に使用する記号です。

「$」について説明する前に、要素ではなく属性を指定するセレクタを見てみましょう。

「[]」で囲まれたなかで属性を指定してしており、これまでのセレクタと違うことがわかりますでしょうか。

上記の例では、aタグのhref属性の値が「#」のものにスタイルを適用する指定です。リンク1とリンク2は、フォントカラーが赤色の太字となります。

「$」は、この属性を指定する際に利用される記号であり、「$」は「属性値が指定した値で終わるもの」という意味になります。

今回の例では、hrefの後に「$」記号がついており、意味としては、「aタグのhref属性値がcomで終わるもの」となります。そのため、リンク3のフォントカラーが緑色になります。

属性値の指定は、デフォルトでは完全一致となり、指定した属性値と完全に一致する必要がありますが、「$」などを使うことで属性値の一部が一致すればスタイルを適用することが可能です。

「$」とあわせて、属性を指定する際に利用する記号としては、他にも次の記号があります。

記号 意味 「hoge」を例とした場合の解釈
なし 完全一致 指定した属性値が「hoge」である
$ 後方一致 指定した属性値が「hoge」で終わる
^ 前方一致 指定した属性値が「hoge」で始まる
* 部分一致 指定した属性値に「hoge」が含まれる

ここでいう「*」は、前の章で説明したものとは意味合いが異なるため注意しましょう。

文字列の一致判定で利用する記号としては、今回紹介したものは汎用的なものです。覚えておくと他にも応用できるため、覚えておくとよいでしょう。

「&」の意味

「&」もCSSでは特殊な記号であり、CSSを拡張するためのLessやSass(Scss)などを利用する際に使われる記号です。「&」は親セレクタを参照する意味を持ちます。

LessやSassは、コードの再利用や変数、条件分岐などのプログラミング的な一面を持ち、CSSをプログラミングするように書くことが可能です。

LessやSassで書かれたコードは、コンパイルされた後にCSSのコードとなります。

実際にSassで「&」を使うと、どのようにCSSにコンパイルされるのか、例を見てみましょう。

Sassでは、階層構造で記述できるためコードの可読性が高くなります。この例だけでは、有用性が分かりづらいかもしれませんが、サイト規模(CSSコードの量)が増えるほど効果を発揮するものです。

たとえば、一括でサイトのテーマカラーを変更したい場合など、CSSだけで記述していると、該当箇所をすべて変更する必要があります。

しかし、Sassなどで変数を使ってカラーを管理していれば、変数の値を変更するだけで済むため、変更作業の手間を大幅に減らすことが可能なのです。

CSSだけを利用する場合は「&」を使う機会はありませんが、LessやSassなどを利用する際には、よく利用される記号ですので覚えておくとよいでしょう。

記号以外のCSSセレクタの意味の一例

記号だけでなく、文字列で指定するCSSセレクタがあることをご存知でしょうか。それらは「擬似クラス」や「疑似要素」と呼ばれ、特定の状態や場所を指定するセレクタです。

擬似クラスや疑似要素は多く存在していますが、ここではその一部を紹介します。

「:link」の意味

「:link」は、未訪問リンクのスタイルを指定する擬似クラスです。

Webでは、デフォルトの未訪問リンクは青色で表されますが、「:link」擬似クラスを指定して変更することができます。

「:visited」の意味

「:visited」は、訪問済みリンクのスタイルを指定する擬似クラスです。

Webでは、デフォルトの訪問済みリンクは紫色で表されますが、「:visited」擬似クラスを指定して変更することができます。

「:hover」の意味

「:hover」は、指定の要素にマウスカーソルなどが乗った際のスタイルを指定する擬似クラスです。

主にリンク(aタグ)で利用されるものであり、マウスカーソルがリンクに乗ると色を変えたり、アニメーションをさせたりする際に利用されます。

「:link」「:visited」「:hover」は、リンクの装飾で利用される頻度が高く、一緒に利用されることが多い疑似クラスです。3つセットで覚えておくとよいでしょう。

「::first-letter」の意味

「::first-letter」は、指定した要素の最初の文字スタイルを指定する擬似要素です。

擬似クラスと異なり、「:」を2つ使うことに気づきましたでしょうか。CSS3から、擬似クラスと分けるために擬似要素には「:」を2つ付けるようになりました。

1つでも利用できますが、違いについては覚えておきましょう。

まとめ:CSSで使われる記号には明確な意味がある

CSSの中には、さまざまな記号が使われているものですが、それぞれに明確な意味があります。今回紹介した記号の意味を理解すれば、CSSを読み解くことができるようになるでしょう。

記号だけでなく、擬似クラスや疑似要素についても紹介しました。しかし、今回紹介したものは一部だけですので、実際に書いていろいろと試してみましょう。

CSSもプログラミングと同様に、実際に書いて試してみることが身につけるための近道となります。

既存のWebサイトを真似することも良い学習になるため、この記事の内容を参考に学習を進めてみてはいかがでしょうか。

「これからの時代、プログラミングと英語が必要そう…」 それは、間違いではありません。

あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。 そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか?

セブ島 IT×英語留学のKredoの「IT留学オンライン」では、プログラミングと英語のスキルをオンライン授業で習得できます!

\プログラミングと英語が同時に身につく!/ KredoのIT留学オンラインについて詳しくみる

Kredo オンラインキャンプなら

新規CTA

プログラミング×英語を身につけてグローバルに活躍しませんか?

当メディアを運営しているKredoでは、プログラミング × 英語が学べる人気オンラインサービス『Kredoオンラインキャンプ』を運営中です。コロナ禍でもオンラインで、プログラミング×英語を身につけた卒業生は海外企業、外資系企業、グローバル企業への就職を果たしています。コロナ禍の今だからこそ、スキルを身につけ転職の準備をしませんか?

Kredo オンラインキャンプへ
  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
太田 ヨウタ
太田 ヨウタ

IT関連企業にてインフラエンジニア(SE)として官公庁や銀行などのシステム更改をメインに約10年従事。基本情報技術者・ネットワークスペシャリスト・情報セキュリティスペシャリストなどの資格も取得。その後、IT・Web専門ライターとして、プログラミング、ネットワーク、セキュリティ、AIなどの解説記事を中心に執筆している。「専門知識を初心者でも理解できるようにわかりやすく書く」ことを心がけている。

関連記事

  •  loading
    Web・プログラミング

    【IT転職成功した私が語る】progateが終わったらプログラミングスクール受講が効果的

    2022.06.08
  •  loading
    Web・プログラミング

    【2022年最新】フロントエンドエンジニアを目指せるおすすめスクール5選

    2022.05.16
  •  loading
    Web・プログラミング

    転職保証付きプログラミングスクールは危険!?口コミを元にリアルを解説

    2022.05.02
  •  loading
    Web・プログラミング

    主婦・ママが在宅で・スキマ時間でも学べるプログラミングスクール5選

kredo it 英語 留学

よく読まれている記事

  •  loading
    2022.05.25

    【6/23(木)~ 24(金)20:00 ~ 無料オンラインセミナー】プログラミング×英語を身につけろ!アフターコロナ時代を勝ち抜くキャリア戦略

  •  loading
    2022.04.19

    「好きなことを仕事に」IT初心者からプログラミング×英語を身に付けフリーランスエンジニアへ

  •  loading
    2021.07.08

    【7/4(月)~ 7/8(金)20:00 ~ 無料オンラインセミナー】プログラミング×英語習得で時代に左右されない海外フリーランスを目指す方法

  • Kredo CEO横田猛夫さん
    2019.06.26

    IT×英語を学ばなければ取り残される!Kredo CEOが日本衰退とIT業界の未来を解説

  • バックエンドエンジニアのコーディングのイメージ画像
    2019.06.05

    未経験でも習得できる実務レベルのプログラミングを学ぶコツを紹介!

IT留学オンライン
新規CTA

まずはお気軽にカウンセラーへご相談ください!

無料カウンセリングを予約する

IT×英語留学体験談

  • 10代
  • 20代
  • 30代
  • 40代~
  • 1〜4週間の短期留学
  • 5〜23週間の中期留学
  • 24週間以上の長期留学
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース

Kredo Blog

Tech 英語学習 セブ島・留学準備 キャリア Kredo
クレドページ
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金[コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
留学コース・料金[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金 [コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
セブ島IT×英語留学の「Kredo」

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

セブ島医療専門の英語学校・看護留学の「HLCA」(姉妹校)

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

スクールやコースをもっと知りたい人へ 資料請求・お問い合わせ

  • fb
  • tw
  • ig
弊社顧問弁護士

Copyright© 2019 KREDO IT ABROAD INC. All rights reserved.