CSS
初心者
初心者向け

サーバーサイドエンジニアがCSSの基礎を勉強しなおした時の覚書

はじめに

今まではなんとなくいい感じに既存で作られた物を使用する感じで困らなかったりフロント周りに強い人に頼ったり簡単なstyleを書くぐらいで困らなかったのですが、直近で困る自体が発生しそうになっており勉強し直した内容を記載しています。

なお、管理とかビルドについてまではこの記事では扱いません。

参考URL

https://developer.mozilla.org/ja/docs/Web/CSS

今回は主にMDN web docを参考にしました。

また、これを書く前にドットインストールのCSS入門は一通りやった状態で書いてます。

htmlに埋め込む方法

htmlファイルにcssファイルを埋め込む方法を記述します。
hrefはサーバーサイドの都合もあるため、うまい感じで指定してあげてください。
ここではhtmlファイル配下にcssフォルダ掘ってstyle.cssを入れた例で書いてあります。

<link rel="stylesheet" href="css/style.css">

基本的な書き方

CSSの基本的な記述方法です。
<group of selectors>で対象を(必要であれば複数)指定し、{}でBlockを明示、Block内には複数の<property> : <value>で値で構成されており、それぞれの行で必要なプロパティと値を設定していきます。
行末には;で終わりを宣言することになっています。

ルールをコード化するとこんな感じです。

<group of selectors> {
  <property> : <value>;
}

それぞれを分解してどのように記載するべきかというのを見ていきます。

group of selectors

group of selectorsはstyleを適用させる対象を書きます。

ここに書けるのはtag class id attributeとなっていて決められたルールで書いて対象を絞り込みます。
適当に書いてしまうとあらゆる箇所に影響を及ぼしてしまうため、最新の注意を払うべきです。

例えば、下記のようにしてしまったら全ての色が赤くなってしまい見れたものではなくなってしまいます。

index.html
<html>
  <header>
    <link rel="stylesheet" href="css/style.css">
  </header>
  <body>
    <p>test</p>
  </body>
</html>
style.css
html {
  color : red;
}

このケースでは少なくともpにすべきです。
それでもやっぱり広いので(全てのpタグで赤くしたい訳ではないかもしれない)、更に絞りこむべきです。

style.css
p {
    color : red;
}

classを指定する

ということで最小限の指定をすべきということで一般的にはclass名を指定します。
指定する場合は.を先頭に付けてclass名をその後ろに記述します。
特定tagのclass名という指定も可能で<tag>.<class>と記述します。

上の例を修正して、pタグの中にdescriptionというclass名を指定し、それだけを赤くするように変更します。
index.htmlには他に影響が出てないことを確認するためにもう1つ足しておきます。

index.html
<html>
  <header>
    <link rel="stylesheet" href="css/style.css">
  </header>
  <body>
    <p class="description">test</p>
    <p>test</p>
  </body>
</html>
style.css
p.description {
  color : red;
}

これで特定のclass名にだけスタイルを適用出来ることが分かりました。

今回はdescriptionを全部に適用しても大丈夫なので

style.css
.description {
  color : red;
}

でも大丈夫です。

idを指定する

styleにはidの指定も可能となっています。
基本的にはclass名を指定することになっていますが、指定はできます。
class指定が一般的な理由としてはidは文章内でユニークにする必要があり、複数箇所への指定が出来ないためです。

指定の仕方についてはclassが.であるのに対して#を指定するだけです。
例として使っているhtmlをidベースに書き換えてみます。

index.html
<html>
  <header>
    <link rel="stylesheet" href="css/style.css">
  </header>
  <body>
    <p id="description">test</p>
    <p>test</p>
  </body>
</html>
style.css
p#description {
  color : red;
}

これでも想定通りのstyleが適用されていることが分かります。

属性値を指定する

styleには属性値でも指定が可能となっています。
属性値での指定の場合は[]で属性を囲ってあげることで指定できます。

index.html
<html>
  <header>
    <link rel="stylesheet" href="css/style.css">
  </header>
  <body>
    <p data>test</p>
    <p>test</p>
  </body>
</html>
style.css
[data] {
  color : red;
}

これでもstyleが適用されます。

属性で値も指定したい場合は=で属性と値を指定します。
この場合、正規表現のように|^$*なんかを使って複数の指定をまとめて出来る機能もありますが、ここでは割愛します。

index.html
<html>
  <header>
    <link rel="stylesheet" href="css/style.css">
  </header>
  <body>
    <input name="tel" type="tel">
  </body>
</html>
style.css
input[name=tel] {
  color : red;
}

全部指定する

指定方法には全要素を指定するユニバーサルセレクター(*)が存在しています。
まとめてやるということで大きなページで適用させると性能劣化を行す可能性について言及されてますし、初心者が手を出すと痛い目を見る典型的な例だと感じます。

もっとCSSを分かってから使うものですね。

style.css
* {
  color : red;
}

階層構造で指定する

