styleタグと属性を使って、HTML文書でCSSの作成【CSSプログラミングをはじめてみる】

styleを使ってCSSを作る

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

styleタグと属性の使い方の初歩を紹介しつつ、CSSによるプログラミングをはじめる第一歩を記事にしています。

私は、ドットインストールを使ってプログラミングを勉強中(本記事はドットインストール#03 はじめてのCSSを学習した内容です)。

Atomエディターを使って、HTML文書からCSS文書へ学習を進めていく過程で、styleタグと属性を使います

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

styleタグと属性を使ってみる

styleを使って装飾する

↑ styleタグでh1の文字色を赤にしています。

styleタグやstyle属性を使うと、HTML文書を装飾することができます。

styleタグで装飾する方法「styleタグ内にCSSで記述」

AtomエディターのHTMLに、styleタグのコードを入力。<head></head>の中に入力します。

<style>
 h1 {
  color: red;
 }
</style>

保存して、Google Chromeを再読み込みすると反映されます。これだけ。

また、同じセレクターに対して、同じプロパティを複数記述すると、後から書いた方が優先されます。

ちょっと用語の確認。セレクターは装飾する部分。

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

プロパティは、どんな装飾にするかという部分。

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

たとえば、color: red;の下に、color: blue;を追加すると、「color: blue;」が優先されます。文字は青くなる。

<style>
 h1 {
  color: red;
  color: blue;
 }
</style>

↓ このように、後に書いたプロパティの値「blue」が優先されて、青になる。

後から書いたプロパティが優先される

style属性で装飾

今度は、style属性で装飾します。AtomのHTMLの要素に直接指定します。

たとえば、こんな感じ。ピンクにしています。

<h1 style="color: pink;">styleタグと属性を使ってみる</h1>

h1タグの中にstyle属性で、「color: pink;」としています。

すると、こうなる。

style属性で装飾する

タグの中に直接style属性を指定するので、セレクター(どの部分を装飾するかの内容)は不要です。

おまけ:styleで練習した後は、HTML文書とは別に「CSS用のファイル」を作ってみる

CSSを書き込めるようにフォルダ・ファイルを作る

HTML文書とCSS文書を分けることができます。

やり方は、CSS用に別フォルダを作り、ファイルを新しく作ればOK(参考:ドットインストール#03 はじめてのCSS)。

また、Google Chromeに反映させるには、linkタグで結びつける必要があります。

↓ のように<head></head>の中に組み込みます。

linkタグでCSSファイルを結びつける

コードはこれ。

<link rel="stylesheet" href="css/styles.css">

このように、linkタグ、relation属性とhref属性を使ってHTMLとCSSのファイルを結びつけます。

“css/styles.css”は、「cssという名前のフォルダの中のstyles.cssという名前のファイルですよ」という意味。

CSSを学びはじめる第一歩ですね。

以上となります。ドットインストール#03 はじめてのCSSも参考にしてみてください。では!