CSSの初歩。学んだ超基本構造と用語を紹介【CSSって何?】

こんにちは、いどはるです。

私はプログラミングを学習中で、CSSの勉強を始めています。

本記事では、CSSの初歩で基本的な構造と知っておきたい専門用語を紹介します(本記事を書く上で参考にしているのは、ドットインストールCSS基礎文法入門#01#02)。よろしければ見てみてください)。

さて、CSSとは何か。

CSSっていうのは、Webページの見た目をいい感じにするもの文字の大きさから位置をどこにするか画像のデザインなどいろいろなところで使われます。

また、WordPressにもCSSを編集できる機能があります

(WordPressのテーマによってはやり方が異なるかもしれません。また、初心者はあまりいじらない方がいいです・・。私も迷子になった過去がありました汗)。

サイドバー(左側の黒い部分)の「外観」 → 「カスタマイズ」から。

WordPressのCSS編集は、外観カスタマイズから

カスタマイズ画面の下の方に、「追加CSS」があるので、クリック。

外観カスタマイズから追加CSSへ

すると、CSSを追加・編集できる画面が現れます。

追加CSSの編集画面

WordPressでもCSSを追加・編集できる。

そして、CSSは「Cascading Style Sheets 」の略で、Cascade(カスケード)は「段階上の滝のような」「連鎖的に伝わる」という意味。

CSSの親要素で書いた内容が、子要素にも伝わっていく様子を表しています。

■カスケードの概念

上流で定義されたものが下流へ引き継がれて文書に適用されます。 このようにスタイル指定が段階的に引き継がれて文書に適用されるのがCSSの大きな特徴です。

スタイル指定が段階的に引き継がれて文書に適用される

親要素で書いたコードが受け継がれます。たとえばCSSで記述するコードはこんな感じ ↓ 。

  1. 「大きな文字」
  2. 「大きな文字で、青い背景」(親要素のbodyに指示出すと、子要素のpにも受け継がれる)
  3. 「大きな文字で、青い背景で、白い文字」(pのみに「白い文字」を指定した場合)

という風に、親要素で設定した内容が子要素に受け継がれていきます

以下に、CSSの基本的な構造と、用語を少し紹介します。

CSS文法の初歩

CSSの基本構造と基本用語

左から「HTML文書」→「CSS文書」→「Googleブラウザ」。

HTMLで文書を作って、CSSで文字の色を指定し、ブラウザに反映させました。

AtomというエディターとGoogle Chromeを使うことで、こういった文書を作成することができます(参考:【入門】プログラミング(HTML)の学習環境を作る。無料Google chromeなどでカンタンHTML/CSSの学習環境を整えよう [Windows編]HTML/CSSの学習環境を整えよう [macOS編])。

CSSの初歩の手順

まず、HTMLで文書を作成。今回は、見出し1(h1)で「CSSの初歩です」と書いています。

<h1>CSSの初歩です</h1>

次にCSSでは、文字の色を赤にしました。

CSSのコードを入力
h1 {
  color: red;
}

このように、CSSで指示を与えることで、指定したh1の文字の色を変えられます。

CSSのコードの用語

CSSで設定する箇所をセレクターという

CSSで設定する箇所を「セレクター」と言います。

どのようなスタイルにするかを宣言という

CSSでどんなスタイルにするかという部分を「宣言」。

宣言の左側をプロパティ、右側を値という

また、宣言の左側を「プロパティ」、右側を「値」と言います。

CSSを1行で書くこともできる

上で書いたコードは、1行にしてコンパクトにすることもできます。

h1 {color: red;}

こんな感じに、短く表現できる。

あと、HTMLと同じように、コメントにすることもできます。

CSSのコメントは、「/* comment */」。

/* h1 {
  color: red;
} */

こうなります。

HTMLでは、「<!―コメント―>」でしたね。

<!-- <h1>CSSの初歩です</h1> -->

なお、コメントは、webページには反映されないものの、コード上は見ることができるというもの。

メモ書きであるとか、いったんwebに反映させたくないけど後で使うかもという場合に設定します。

以上、CSSの初歩の構造の理解と用語についてでした。ドットインストールCSS基礎文法入門#01#02も確認してみてください。では!