~学習するな実践せよ~TOP初心者のための「HTML/CSS」最速入門CSSとは?初心者にも分かりやすく解説!CSSとは?初心者にも分かりやすく解説!2019/11/09CSSはWebサイトを制作する上で、HTMLと並んで非常に重要となってくる技術です。CSSとは何かを一言でいうと「Webサイトのデザインをするもの」です。各要素の余白このようなことがCSSを使用すると可能です。HTMLを書いたことがことがあれば、ただの文字列で色もなくそっけないのがわかるかと思います。コレにデザインを加えていく、それがCSSの役割です。デザインを加えていくことは、「スタイルを当てる」と言ったりもするので覚えておきましょう。CSSの書き方CSSを書いていく上で重要な要素が3つあります。以下のHTMLを例に説明していきます。index.html<h1>フロントグラム</h1>このh1に対して何らかのスタイルを当てることを考えます。セレクタですが、これは「どのタグに対してスタイルを当てるのか」ということです。プロパティは、セレクタで指定したタグに対して「何のスタイルを当てるか」になります。プロパティ値についてですが、「プロパティに対してどのような設定をするか」になります。画像の例であればh1というタグをセレクタとしてcolorという文字色を表すプロパティを用い赤色を示すredというプロパティ値を設定するということで、h1の文字色が赤色になります。セレクタの部分はもう少し複雑で、タグ以外に対しても指定することが出来るので、その方法を見ておきましょう。タグにスタイルを当てるこれは上記の画像の例ですね。h1タグ以外にもimgタグやpタグ、aタグなど色々なタグをセレクタとして指定することができます。classにスタイルを当てるclassはHTMLタグに自由に付けることが出来る目印のようなものです。frontgram">フロントグラム</h1>h1タグに「title」と「frontgram」というclassをつけてみました(class名は自由に付けることが出来る)。classはこのように複数付けることができ、単語同士をスペースで区切ればOKです(ハイフンやアンダースコア、数字なども使えます)。タグと同じようにclassにスタイルを当ててみましょう。24px;}titleというclassに文字色赤とフォントのサイズ24pxを指定しました(pxはWebで扱う大きさの単位です)。注意点として、classは「.」ドットから始める必要があります。HTMLタグでスタイルを当てていたのが、classに置き換わっただけですね。idにスタイルを当てる次にidについてみていきましょう。idも基本的にはclassと同じですが、CSSでidを指定する場合は「#」シャープから始まることに注意しましょう。24px;}そしてclassと異なる重要な違いが、「1つのHTMLファイルに対して、同じid名は複数書くことが出来ない」ということです。id="title">ふろんとぐらむ</h1>これはルール的にダメです。同じid名は同じHTMLファイル内で使わないようにしましょう。動かないことは無いですが、決まりごととして覚えておきましょう*。idを使うメリットはあまりないので基本的にはidではなくclassを使うように心がけましょう。HTMLタグ、class、idで記述するセレクタを説明しましたが、実はこれらを組み合わせり、セレクタで使える記号を使ったりして複雑なセレクタを指定することもできます。以下で紹介しているので、基礎が理解できたら見てください。CSSでよく使うセレクタ8選!次回は、特定のエリアの高さや幅を変えてみたり、背景色を変えて見たりしていきましょう。