Zenn
☔

🌧CSSの基本習埗🌧

2022/11/30に公開4件
CSS
HTML
tech

🌟CSSずは

Cascading Style Sheetsの略

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

🌱HTMLずCSSの圹割分担

  • HTML
    文曞構造
  • CSS
    芋た目

🌱CSSの歎史

1996幎　CSS
1998幎　CSS
2007幎ごろ〜CSSが普及しだす
むンタヌネット゚クスプロヌラヌ7から察応しはじめたから
2011幎　CSS2.1
2011幎　CSS

🌱䞋䜍互換性

過去のバヌゞョンの蚘述方法を利甚しおも動䜜する
メンテナンスしやすい

🌱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それぞれがゟロ目の堎合桁で省略が可胜
👉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

ありがずうございたす歎史に぀いお軜くしか觊れおいなかったのでずおも勉匷になりたした
ただただ初心者ですが、これからも継続しお頑匵りたす🙇🏻‍♀