公開記事

フリーランスになりたい。 サービスを作りたい。
すべての道を一緒に考え、 支援するスキルアップ × ライフアップスクール

  • WEBデザイナー
  • UI
  • UXデザイナー
  • 事業デザイナー
  • WEBディレクター
  • 起業家
  • エンジニア
  • WEBマーケター
  • 新規事業コンサルタント
  • WEBコンサルタント
  • WEBデザイナー
  • UI
  • UXデザイナー
  • 事業デザイナー
  • WEBディレクター
  • 起業家
  • エンジニア
  • WEBマーケター
  • 新規事業コンサルタント
  • WEBコンサルタント

DAY.6「CSSのタグに慣れていこう」

前回はCSSの書き方についていくつかご紹介しました。
今回はさらに深堀りしたCSSの書き方について、学んでいきます。

CSSには、抑えておかなければならない書き方やポイントがあります。

今回の内容を学ぶことで、CSSにおけるエラーの原因発見や基礎知識が一段と深まりますので、ぜひ、学んでみてください。

では、はじめていきましょう。

目次

  1. HTMLタグにも直接CSSを指定できる
  2. CSSはつなげて書ける
  3. CSSには親から指定した方が優先される
  4. CSSは後に書いた方が優先される
  5. なるべく使わない方がいい奥の手
  6. classじゃなくてidという指定方法
  7. 色々書いてみよう
  8. 運営サービス

HTMLタグにも直接CSSを指定できる

CSSにはHTMLタグを直接指定することもできます。
ちょうど、下記のような感じです。

h1{
    color:#de0000;
}

すべての「h1を赤くする」のであれば、この指定でも問題ありません。

例えば、デザイン上、h1が当てられる部分はデザインが一緒、または似ているというケースでは、h1に共通のCSSを与え、別にクラスをつけて、細部を微調整する、といったことがよくあります。

もちろんh1タグだけでなく、すべてのタグに対してCSSを適応できます。

CSSはつなげて書ける

例えば、下記のようなHTMLがあったとしましょう。

<section class="section-outline">
    <div class="section-inner">
        <h1>タイトルがはいります。</h1>
        <p>テキストが入ります。テキストが入ります。</p>
    </div>
</section>

そして、h1の文字色を赤に変えたいとします。
しかしh1にはクラスがついていません。

そんな時は、CSSを下記のように書くことができます。

.section-outline .section-inner h1{
    color:#de0000;
}

こうすると、意味的には「.section-outline」の中にある「.section-inner」の、さらに中にある「h1」の文字色を赤にする、となります。

なお、ある要素の中にある要素を「子要素」と呼びます。
子要素を囲んでいる要素については「親要素」と呼びます。

親要素から子要素の順に、スペースで区切って指定することで、子要素に対してCSSを適応できます。

なお、直接h1に対してclassをつけて、CSSを反映させることもできます。

直接指定するか、親要素から指定するか、どちらも同じように感じるかもしれませんが、ここで「CSSの優先順位」という問題が関わってきます。

CSSには親から指定した方が優先される

例えば下記のCSSがあったとします。

.section-outline .section-inner h1{
    color:#de0000;
}

h1{
    color:#2a00de;
}

同じh1にCSSが当てられているのですが、前者も後者も、同じh1に対してCSSが適応されています。

前者は文字を「赤」に、そして後者は文字を「青」にしているのですが、この場合、どちらの文字色が優先されるのでしょうか。

答えは前者です。文字は前者の指定どおり、赤くなります。

理由としてはCSSの特性上「親要素からつなげて指定したCSSが優先される」ためです。

なので、優先させたいCSSは、より親から指定するのですが、このルールを知っていると、よく遭遇するエラーの1つ「CSSを指定したのに反映されない!」といった問題を解決しやすくなります。

どこかで、より親要素から指定した箇所があるのかもしれません。

CSSは後に書いた方が優先される

さらに、順番でも優先順位が変わります。
下記のCSSがあった場合、どちらが優先されるでしょうか。

h1{
    color:#de0000;
}

h1{
    color:#2a00de;
}

と言っても、もうサブタイトルで答えは言ってしまっていますね。
答えは後者に書いた「文字を青くする」CSSです。

なので、もし「親から指定した他のCSSがあるわけでもないのに、CSSが反映されない!」という事態が起きたら、もっと後ろの方で別のCSSが色を指定している可能性を疑ってください。

何も考えずにCSSを書いていて、数千行になってくると、CSSの指定が被るケースが起きて、混乱することがあります。

1つならまだしも、2つ3つと指定が重なってきたら大変です。

なので、混乱する前に、CSSをどのように作っていくか、しっかり整理して設計していく必要があるのです。

また、もし「親要素から書いたCSS」がh1に当てられていて、何らかの理由でh1に「単体のCSSを付け足した場合」どちらが優先されるのでしょうか。

これは、先程の「CSSには親から指定した方が優先される」のソースコードの通りですが「親のCSSが優先」されます。

より親から指定されたCSSは、順番関係なく優先されます。

なるべく使わない方がいい奥の手

CSSをたくさん書いて、数千行以上になり「CSSを指定したはずなのに、一切反映されない!」といった事態がおきた時。

「親要素から指定してもダメ、後に書いてもダメ」「何しても反映されない」という悪夢が起きるかもしれません。

もちろん、1番はそうならないように、しっかり設計して作ることが大事なのですが、そんな悲劇が起きてしまった場合、どうすれば良いでしょう。

その時は、推奨はされませんが奥の手があります。

.section-outline .section-inner h1{
    color:#de0000!important;
}

