🌧CSSの基本習得🌧

2022/11/30に公開4

🌟CSSとは

Cascading Style Sheetsの略

  • 文字の色やサイズ、レイアウトなどを指定できる
  • HTMLで書かれた構造化された文書のスタイルを指定するための言語

🌱HTMLとCSSの役割分担

  • HTML
    文書構造
  • CSS
    見た目

🌱CSSの歴史

1996年 CSS1
1998年 CSS2
2007年ごろ〜CSSが普及しだす
(インターネットエクスプローラー7から対応しはじめたから
2011年 CSS2.1
2011年 CSS3

🌱下位互換性

過去のバージョンの記述方法を利用しても動作する
メンテナンスしやすい!

🌱CSSで最も重要な基本ルール

セレクター(どこの){
プロパティ(何を):値(どうする)};

実例:

h1{
color:#ff0000;
}

🌱CSSを記述

- インライン

    <h1 style="color:#aa0000;">はじめてのCSS</h1>

色をRGB値で指定

φ(・
検証のために一時的にスタイルを当てたいといった用途以外にはあまり使われない
インラインを多用しすぎるとHTML文章がごちゃごちゃして可読性が悪くなる

- 内部参照

HTMLファイルの中にスタイル属性を用意してその中にCSSを書く方法

<head>
 <style>
      h2 {
        color: #00aa00;
      }
    </style>
  </head>

  <body>
    <h2>内部参照</h2>
  </body>

φ(・
head要素内にスタイル要素を記述
CSSの記述量が少ないときに利用
とりあえず勉強のためにCSSを記述してみたいとか
一時的にCSSの検証をしたいといったときに使うことが多い

- 外部参照

(実務上一番推奨)
CSSを書くだけのファイルを別途作り、そこにCSSを記載
そのCSSファイルをHTMLからリンクタグを使って読み込む方法

<head>
    <link rel="stylesheet" href="css/base.css">
  </head>

φ(・
headタグ内にリンクタグを設置してCSSファイルを読み込む
relはrelationの略で関係という意味
href属性にbase.cssのパスを書く
CSSフォルダ内のbase.cssを読むという指定

Base.cssにCSSを記載

h3 {
  color: #0000aa;
}

〜よくあるトラブル〜

  • ファイルを保存していない
  • cssファイルが、cssフォルダ内に正しく配置されていない
  • スペルミス
  • セミコロン(;)の記述もれ
  • 意図しない全角文字、全角スペース
  • ⚠️フォルダ名やファイル名には英数字を使うのが安全、日本語は使わない

🌱優先順位について

同じ内容のCSSを複数の場所に書いた場合どのような動きをするか

  1. インライン>内部参照>外部参照
    要素から近い場所にある記述の方がより優先される

  2. 同一ファイル内では、上から下へ評価
    下に書いた記述の方が優先される

🌟コメントアウト

コメントとはファイルには書いてあるがブラウザに表示するときには無効になるもの
HTMLとは書き方が違う!!

/* コメントしたい文字列 */

/* コメント
したい
文字列 */

一行でも複数行でもOK

🌱コメントの用途

  • 説明文を書きたい
  • 検証のために、一時的にコードを無効にしたい

💡ショートカット
⌘ + /

🌟色の指定

CSSのプロパティ colorの使い方

構文
例)

p {
        color: #aa0000;
      }

🌱RGB値で指定する方法

color: #aa0000
16進数のRGBそれぞれがゾロ目の場合3桁で省略が可能!
👉color: #a00;
と書き換えることも可能!!省略するしないは自由!!

🌱バリエーション

  • 10進数で指定
    rgb(255,0,0)
  • %で指定
    rgb(100%,0%,)%)

たまに見かけるのでこのパターンも知っておく!!

RGB値と色の組み合わせは暗記する必要なし!
VSCでRGB値をマウスオーバーするとカラーピッカーが表示される🙆‍♀️

🌱カラー名で指定する方法

例)
赤を使いたい👉RED

 p {
      color: red;
      }

細かい指定はできないので無理に使う必要はない

💡MDN
https://developer.mozilla.org/ja/docs/Web/CSS/color_value
他にどんな色があるか必要になれば参照!

🌟背景を指定

要素の背景を指定する

 <head>
    <title>背景を指定しよう</title>
    <style>
      body {
        /* background-color: #ccc; */
        background-image: url(images/dot.png);
        background-repeat: no-repeat;
        /* background-position: center; */
        /* background-position: right; */
        background-position: left;
      }
      h1 {
        background-color: #6495ed;
      }
    </style>
  </head>

🌱背景色を指定

background-color: #ccc;

🌱h1などの各要素に背景色をつける

 h1 {
        background-color: #6495ed;
      }

🌱背景画像を入れる

css-basicフォルダにimagesフォルダを作成

background-image: url(images/dot.png);

🌱画像を繰り返し表示しない

background-repeat: no-repeat;

🌱画像の位置

background-position: left;

💡よくある質問

HTMLのimg要素と、CSSのbackground-imageの使い分けは?

  • img要素👉重要な画像
  • backgroundimage👉背景画像や装飾

絶対的な一つのルールがあるわけではないが大体上記の目安!!


今日はCSSの基本習得半分終了!
過去に少しやったことが蘇ってきて面白かった🤭
明日で基本は終わらせたい!
頑張ろう!パワー❤️‍🔥💪🏻

Discussion

kojika17kojika17

良い記事ですが、CSSの歴史の箇所が微妙だったのでコメントさせて頂きました。


1995年にCSSの仕様策定していたW3CとMicrosoftでCSSをサポートしたブラウザをリリースすることを約束します。

1996年の8月にCSSをサポートしたInternet Explorer 3がリリース。また12月にCSS 1が勧告されます。
ただCSSをサポートしたばかりのIE3はひどいものでした。

1998年にCSS 2が勧告。
ただこの頃はブラウザがCSSなどの独自拡張を好き勝手に開発していたので、2000年前後でW3Cの仕様に沿ったHTMLやCSSをブラウザの開発やweb制作する啓蒙が活発になります。(web標準化運動)

2001年にW3Cの仕様に一応準拠したIE6がリリースされます。このIE6の登場でブラウザはIE一強時代に突入し、約10年間IE6が首位を独走。web製作者はIE6に合わせたCSSを書く時代でした。

2010年頃は、様々な新しい(モダン)ブラウザが乱立し、CSS3の実験的な実装もモダンブラウザで進んでいました。
ただ微妙なCSSを搭載したIE6は、依然として国内で10%程度のシェアを持っており、web制作者から目の敵にされ、Microsoftからも「IE6は腐った牛乳」と揶揄されていました。

2011年 CSS 2.1が勧告。また初めてCSS3を実装したIE9が登場しますが、他のモダンブラウザはリリーススピードが早くなり、多くのCSS3を実装が進んでいました。

2014年4月にIE6のサポート終了。
多くのCSS3が使える時代に突入しました。


リストを見たら、毎日記事にまとめて素晴らしいですね!
知識はアウトプットする人の元に集まる、と思っています。大変でしょうが、是非続けてください!

sayasaya

ありがとうございます!歴史について軽くしか触れていなかったのでとても勉強になりました!
まだまだ初心者ですが、これからも継続して頑張ります🙇🏻‍♀️