プログラミングや動画編集の勉強ならCANIT (キャニット)

入門1:CSSを学ぶ人が真っ先に見るべき情報【すぐに分かる】

CSS入門
CANIT先生
CANIT先生

今回の講義はHTMLとCSSを学びましょうか。ところで二人はHTMLとCSSをどこまで知っていますか?

猫田さん
猫田さん

もちろん、なにもわかりません

牛山くん
牛山くん

たしか、HTMLで作ったサイトをCSSでデザインするんですよね

CANIT先生
CANIT先生

いいですね。牛山くんは、よく勉強しているようです

HTMLとCSSはWebサイトを作るためのマークアップ言語と呼ばれているものです。企業の公式サイトやWordPressを使ったブログなどもHTMLとCSSの組み合わせによって制作できます。

HTMLとCSSをマスターすれば、サイト作りの基本をマスターしたと言ってもいいでしょう。このページではHTMLとCSSを学びたい人が最初に知りたい情報を紹介します。

HTMLとCSSって何だろう

CANIT先生
CANIT先生

まず、HTMLとCSSの違いとそれぞれの役割を解説しますね

牛山くん
牛山くん

よろしくお願いします

HTMLとCSSの役割

HTMLの役割は文章構造を定義することです。

猫田さん
猫田さん

文章構造? なんか難しそうだなぁ

CANIT先生
CANIT先生

そんなに難しく考えなくても大丈夫ですよ。 どの文章を見出しにするとか、段落の位置を決めたりするものです

一方、CSSの役割は文章の装飾です。さっき牛山くんが答えてくれましたね。

文章の見出しには、色々な表現方法があります。1つ1つの文章をどのように表現するかを決めるのがCSSの役割です。

CANIT先生
CANIT先生

と、基本的な情報を頭に入れたところで、ここからさらに詳しくHTMLとCSSについて見ていきましょう

もっと詳しくHTMLを知ろう!

スクール

HTMLはハイパーテキスト・マークアップ・ランゲージの略です。英語表記のHyperTextMarkupLanguageの頭文字を取ってHTMLと呼びます。

HTMLのバージョン

HTMLには大きく3つのバージョンに分けられます。

  • HTML4
  • XHTML1
  • HTML5
牛山くん
牛山くん

なにが違うのか気になりますね

この3つの中で1番古いのがHTML4です。HTML4は、古いブラウザに対応していて記述ルールがシンプルです。曖昧な記述にも対応できるのが特徴です。

XHTML1はHTML4をベースに作られた派生バージョンです。XHTML1はHTML4よりも記述方法が厳密に決められています。

そして、現行の最新バージョンがHTML5です。記述方法はXHTMLほど厳格ではありません。HTML5はHTML4の機能を拡張したもので、動画再生やメディアの埋め込みに対応しています。

猫田さん
猫田さん

ふむふむ。結局、どれを使えばいいの?

HTMLには複数のバージョンがありますが、基本的には過去バージョンのHTMLを使うことはないです。だから、HTML5だけを学べば問題ありません(※2021年3月現在の情報です)。

HTMLの書き方

CANIT先生
CANIT先生

続いては、どのようにHTMLを書くのか、簡単に紹介しますね

HTMLの基本ルールは定義したい文字を囲むことです。以下のように半角の英数字で文章を囲みます。ちなみにHTMLのコマンド1つ1つをHTMLタグと呼ぶので、覚えておいてください。

猫田さん
猫田さん

半角なんだ。 半角じゃないとだめ?

CANIT先生
CANIT先生

そうですね。HTMLのタグは、全角ではエラーになってしまいます。必ず半角で入力するようにしてくださいね。では、代表的なタグを紹介しますよ

これは<strong>強調した文字</strong>です

文字の強調を表すのが、

<strong>

です。囲い始めのHTMLタグを

<strong>

開始タグ、囲い終わりの、

</strong>

終了タグと言います。

見出しを定義するときは以下のようになります。

<h2>これは見出しです</h2>

上記2つを見てわかるように、HTMLのルールはシンプルです。開始タグと終了タグで囲んで、文章を定義していきます。

もっと詳しくCSSを知ろう!

プログラマー

CSSはカスケーディング・スタイルシートの略です。英語表記のCascadingStyleSheetsの頭文字を取ってCSSと呼びます。

CSSのバージョン

CSSには以下の3つのバージョンがあります。

  • CSS1
  • CSS2
  • CSS3

CSS1は初期に作られたバージョンです。色や背景の指定、リストの指定、マージンの指定など、基本的な装飾の機能を備えています。

CSS2はCSS1を拡張して作られたバージョンです。音声ブラウザや印刷機能に対応しています。

CSS2をさらに拡張したのがCSS3です。CSS3を使うことでアニメーションのある動的なWebサイトを作りやすくなりました。

猫田さん
猫田さん

CSSも最新バージョンのCSS3を使えばいいのかな?

