/*サーチコンソール*/ /*google adcense*/

CSSでできることと組み込み方【初心者向け】

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

今回はHTMLに対してスタイルを整える役割を持つ「CSS」でできること、組み込み方を初心者向けに解説していきます。「CSSは難しくない」とよく言いますが、やはり初心者のうちは理解しにくく難しいと感じます。ですがコードを正しく記述すれば、「文字色が変わる」「文字サイズが変わる」など、体感的に理解しやすいです。

それでは、一緒に頑張っていきましょう!

CSSでできることと組み込み方
この記事の要点まとめ
CSSってなに?
CSSはCascading Style Sheetsの略称
CSSはスタイルを整える言語
CSSはHTMLで意味付けされた文章に対してスタイルを整えることのできる言語。
CSSはプログラミング言語ではない
CSSはプログラミング言語ではなく、「マークアップ言語」。
CSSでできること例
CSSでできることの例をいくつか紹介。
CSSを使用しない例
HTMLだけで作ったものは、意味付けされた文字が並んだだけのもの。
CSSを使用した例
HTML情報を変更しなくてもCSSを付け加えれば、全く違ったデザインのものにすることができる。
CSSの組み込み方
CSSを使うには、HTML文書に組み込ませる必要がある。
ファイルを読み込む
link要素を使用してHTMLにCSSを読み込ませることができる。
head要素内にstyle要素を記述
head要素内にstyle要素を追追加し、その中にCSSを記述することでCSSを読み込ませることができる。
style属性を使用する
適応したい要素にstyle属性を使用し、属性値にCSSプロパティを記述することでCSSを読み込ませることができる。
CSSは体感的に理解しやすい
CSSは文字色が変わったり文字サイズが変わったりなど、体感的に理解しやすい言語。

CSSってなに?

ハリボー
ハリボー

CSSってHTMLを勉強していたらたまに聞くよね、一体何者!?

CSSはHTMLで作った文章に対してデザインを付けるものだよ。

ヒナ
ヒナ

CSSは「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略称で、HTMLと合わせて使用される言語です。CSSを勉強するにはHTMLを理解してからの方が、より理解しやすいです。もしHTMLについてよく知らないという方は「初心者向け HTMLの基本構造」の記事を先に読むことをおすすめします。

CSSはスタイルを整える言語

CSSと深く関わってくるHTMLは、文章の内容に対して「見出し」や「段落」といった意味付けをする言語です。CSSはその意味付けされた文章に対して、デザインやレイアウトといったスタイルを整えることができる言語です。

HTMLで作成したものは文字の羅列でしかありませんが、これにCSSが加わるだけで一気にWebサイトっぽいデザインを作ることができます。

HTMLで作成する見出しや段落は、見た目としては文字が大きくなったり太くなったりしか変わりません。ですがCSSは文字の大きさや太さはもちろん、色なども変えることができます。そういった点からも、個人的にはHTMLよりもCSSの方が取っ掛かりやすいかなと思っています。CSSを勉強していくと、よりHTMLを理解することもできます。

以前はHTMLでデザインを整える目的で使用されるタグが使われていたようですが、現在(HTML5)は装飾目的のタグは廃止になったり非推奨とされています。HTMLは文章の内容を記述するものであり、デザインに関わることは必ずCSSで行うということを覚えておきましょう。

HTMLとCSSの役割
クリックで拡大

CSSはプログラミング言語ではない

ハリボー
ハリボー

HTMLでDOCTYPE宣言ができたときプログラマー宣言したらばかにされたけど、CSSができたらもうプログラマー宣言してもいいよね!

ごめんね、すごく言いにくいんだけどCSSもプログラミング言語じゃない、、、

ヒナ
ヒナ

HTMLとCSSを習得してWeb系プログラマーになるぞ!」と考えている人には悲報ですが、この2つはプログラミング言語ではありません。HTMLは内容をタグで囲むことによって意味付けする「マークアップ言語」、そしてCSSはHTMLで作成した文章のスタイルを整える「スタイルシート言語」と呼ばれています。

プログラミング言語とは、条件式などを記述して「入力された条件によって出力を変える」ものです。言い方は悪いかもしれませんが、HTMLは内容をタグで囲んで表示するだけのもの、CSSはそれに対してスタイルを変えるだけのものです。CSSの一部でクリックによるアクションなどを付け加えることもできますが、基本的にプログラミングでできることとは全く異なり習得難易度も低いです。

ちなみにこのブログでは記事の最初に要点をまとめた目次を設置しています。この目次の見出し部分は、クリックするとボタンが押し込まれたように表示されます。あれはCSSで再現しています。クリックすると見出しに飛ぶので、わかりにくいかもしれませんが。

話を戻しますが、Web系のプログラミングをするにはHTMLと今回解説していくCSSを理解していることが絶対条件です。例えばWeb系でよく使われるJavaScriptでは、HTMLに対して動きを出したり、相手によって出力内容を変更したりしてくれる「プログラミング言語」です。

