今回の講義はHTMLとCSSを学びましょうか。ところで二人はHTMLとCSSをどこまで知っていますか？
もちろん、なにもわかりません
たしか、HTMLで作ったサイトをCSSでデザインするんですよね
いいですね。牛山くんは、よく勉強しているようです
HTMLとCSSはWebサイトを作るためのマークアップ言語と呼ばれているものです。企業の公式サイトやWordPressを使ったブログなどもHTMLとCSSの組み合わせによって制作できます。
HTMLとCSSをマスターすれば、サイト作りの基本をマスターしたと言ってもいいでしょう。このページではHTMLとCSSを学びたい人が最初に知りたい情報を紹介します。
HTMLとCSSって何だろう
まず、HTMLとCSSの違いとそれぞれの役割を解説しますね
よろしくお願いします
HTMLとCSSの役割
HTMLの役割は文章構造を定義することです。
文章構造？ なんか難しそうだなぁ
そんなに難しく考えなくても大丈夫ですよ。 どの文章を見出しにするとか、段落の位置を決めたりするものです
一方、CSSの役割は文章の装飾です。さっき牛山くんが答えてくれましたね。
文章の見出しには、色々な表現方法があります。1つ1つの文章をどのように表現するかを決めるのがCSSの役割です。
と、基本的な情報を頭に入れたところで、ここからさらに詳しく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を書くのか、簡単に紹介しますね
HTMLの基本ルールは定義したい文字を囲むことです。以下のように半角の英数字で文章を囲みます。ちなみにHTMLのコマンド1つ1つをHTMLタグと呼ぶので、覚えておいてください。
半角なんだ。 半角じゃないとだめ？
そうですね。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を使えばいいのかな？
CSSの書き方
CSSは、HTMLで作ったものをデザインできるんですよね
そのとおりです。 ここでは文章に色をつけて、フォントサイズを変えてみましょうか。HTMLで作った文章を赤くして、フォントサイズを17ピクセルに指定してみましょう
わくわく
CSSでは、HTML側で定義した要素に対して装飾コマンドを記載します。先ほどh2が見出しタグであることを説明しました。CSSでh2タグを装飾するときは以下のようになります。
h2 { color : red; font-size : 17px; }最初にタグ名を書き、半角の波括弧の中にコマンドを指定します。これでカラーが赤色に、フォントサイズは17ピクセルに指定されました。
HTMLとCSSを書いてみよう
では、実際にHTMLとCSS を書いてブラウザに表示してみましょう
テキストエディタでHTMLを書く
HTMLとCSSは特別なツールを使わずに書けます。パソコンに付属するメモ帳ソフトや、フリーソフトのテキストエディタでもHTMLファイルを制作できます。
HTMLファイルを準備する
テキストエディタを開いて以下の文字列をコピー＆ペーストします。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトルを自由に書く</title>
</head>
<body>
</body>
</html>さっそく意味がわからないんですけど……。最初のDOCTYPEってなに？
この文字列は「今から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を書く
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はルールさえわかってしまえば意外と簡単に書くことができます。
二人とも、ここまでは大丈夫ですか？
大丈夫です。意外と簡単ですね
どんどんいってみよー！
CSSでどんなことができる？
では、ここからは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の記述方法
さて、ここから少しだけ難しくなりますよ。 CSSをどのように書くのか……記述方法を説明します
あれ？ さっき説明してくれたじゃん。 headのタグの中に書けばいいんでしょ？
たしかに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を学ぶとき最初に知っておきたい情報でした。二人ともどうでしたか？
もっと難しいのかと思ってましたが、けっこうシンプルですね。これなら大丈夫そうです
余裕！ 余裕！
頼もしいですね（笑）では、最後にHTMLとCSSの情報を簡単にまとめておきましょう
仕組みがわかってしまえば、HTMLやCSSを書くのは意外と簡単です。近頃は、WebプログラミングやWeb開発のスキルが注目されていますし、HTMLの習得はWebデザイナーをする上でも役に立ちます。キャリアアップをしたい方は、今がHTMLとCSSを学ぶチャンスかもしれませんね。