値の後ろに「!important」とついているのがおわかりでしょうか。
これがつくと、強制的に優先順位が一番になります。

ただ、!importantは奥の手なので、使いすぎると後がありません。

!importantをたくさん使って、さらに!important同士のタグで優先順位の奪い合いがはじまったら、もう最悪です。

その時は、CSSをすべて設計しなおす作業をすることをおすすめします。

classじゃなくてidという指定方法

これまでCSSを指定する時は、必ず「.」を最初につけてきました。
「.」はHTMLで指定する時の「class」を意味します。

しかし「#」という指定の仕方もあるのです。
下記のような感じです。

#section-outline{
    background:#000000;
}

これは、idと言い、HTML上では下記のように指定すると反映できます。

<section id="section-outline">
    <div>
        <h1>タイトルがはいります。</h1>
        <p>テキストが入ります。テキストが入ります。</p>
    </div>
</section>

先程までclassと書いていた場所が、idになりました。

idの特徴としては、1ページに同じidを1度しか使えないことです。

例えば上記で「section-outline」というidを指定していますが、このidを同じページ内における他の場所で使うことはできません。
別のページであれば、また使うことができます。

一方、classの場合、何度でも同じページ内で使い回しできます。

1ページ内で複数使えるか、1度だけ使えるか。
それがidとclassの差です。

しかし、最近ではidをあまり多用することはありません。

CSSでの装飾として使うと「使い回しができない」という特性から、使いまわしができるclassをメインに使っていった方が、よりデザインが変更・管理しやすくなるためです。

では、どこでidを使うのかと言えば、JavaScriptで要素を指定する時です。

これはJavaScriptを学ばないと意識できないところかと思いますので、今回は「そういうもんなんだな」程度で理解しておいてください。

なので基本的にはclassをメインに使うことが多く、普段、idはそれほど意識する必要もないかと思いますが、既存サイトの改修などで見つける時があると思いますので、ぜひ覚えておいてください。

色々書いてみよう

今回は得に何か課題があるというより「CSSの優先順位」と「idでの指定」について、それぞれ確認してみてください。

自由にHTMLを書いて、CSSを指定し、優先順位がどう機能するか、idでclassと同じようにCSSが反映できるか、自由に確認してみましょう。

読んで知るだけではなく、一通り自分で試してみることで、知識だけでなく、実際に使えるようになります。

ひとまず、今回はここまでとします。

CSSについての理解が、また少し深まったのではないでしょうか。
次回は、様々なCSSのプロパティについて、ご紹介していきます。

フリーランスになりたい。WEBなど使ってサービスを作りたい。
すべての道を一緒に考え、支援するスキルアップ × ライフアップスクール

専属メンターが、あなたのキャリアから学習内容まで一緒に相談し考えます。

すでに自己実現の成功を収めた、経験豊富な専属メンターが、あなたのキャリアや学習について相談にのります。そして最短で成長し、理想を達成するためのアドバイスを提供してくれるでしょう。彼らはあなたの人生とスキルにおいて、最高の相談役となり、魅力的な未来を歩む手助けしてくれます。

詳しく見てみる!

スキルアップ×ライフアップ公開講座

OPEN COURSE

10年後「新時代でも生き残る」WEBクリエイターへの最新ロードマップはこれだ!

10年後「新時代でも生き残る」WEBクリエイターへの最新ロードマップはこれだ!

こんにちは。uptick運営チームのたきです。 これからWEBクリエイターになりたい方や、学んでいるけど、これからどう進めば良いか迷われている方が、たくさんいらっしゃると、お伺いしました。そこで、これまでの経験と今の時代 […]

今後のWEBクリエイターに必須の視点。STEAM教育とは何か。

今後のWEBクリエイターに必須の視点。STEAM教育とは何か。

こんにちは、皆さん。uptick運営チームの上山です。 今日は、STEAM教育について学びましょう。STEAM教育って聞いたことありますか? Sは科学(Science)、Tは技術(Technology)、Eは工学(Eng […]

徹底解説! 最速で「フリーランスになれる」スクールとは何か。

徹底解説! 最速で「フリーランスになれる」スクールとは何か。

はじめまして。uptick運営チームの南と申します。 みなさんの中には「どうすれば最も早くスキルアップできるのか」「どうすればフリーランスに最速でなれるのか」お悩みの方もいらっしゃるのではないでしょうか。 そんな中で、ス […]

uptickが次世代のWEBクリエイター育成スクールである理由

uptickが次世代のWEBクリエイター育成スクールである理由

こんにちは。uptick運営チームの、たまです。 僕たちは、uptickを立ち上げるまでに、9年、クリエイターや起業家人材の育成について、数々のプロジェクトを実践しながら研究してきました。だからこそ、uptickのシステ […]

uptickってどんな人がやってるの?これまで辿った道のりも解説!

uptickってどんな人がやってるの?これまで辿った道のりも解説!

はじめまして! uptick運営チームの岩瀬と申します。 正直、私たちは特にインフルエンサーとして名をあげているわけでもなく、知名度もまだまだ無いので一見「この人たちは誰?」「uptickって、どんな人がやっているの?」 […]

どのプランを選べばいい? プラン参考ケーススタディ集!

どのプランを選べばいい? プラン参考ケーススタディ集!

uptickをご検討頂いている皆様、興味を持っていただき、本当にありがとうございます! uptickは、すべての生徒に専属メンターがつき、すべてのカリキュラムを個人のゴールから逆算した「オーダーメイド」で構築します。ゴー […]

もっと講座を見る

お気軽に無料相談にお越しください!
もちろん、キャリアや学習ロードマップについての相談もさせて頂きます!