CSSの基礎

2022/01/05

2021年度新人研修シリーズ 第2弾

今回は、『CSSの基礎』として、CSSについてご紹介します!

CSSとは

CSSとは、Webページのデザインを指定するものです。HTMLの文書構造とセットで扱い、色や位置関係などの見た目を整えます。

CSSには「セレクタ」という指定方法があります。基本的なセレクタは主に3つです。

  1. HTML要素:HTMLタグを指定する
  2. class要素:HTMLタグにclass属性をつけて指定する
  3. id要素:HTMLタグにid属性をつけて指定する
CSSの基本構造
セレクタ 見た目を変える「場所」を指定
プロパティ 見た目を変える「項目」を指定
指定した要素の、どの部分の見た目を変えるのか
文字サイズ、背景色、フォント、余白など
見た目を変える「程度」を指定
どのように見た目を変えるのか、具体的な種類・数値を指定
色は何色にするか、フォントの種類は何にするのか、どのくらい余白を空けるのかなど

セレクタ:HTML要素

HTMLのタグ名をセレクタに指定します。

セレクタ:class要素

HTMLのclass属性名をセレクタに指定します。指定するときは、class属性名の前に「.」を付けます

セレクタ:id要素

HTMLのid属性名をセレクタに指定します。指定するときは、id属性名の前に「#」を付けます

画面イメージ

 

このようにCSSではWebページの見た目を整えることができます。

CSSのプロパティについては以下のサイトを参考にしてみてください!

 スタイルシートリファレンス:http://www.htmq.com/style/

 

次回は『JavaScriptの基礎』として、JavaScriptについてご紹介いたします!

担当者:はる