現在は最新バージョンであるCSS3を使うのが一般的です(※2021年3月現在の情報です)。過去バージョンのCSSを使うのは、CSS3未対応の古いブラウザを想定する場合です。特別な事情がなければCSS3を学ぶだけで十分です。

CSSの書き方

牛山くん
牛山くん

CSSは、HTMLで作ったものをデザインできるんですよね

CANIT先生
CANIT先生

そのとおりです。 ここでは文章に色をつけて、フォントサイズを変えてみましょうか。HTMLで作った文章を赤くして、フォントサイズを17ピクセルに指定してみましょう

猫田さん
猫田さん

わくわく

CSSでは、HTML側で定義した要素に対して装飾コマンドを記載します。先ほどh2が見出しタグであることを説明しました。CSSでh2タグを装飾するときは以下のようになります。

h2 { color : red; font-size : 17px; }

最初にタグ名を書き、半角の波括弧の中にコマンドを指定します。これでカラーが赤色に、フォントサイズは17ピクセルに指定されました。

HTMLとCSSを書いてみよう

パソコン
CANIT先生
CANIT先生

では、実際にHTMLとCSS を書いてブラウザに表示してみましょう

テキストエディタでHTMLを書く

HTMLとCSSは特別なツールを使わずに書けます。パソコンに付属するメモ帳ソフトや、フリーソフトのテキストエディタでもHTMLファイルを制作できます。

HTMLファイルを準備する

テキストエディタを開いて以下の文字列をコピー&ペーストします。

<!DOCTYPE html>
<html>
<head>
<title>ページのタイトルを自由に書く</title>
</head>
<body>
</body>
</html>
猫田さん
猫田さん

さっそく意味がわからないんですけど……。最初のDOCTYPEってなに?

CANIT先生
CANIT先生

この文字列は「今からHTMLファイルを作りますよ」と宣言しているだけなので、深く考えずにただコピペすれば大丈夫ですよ

!DOCTYPEでこのファイルがHTML5であることを示しています。上記をコピー&ペーストしたら、任意の名前をつけてファイルを保存しましょう。このとき、拡張子を.txtではなく.htmlという文字列に書き換えてください。これでHTML を書く準備が整いました。

HTMLと文章を書いてみる

上記でコピー&ペーストした文字列の中に<body></body>という表記が見つかると思います。

<body>タグの間に書かれた文章がHTMLの中身です。<body>タグの間に書かれた内容がWebサイトに表示されるので、今回は<body>タグの間に以下のような文章を追加してみましょう。

<body>
<h2>初めてのHTML</h2>
<p>こんにちは。初めてHTMLファイルを制作しています。</p>
<p>ここに書かれた文章がWebサイト上に表示されます。このように長い文章を記載するとブラウザの幅に応じて自動的に折り返して表示されます。</p>
<p>これはテストの文章です</p>
</body>

まずはh2タグを使って見出しを作りました。その下に、

<p>

タグを使って文章を書いています。

<p>

タグで囲った文章は段落として扱われます。上記の例では3つの段落があることになりますね。

牛山くん
牛山くん

<p>〜</p>の塊が3つあるから、3つの段落になるんですね

ここまで完成したら一度ファイルを保存します。

HTMLをブラウザでチェックする

保存したHTMLファイルをブラウザで開きます。ここで使うブラウザは、Google Chrome、Microsoft Edge、Safariなど、普段使い慣れているもので構いません。

ファイルを開くと見出しと文章が表示されるはずです。

猫田さん
猫田さん

おおおおおおお、すごい! 本当に表示された

これでWebサイト制作の第一歩が完了です。続いてCSSを追加していきましょう。

テキストエディタでCSSを書く

パソコン
CANIT先生
CANIT先生

HTMLが一段落したので、続いてCSSを書いていきましょう

CSSの書き方は3種類ありますが、詳しくは後述します。ここでは最も手軽な方法でCSSを追加したいと思います。

先ほどのHTMLファイルを開いて

<head>

タグを探してください。

<head>

に囲われた部分がCSSの記述場所になります。

現在は、

<title>ページのタイトルを自由に書く</title>

という記述があるので、その下の行からCSSを書き始めます。

<style>
h2 { color : red; font-size : 17px; }
</style>

上記をコピー&ペーストします。h2見出しタグの文字色を赤に、フォントサイズを17ピクセルに指定しました。ここまで完了したらファイルを保存します。

CSSをブラウザでチェックする

保存したファイルをブラウザで開きます。CSSを追加したことで見出しの文字色とフォントサイズが変更されているはずです。

猫田さん
猫田さん

おおおおおお、すごい! 文字が赤くなって大きさも変わっている!

これがHTMLを書いてCSSで装飾するときの一連の流れになります。HTMLやCSSはルールさえわかってしまえば意外と簡単に書くことができます。

CANIT先生
CANIT先生

二人とも、ここまでは大丈夫ですか?

牛山くん
牛山くん

大丈夫です。意外と簡単ですね

猫田さん
猫田さん

どんどんいってみよー!

CSSでどんなことができる?

