お二人は、HTMLやCSSの書き方がわかりますか？
もちろんわかりません
少しだけなら知っていますよ。HTMLはWebサイトを作るときに使うんですよね
HTMLとCSSを使うと、Webサイトやブログを作ることができます。HTML形式で書かれた文章をCSSで装飾するのが一連の流れです。
Webサイト制作にはどちらの知識も必要になるので、両方の書き方を覚えておくといいですね。このページではHTMLの基礎やCSSの書き方について解説します。
HTMLとCSSの違い
HTMLとCSSは一緒に語られることが多いですが、2つの役割は少し違います。まずは、それぞれの役割を見ていきましょう
いってみよー
HTMLの特徴と役割
HTMLは、文章の構造を定義するマークアップ言語と言われるものです
マークアップ言語？ なんだかややこしそうだなぁ……
マークアップということは……文章ごとにマーキングしていくってことですか？
その通りです。これは前回、「入門2：【CSSとは？】CSSの基礎知識・事前知識や書き方を徹底解説！」でも解説しているので改めて復習しておいてくださいね
HTMLは文章構造を定義するための言語です。HTMLはハイパーテキスト・マークアップ・ランゲージを略したもので、プログラミング言語ではなくマークアップ言語と呼ばれます。
HTMLを使う理由
文章構造をHTMLでマークアップするのはコンピュータに正しく認識させるためです。コンピュータは文章を見ても、どこが重要な部分なのか理解できませんし、その文章が表になっているか箇条書きになっているかも理解できません。そのままでは単なる文字列として認識してしまいます。
そこでHTMLを使います。タグと呼ばれるコマンドを使って文章に意味づけをし、コンピュータに文章構造を理解させます。
HTMLを使うとどうなる？
スマホやパソコンでWebサイトを見るとき、ブラウザのアプリケーションを使いますよね。文章をHTMLで書くとブラウザが文章構造を理解し、箇条書きや表などを正しく画面に表示してくれます。
CSSの特徴と役割
ではもう1つのCSSはどんな役割があるでしょうか？
カスタードショートケーキとかだったような……
絶対に違いますよね、それ
なんとなく語感は似ていますけどね（笑） CSSはカスケードスタイルシートの略で、HTMLでマークアップした文章を装飾するのがCSSの役割です
CSSを使うと文字の色を変えたり、ボタンの配置を変更したり、デザインを調整できます。読者を惹き付けるようなデザインを再現するのがCSSの役割です。
HTMLの書き方
というわけで、HTMLとCSSのそれぞれの役割について理解できましたね。では、ここでHTMLの書き方をおさらいしてみましょうか
たしか、最初と最後をタグってやつで囲うんだっけ？
そうですね。HTMLはすごくシンプルなルールなので、覚えてしまえば簡単です
そもそもHTMLがなければCSSでデザインを作ることができません。最初はHTMLの基礎から学ぶのが良いでしょう。
HTMLを書くための準備
HTMLの中身はテキストですので、テキストエディタがあれば簡単に書くことができます。
まずは、テキストエディタを開いて以下のコードをコピー＆ペーストしてください。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ページのタイトル</title> </head> <body> <p>ここにサイトの中身を書きます</p> </body> </html>このコードはHTMLを書くときに必ず必要となる共通の宣言です。今はちょっとしたおまじない程度に必ず書くということだけ覚えておきましょう
最初のうちは内容がわからなくても問題ありません。魔法の呪文を書いている感覚で、コピー＆ペーストしてください。
僕は毎回書くのが大変だからメモ帳にメモしてありますよ！
牛山くん賢いなぁ。 わたしも真似しよー
コードを書いたらファイルを保存します。このとき拡張子を.html（もしくは.htm）に設定してください。これだけで最小構成のWebページが出来上がりました。次にファイルを開くと自動的にブラウザが立ち上がりWebページが表示されます。
再度ファイルを編集したいときはテキストエディタからファイルを指定して開きます。
ファイルをエディタの上にドラッグ＆ドロップしても編集が可能です。
簡単にHTMLを書いてみる
では、実際にHTMLを書いてみましょうか。 bodyタグで挟まれている部分がHTMLの中身であり、実際にサイトで表示される部分でもあります
ふむふむ
先ほど書いた最小構成のHTMLに内容を追加していきます。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ページのタイトル</title> </head> <body> <h2>見出しを表すh2タグ</h2> <p>段落を表すpタグ</p> <div> <p>ブロック要素を表すのがdivタグ</p> <p>HTMLはタグを入れ子にできる</p> </div> <p>リストを表すul・liタグ</p> <ul> <li>りんご</li> <li>もも</li> <li>みかん</li> </ul> </body> </html>見出し、段落、ブロック要素、リストを追加しました。今度はこのHTMLに対してCSSを使ってデザインを定義していきます。
CSSを書く前にブラウザで素のWebページをチェックしておくと、CSS適用時との違いがわかりやすくなります。
CSSの書き方
では、ここからはCSSの書き方を見ていきましょう。 CSSには3種類の書き方があります
3種類も覚えられるかな……心配
大丈夫大丈夫。どれもシンプルなルールだからそんなに難しくはないですよ。 まずは一番簡単なHTMLファイルに直接書く方法から見ていきましょう。そのほかの2種類の書き方については後ほど詳しく解説しますね
CSSを書くための準備
HTMLファイルに直接CSSを書くときは、headタグの間にstyleタグでの宣言をします。以下のようにHTMLのhead部分にstyleタグを記入しましょう。
<head> <meta charset="UTF-8"> <title>ページのタイトル</title> <style> /* ↓ここにCSSを書く */ /* ↑ここまで */ </style> </head>これでCSSを書く準備が整いました。
ちなみに「/*」と「*/」で囲んだ部分はコメント扱いになります。 CSSの途中でメモを残したいときに使います。コメントを削除してもデザインや動作には影響しません
メモすることもできるんですね！
CSSの書式
最初は細かくメモしながら書くとより理解度が深まりますね。では、続いてCSSの基本的な書式です。CSSはセレクタ・プロパティ・値という3つの項目を組み合わせて記述します
ふむふむ
セレクタ { プロパティ:値; }このようにセレクタ、プロパティ、値という順に書きます。では、段落を表すpタグを例にしてCSSを書いてみます。
p { font-size:15px; }セレクタ
セレクタは、どの要素にデザインを適用するか指定します。上記の例ではpの部分がセレクタです。
プロパティ
プロパティは、要素に対してどんな装飾を行うかを指定します。上記の例ではfont-sizeの部分がプロパティです。文字の大きさを指定しています。
値
値は、プロパティで決めた装飾の度合いや種類を指定します。上記の例ではfont-sizeを15ピクセルに指定しています。
上記では1つだけスタイルを適用しましたが、CSSでは複数のスタイルを同時に適用することもできます。以下はフォントサイズを15ピクセルにし、文字色を赤色にし、文字を太字にしたサンプルです。
p { font-size:15px; color:red; font-weight:bold; }これでPの段落のフォントが15pxで色が赤くなって太字になるわけですね！
よくわからんけど、なんかすごい
CSSの整形
CSSを書くときは、半角スペース・タブ・改行を自由に使うこともできます
半角スペースやタブや改行は何のために使うの？
主にコードを見やすくするためですね。 一定のルールを決めておけば、あとになって見返したときにコードがわかりやすくなるんですよ
スタイルごとに改行をしたり、見やすいようにスペースを入れていてもデザインには影響しません。以下のように書くこともできます。
p { font-size: 15px; color: red; font-weight: bold; }僕はこっちのほうが見やすいかも
CSSでデザインを定義する
CSSの書式がわかったところで、今度は実際にHTMLに対してデザインを指定してみましょう
やってみましょう
最初に書いた以下のHTMLに対してCSSを設定していきます。
HTMLタグ例
<h2>見出しを表すh2タグ</h2> <p>段落を表すpタグ</p> <div> <p>ブロック要素を表すのがdivタグ</p> <p>HTMLはタグを入れ子にできる</p> </div> <p>リストを表すul・liタグ</p> <ul> <li>りんご</li> <li>もも</li> <li>みかん</li> </ul>CSS例
/* 見出しのデザイン */ h2 { /* 3ピクセルの余白設定 */ padding : 3px; /* 文字の左に黒い10pxの線を表示 */ border-left : 10px solid #000000; /* 背景を薄いグレーに設定 */ background : #f5f5f5; } /* 段落のデザイン */ p { /* 文字のサイズ変更 */ font-size : 14px; /* 行間を広げる */ line-height : 150%; } /* リストのデザイン */ ul { /* 背景を薄いグレーに設定 */ background : #F9F9F9; /* リストの周囲に青い枠線を表示 */ border : solid 1px #blue; /* 枠線の角を丸める */ border-radius : 8px; }CSSを追加してブラウザでチェックするとWebページが装飾されて表示されます。以上がCSSの書き方の基本となります。
おぉ……コメントで書かれた通りに表示されてる！
CSSを書く3つの方法
さきほど、CSSには3種類の書き方があると言ったのを覚えていますか？
覚えていますよ。 HTMLに直接書く方法だけ教えてもらいました
そうですね。では、CSSの書き方の残りの2種類を見ていきましょうか
styleタグでHTMLに直接書く
上記の例で使った方法です。headタグの間にstyleタグを書き、styleタグの間にCSSを書きます。
この方法は手軽にスタイルを試せますが、ページごとにCSSを書くため管理が難しくなります。複数ページのWeb制作においてはあまり使われない方法です。
毎回同じことを書かなきゃいけないもんね……これはめんどくさい（汗
style属性でHTMLに直接書く
HTMLタグにstyle属性を追加することでスタイルを直接書く方法です。ピンポイントでスタイルを指定できます。
<p style=”font-size:15px;color:red;”>この方法はWeb制作においてはあまり使われていません。要素ごとにスタイルを記述する必要があって、CSS自体の仕様変更があったときに対応しづらくなるからです
CSSファイルに書く
スタイルをCSSファイルにまとめて書き、HTMLからファイルを読み込む方法です。
ファイルの読み込み方
HTMLのheadタグ内にCSSを読み込むためのlinkタグを記述します。
<link rel="stylesheet" href="file_name.css">file_nameの部分は自分が用意したcssファイルの名前に書き換えます。
CSSファイルの書き方
CSSファイルの書式はHTMLに直接書くときと同じです。1つ違うのは、styleタグの宣言が要らない点です。
CSSファイルすぐにスタイルを書き始められます。
CSSファイルを読み込む利点
スタイルをCSSファイルに書き込む方法はWeb制作において一般的に使われます。修正に対応しやすくて管理もしやすいメリットがあるからです。
CSSファイルに書き込む方法なら、デザインの仕様が変更になってもCSSファイルを修正するだけで、全てのページのHTMLに仕様の変更が反映されます
ページごとに共通するデザインが多い場合は、こっちのほうが良さそうですね
ファイルごとに管理できるのもHTMLとCSSファイルを分ける利点です。スタイルは複数のCSSファイルに分けて書くこともできます。見出しだけのCSSファイル、表だけのCSSファイルというようにファイルを分けることで全体像が把握しやすくなります。
その他には複数人でWeb開発をする際に作業を分担しやすくなるメリットもあります。
セレクタ・プロパティを知ろう
次は、よく使われるセレクタ・プロパティについて見ていきましょうか
このセレクタとかプロパティっていう横文字がまず苦手なのよね
大丈夫大丈夫。セレクタはその単語の通り「どの部分か」を指定するもので、プロパティは「その部分をどのようにしたいか」を指定するものです。そう難しくありませんよ
よく使うセレクタ
よく使う3つのセレクタを紹介します。セレクタを使いこなすことで効率的にデザインを定義できるようになります。
タグの指定
例 p { color:red; }HTMLのタグ名を直接指定する方法です。特定タグに対して一括でスタイルを適用できます。
クラスの指定
例 .abc { color:red; }HTMLのクラス名を指定する方法です。
<p class=”abc”>文章</p>このように指定したクラスを持つタグにだけスタイルが適用されます。
IDの指定
例 #abc { color:red; }HTMLのID名を指定する方法です。
<h1 id=”abc”>見出し</h1>タグ自体を一括で指定したり、同じタグでもクラス分けやID分けして指定できるんですね
ややこしいけど、これは使いこなせたら便利……なのかな？
そうですね。 とても便利ですし、慣れていけばそこまでややこしいものでもありませんよ
よく使うプロパティ
では次によく使うプロパティを見ていきましょう。プロパティを覚えるとCSSでできることの幅が広がります。よく使うプロパティの一覧を作っておきましたので、確認してください
文字デザインのプロパティ
font-size：文字の大きさを指定
color：文字の色を指定
font-weight：文字の太さを指定
font-family：フォントの種類を指定
text-decoration：文字の下線装飾を指定
text-shadow：テキストに影を追加
line-height：行間の指定
text-align：テキストの表示位置を指定
背景のプロパティ
background-color：背景色を指定
background-image：背景画像を指定
要素サイズのプロパティ
width：要素の横幅を指定
height：要素の高さを指定
max-width：サイズが可変する要素の最高幅
min-width：サイズが可変する要素の最低幅
max-height：サイズが可変する要素の最高の高さ
min-height：サイズが可変する要素の最低の高さ
枠線のプロパティ
border：枠線の指定
border-radius：枠線の角の丸まり度合いを指定
余白のプロパティ
margin：要素の外側の余白を指定
padding：要素の内側の余白を指定
回り込みのプロパティ
float：要素の回り込みを指定
clear：要素の回り込みを解除
位置のプロパティ
position：要素の表示位置の基準を指定
top：表示位置（上からの距離）を指定
right：表示位置（右からの距離）を指定
bottom：表示位置（下からの距離）を指定
left：表示位置（左からの距離）を指定
さすがに全部覚えるのは大変そうですね
一気に全部覚える必要はありませんよ。使う必要が出てきたときに、どのプロパティを使うのかを確認してCSSを書いても良いです
なるほど。 それなら大丈夫そうですね
大丈夫！ 大丈夫！
初めてCSSを触る人へ：まとめ
というわけで、以上がCSSの基本的な書き方になります
なんか一気にできることが広がった気がします
そうですね。まだCSSのほんの入り口ですけど、今回の講義の内容を理解するだけでも、大きく成長しますよ
HTMLは文章構造を定義し、CSSは文章の装飾を定義するのが役割です。
CSSはセレクタ・プロパティ・値を組み合わせた書式で書きます。CSSを書くときは専用ファイルを用意し、それをHTMLファイルから読み込むのが一般的な方法です。外部ファイル化により管理が楽になります。
まずは簡単なプロパティから覚えていくのが上達への近道です。
よーし、この調子で、次いってみよー！
コメント