CSSでは階層構造を表現し特定のタグ配下のクラスだけにstyleを適用したりといったことが可能です。
幾つかやり方があるので見ていきます。

降順

降順を指定する場合は半角スペースで上位側から記述していきます。
何を指定しても大丈夫なので、ものすごく狭い範囲まで指定することが可能となっています。
この指定の場合は、子孫全てを範囲とするため予想外な場所に適用されてしまう可能性がありそうなので注意が必要です。

例としてdiv配下のpタグだけ色を赤くします。

index.html
<html>
  <header>
    <link rel="stylesheet" href="css/style.css">
  </header>
  <body>
    <div>
      <p>test</p>
    </div>
    <p>test</p>
    <div>
      <a href="https://qiita.com">
        <p>test</p>
      </a>
    </div>  
  </body>
</html>
style.css
div p {
  color : blue;
}

これで1つ目と3つ目だけ赤くなります。
3つ目は孫要素ですが、全てを対象としているため適用されています。

親子

半角スペースの場合は子要素以降全てに適用させますが、子要素のみに適用させるには>で分割してあげれば可能です。
先ほどのhtmlに適用させると1つ目だけ色が変わります。

style.css
div > p {
  color : blue;
}

兄弟

styleは横の関係を表現することも可能になっています。
その場合は+で分割してあげれば可能です。

以下のstyleを記述すると、divタグ横にあるpタグの色が変わります。
上のhtmlに適用させると2つ目だけ色が変わります。

style.css
div + p {
  color : blue;
}

また~でも兄弟関係が表現できます。

style.css
div ~ p {
  color : blue;
}

違いとしては+は次の1つの要素だけで~は横にいる要素全てが対象となるという違いがあります。

複数指定する

group of selectorsとあるようにこの部分は複数指定可能となっています。
複数していする場合は,で複数指定あげるだけです。

それでは2つclassを指定してみます。

index.html
<html>
  <header>
    <link rel="stylesheet" href="css/style.css">
  </header>
  <body>
    <p class="title">test</p>
    <p class="description">test</p>
    <p>test</p>
  </body>
</html>
style.css
.title,
.description {
  color : red;
}

Pseudo-classes

selectorsにはselectorの後に:を挟んで特定のclassを指定することにより特定の状態だけstyleを適用することが可能となっています。

例として、aタグにstyleの指定を行い、通常時は青色、hover時は赤色をやってみます。

index.html
<html>
  <header>
    <link rel="stylesheet" href="css/style.css">
  </header>
  <body>
    <a href="https://qiita.com">Qiita</a>
  </body>
</html>
style.css
a {
  color : blue;
}

a:hover {
  color : red;
}

classに指定できる状態はいっぱいあるので紹介は割愛します。

Pseudo-elements

また::の後にelementを設定することで特定の箇所の整形が可能となっています。
下の例では、aタグの後ろに" happy"と文字色を青色にしています。

index.html
<html>
  <header>
    <link rel="stylesheet" href="css/style.css">
  </header>
  <body>
    <a href="https://qiita.com">Qiita</a>
  </body>
</html>
style.css
a::after {
  content: " happy";
  color : blue;
}

elementに指定できるものはいっぱいあるので紹介は割愛します。

propertyとvalue

ここを書いていくと大変になること気づいたので詳細は割愛します。
それぞれのタグで出来ることが違いますし、書いてたらきりがありません。

適用の優先順

styleがかぶった時の優先順について見ていきます。
見てみると細かい優先度の付け方があるようですが、ここでは簡単な例だけにします。

同じ要素の優先順

同じグループ内や同じselectorの宣言に同じpropertyを宣言した場合を見てみます。
基本的に後勝ちになっています。

index.html
<html>
  <header>
    <link rel="stylesheet" href="css/style.css">
  </header>
  <body>
    <p>test</p> 
  </body>
</html>

同じグループ内に入れても

style.css
p {
  color : red;
  color : blue;
}

違うグループにいても

style.css
p {
  color : red;
}

p {
  color : blue;
}

両方とも青色になっています。

違う要素の優先順

タグ、class、idをごちゃ混ぜに指定した場合を見てみます。

例としてpタグにclassとidを指定したhtmlと色を色々指定したcssを用意します。

index.html
<html>
  <header>
    <link rel="stylesheet" href="css/style.css">
  </header>
  <body>
    <p class="text" id="hogehoge">test</p> 
  </body>
</html>
style.css
#hogehoge {
  color : green;
}

.text {
  color : blue;
}

p {
  color : red;
}

見た目と開発者ツールで見ると分かりますが、id > class > タグという順番で適用されることが分かります。

style.css
#hogehoge {
  color : green;
}

.text {
  color : blue;
}

p {
  color : red;
  background-color: gray;
}

もちろん、重複してないものについては優先度が低くても適用されます。
↑の例だと背景は灰色になります。

最後に

今回は基本的な指定の仕方と優先度についての記述となりました。
とりあえずこのレベルまで知っていれば、後は数書いて覚えて管理をきちんと出来れば良い感じに書けるようになるのではないでしょうか。