CSS
CANIT先生
CANIT先生

では、ここからはCSSでどんな装飾できるのかを紹介します。 CSSを覚えるといろいろなデザインのサイトを作れるようになりますよ

文字サイズを変えよう

例1 h2 { font-size : 17px; }
例2 h2 { font-size : 80%; }
例3 h2 { font-size : small; }

指定した要素の文字サイズを変更できます。サイズ指定はピクセルだけでなくパーセンテージで指定したり、mediumやsmallのようにブラウザの基準値から相対的に指定することもできます。

文字カラーを変えよう

例1 h2 { color : red; }
例2 h2 { color : #ff0000; }

指定した要素の文字カラーを変更できます。カラーはredやblueなどのカラーネームで指定するほか、#ff0000のような16進数のカラーコードで指定することもできます。

行間を広げてみよう

Webサイトでは文字が詰まっていると文章が読みにくくなりますが、CSSを使えば行間を広げることもできます。

例1 p { line-height : 200%; }
例2 p { line-height : 2; }
例3 p { line-height : 40px; }

例1はpタグに対して行間200%を指定した例です。pタグで囲われたすべての文章の行間が広くなります。行間はパーセンテージのほか、ピクセルや数値でも指定できます。

ボーダーで囲ってみよう

CSSを使うと指定した要素をボーダーラインで囲うことができます。

例1 h2 { border : solid 1px green; }
例2 p { border :  solid 1px gray; }

例1と例2を適用すると見出し部分が緑色の枠線で囲われ、段落部分は灰色の枠線で囲われます。1pxと書かれた場所の数値を変えることで線の太さを指定でき、色指定を変えることで線の色を指定できます。

CSSの記述方法

CANIT先生
CANIT先生

さて、ここから少しだけ難しくなりますよ。 CSSをどのように書くのか……記述方法を説明します

猫田さん
猫田さん

あれ? さっき説明してくれたじゃん。 headのタグの中に書けばいいんでしょ?

CANIT先生
CANIT先生

たしかにheadのタグ内にCSSを書くのも1つの方法です。でも、他の記述方法もあるんですよ

「テキストエディタでCSSを書く」の項目で説明した<head>タグ内に記述する方法は、もっとも簡単な記述方法です。CSSの記述方法は3つあるので、残りの2つを紹介します。

外部のCSSファイルに記述する方法

HTMLファイルの中にスタイルを書くのではなく、CSSだけを記述した別ファイルを用意する方法です。

外部CSSの作成

外部CSSのファイル名は半角英数字で設定し、「.css」という拡張子をつけます。このファイルの中にスタイルを書き込んでいきます。

スタイルの書き方は、

<head>

タグ内に記述するときと同じですが、

<style>

タグで囲う必要はありません。以下のようにいきなりスタイルを書き始めます。

h2 { border : solid 1px green; }
p { font-size : 15px;}

外部CSSの読み込み

外部CSSを作成したらHTMLファイルから読み込み設定を行います。HTMLファイルの、

<head>

タグ内に以下の記述をすることで外部ファイルを読み込みます。

<link rel="stylesheet" href="test.css">

linkタグは終了タグがいらないため開始タグのみを記載します。testの部分は自分が設定した外部CSSファイル名に書き換えてください。

ブラウザでHTMLファイルを開き直すことで外部のCSSが反映されます。

牛山くん
牛山くん

文章量が増えてきたら、HTMLとCSSが別のほうがデザインしやすいかもしれませんね

HTML要素に直接記載する方法

HTMLとCSSを分離せず、1つの場所にまとめて書く方法です。以下のようにHTML要素に直接styleを記述します。

<h2 style=”font-size:17px;”>これは見出しです</h2>

この書き方をするとh2タグの見出しが複数あっても、直接指定した1つだけのスタイルが変更されます。

このHTML要素に直接CSSを記載する方法は、headタグに記述する方法や外部ファイルに書く方法よりも優先度が高く設定されています。そのため、headタグや外部ファイルでh2に対してフォントサイズを指定していても、直接指定したほうの数値が有効になります。

まとめ

パソコン
CANIT先生
CANIT先生

はい。というわけで、以上がHTMLとCSSを学ぶとき最初に知っておきたい情報でした。二人ともどうでしたか?

牛山くん
牛山くん

もっと難しいのかと思ってましたが、けっこうシンプルですね。これなら大丈夫そうです

猫田さん
猫田さん

余裕! 余裕!

CANIT先生
CANIT先生

頼もしいですね(笑)では、最後にHTMLとCSSの情報を簡単にまとめておきましょう

仕組みがわかってしまえば、HTMLやCSSを書くのは意外と簡単です。近頃は、WebプログラミングやWeb開発のスキルが注目されていますし、HTMLの習得はWebデザイナーをする上でも役に立ちます。キャリアアップをしたい方は、今がHTMLとCSSを学ぶチャンスかもしれませんね。

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

CSS入門
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

CANIT
タイトルとURLをコピーしました