HTMLやCSSを理解せずに、「Web系プログラマーになりたいからJavaScriptを勉強するぞ!」といきなり始めてもほぼ確実に挫折します。そう考えると「HTMLとCSSを習得してプログラマーになるぞ!」という考え方は間違えていないかもしれません。

CSSでできること例

CSSはHTMLで作った文章に対してスタイルを整えるものだということはわかったでしょうか?ですがこれだけでは「CSSで何ができるのか」ということまではわからないと思います。

この記事では深く解説しませんが、CSSでできることの例をいくつか紹介していきます。

CSSを使用しない例

まずはこちらのコードと処理結果をご覧ください。

※CodePenの使い方がわからない方はこちら

See the Pen CSSでできること(HTMLのみ比較) by Kosei@SplaTech (@pompom_stk) on CodePen.

上のコードは、CSSを使用していません。HTMLだけで作った「意味付けされた文字が並んだだけのもの」です。正直これを見てもどこが見出しでどこが内容なのか、どこが大切なポイントなのかがわかりにくいです。

次はこれにCSSでデザインを付けていきましょう。

CSSを使用した例

上のHTMLに対してCSSを付けていきます。まずコンテンツ全体は目に優しい緑っぽい色を使用し、余白を付けます。中見出しは左側と下に線を引き、小見出しは少しスペースを開けて左側に四角いやつを置いてみます。これだけで、それとなく見出しっぽくなります。そして大切なポイントは、文字色を変えたり背景色をつけたり文字のサイズを変えたりしてみまます。

上のようなCSSを指定したものが以下のコードです。ここでは「こんなことができるんだ」程度で、どんなコードが使われているかなど深く考えなくて大丈夫です。一応CSSにはコメントアウトして、「どのコードが何の役割を持っているか」をわかるようにしています。もし気になる人はそちらも参考にしてみてください。

See the Pen CSSでできること by Kosei@SplaTech (@pompom_stk) on CodePen.

これがCSSです。控えめに言って、すごくないですか? HTMLで書いた情報は全く変えていないのに、CSSという言語を少し付け加えるだけでここまで変わってしまいます。

間違ってもコードを見て、「意味がわからない、自分にCSSは向いていないかも」とは思わないでください。僕もこれを書く2.3ヶ月前くらいまでは意味がわかりませんでした。

CSSの組み込み方

CSSを使うには、HTML文書に組み込ませる必要があります。組み込ませる方法は3種類あります。

また、この項目では「要素」や「属性」といった用語がでてきます。これらについてよく知らないという方は「タグ中の要素、属性とは?HTMLの基本的な書式」の記事をご覧ください。

ファイルを読み込む

まずはlink要素を使用してHTMLにCSSを組み込ませる方法です。この方法を使用するには、HTMLとCSSそれぞれ別のファイルを用意する必要があります。CSSのファイル拡張子は「.css」とします。

この方法でファイルを読み込むには、HTMLでlink要素を使用しCSSファイルを指定します。この記事では簡単にしか解説しませんが、link要素は外部ファイルをHTMLに読み込ませることができる要素です。以下のように記述し、hrefの属性値はCSSファイルのある場所を指定しましょう。

linkファイルについてはまた、別記事で解説していきます。

<link rel="stylesheet" href="ファイルのある場所">

head要素内にstyle要素を記述

次はhead要素内にstyle要素を記述する方法です。head要素はhtml要素の中に入る要素で、それぞれのページに関する情報を記述する部分になります。詳しくは「初心者向け HTMLの基本構造」の記事をご覧ください。

書き方は非常に簡単で、まずhead要素内にstyle要素を追加します。そしてstyle要素のタグ間にCSSを記述すればそれが適応されます。

See the Pen style要素 by Kosei@SplaTech (@pompom_stk) on CodePen.

style属性を使用する

最後にstyle属性を使用する方法です。この方法は記事全体に適応するhead要素とは異なり、特定の部分にのみ適応させることができます。

書き方は、適応させたい要素にstyle属性を使用し、属性値にCSSのプロパティと値を記述します。複数のプロパティを指定したい場合は、プロパティ間をセミコロン(;)で区切りましょう。

See the Pen style属性 by Kosei@SplaTech (@pompom_stk) on CodePen.

CSSは体感的に理解しやすい

簡単にですがCSSでできること、組み込み方を解説していきました。

CSSでできることはほんの一部しか紹介しませんでしたが、他にもいろいろなことができます。CSSはコードを正しく記述すれば文字色が変わったりサイズが大きくなったりなど、HTML以上に体感的に理解しやすいです。

CSSを初めて扱う人にとったら難しく、理解しにくいかもしれません。ですが、自分で何度かコードを書いて実行していけばすぐに理解することができます。ぜひ、実際にコードを書いてCSSの楽しさを体感してみてください。