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

入門3:【CSSを初めて触る人へ】基本的な書き方やHTMLの基礎を学ぼう

入門3:【CSSを初めて触る人へ】基本的な書き方やHTMLの基礎を学ぼう CSS入門
CANIT先生
CANIT先生

お二人は、HTMLやCSSの書き方がわかりますか?

猫田さん
猫田さん

もちろんわかりません

牛山くん
牛山くん

少しだけなら知っていますよ。HTMLはWebサイトを作るときに使うんですよね

HTMLとCSSを使うと、Webサイトやブログを作ることができます。HTML形式で書かれた文章をCSSで装飾するのが一連の流れです。

Webサイト制作にはどちらの知識も必要になるので、両方の書き方を覚えておくといいですね。このページではHTMLの基礎やCSSの書き方について解説します。

HTMLとCSSの違い

HTMLとCSSの違い
CANIT先生
CANIT先生

HTMLとCSSは一緒に語られることが多いですが、2つの役割は少し違います。まずは、それぞれの役割を見ていきましょう

猫田さん
猫田さん

いってみよー

HTMLの特徴と役割

HTMLとは
CANIT先生
CANIT先生

HTMLは、文章の構造を定義するマークアップ言語と言われるものです

猫田さん
猫田さん

マークアップ言語? なんだかややこしそうだなぁ……

牛山くん
牛山くん

マークアップということは……文章ごとにマーキングしていくってことですか?

CANIT先生
CANIT先生

その通りです。これは前回、「入門2:【CSSとは?】CSSの基礎知識・事前知識や書き方を徹底解説!」でも解説しているので改めて復習しておいてくださいね

HTMLは文章構造を定義するための言語です。HTMLはハイパーテキスト・マークアップ・ランゲージを略したもので、プログラミング言語ではなくマークアップ言語と呼ばれます。

HTMLを使う理由

文章構造をHTMLでマークアップするのはコンピュータに正しく認識させるためです。コンピュータは文章を見ても、どこが重要な部分なのか理解できませんし、その文章が表になっているか箇条書きになっているかも理解できません。そのままでは単なる文字列として認識してしまいます。

そこでHTMLを使います。タグと呼ばれるコマンドを使って文章に意味づけをし、コンピュータに文章構造を理解させます。

HTMLを使うとどうなる?

スマホやパソコンでWebサイトを見るとき、ブラウザのアプリケーションを使いますよね。文章をHTMLで書くとブラウザが文章構造を理解し、箇条書きや表などを正しく画面に表示してくれます

CSSの特徴と役割

CSSとは
CANIT先生
CANIT先生

ではもう1つのCSSはどんな役割があるでしょうか?

猫田さん
猫田さん

カスタードショートケーキとかだったような……

牛山くん
牛山くん

絶対に違いますよね、それ

CANIT先生
CANIT先生

なんとなく語感は似ていますけどね(笑) CSSはカスケードスタイルシートの略で、HTMLでマークアップした文章を装飾するのがCSSの役割です

CSSを使う文字の色を変えたり、ボタンの配置を変更したり、デザインを調整できます。読者を惹き付けるようなデザインを再現するのがCSSの役割です。

HTMLの書き方

HTMLの書き方
CANIT先生
CANIT先生

というわけで、HTMLとCSSのそれぞれの役割について理解できましたね。では、ここでHTMLの書き方をおさらいしてみましょうか

猫田さん
猫田さん

たしか、最初と最後をタグってやつで囲うんだっけ?

CANIT先生
CANIT先生

そうですね。HTMLはすごくシンプルなルールなので、覚えてしまえば簡単です

そもそもHTMLがなければCSSでデザインを作ることができません。最初はHTMLの基礎から学ぶのが良いでしょう。

HTMLを書くための準備

HTMLの中身はテキストですので、テキストエディタがあれば簡単に書くことができます。

まずは、テキストエディタを開いて以下のコードをコピー&ペーストしてください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
</head>
<body>
    <p>ここにサイトの中身を書きます</p>
</body>
</html>
CANIT先生
CANIT先生

このコードはHTMLを書くときに必ず必要となる共通の宣言です。今はちょっとしたおまじない程度に必ず書くということだけ覚えておきましょう

最初のうちは内容がわからなくても問題ありません。魔法の呪文を書いている感覚で、コピー&ペーストしてください。

牛山くん
牛山くん

僕は毎回書くのが大変だからメモ帳にメモしてありますよ!

猫田さん
猫田さん

牛山くん賢いなぁ。 わたしも真似しよー

コードを書いたらファイルを保存します。このとき拡張子を.html(もしくは.htm)に設定してください。これだけで最小構成のWebページが出来上がりました。次にファイルを開くと自動的にブラウザが立ち上がりWebページが表示されます。

再度ファイルを編集したいときはテキストエディタからファイルを指定して開きます。

ファイルをエディタの上にドラッグ&ドロップしても編集が可能です。

簡単にHTMLを書いてみる

CANIT先生
CANIT先生

では、実際に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の書き方

CANIT先生
CANIT先生

では、ここからはCSSの書き方を見ていきましょう。 CSSには3種類の書き方があります

猫田さん
猫田さん

3種類も覚えられるかな……心配

CANIT先生
CANIT先生

大丈夫大丈夫。どれもシンプルなルールだからそんなに難しくはないですよ。 まずは一番簡単なHTMLファイルに直接書く方法から見ていきましょう。そのほかの2種類の書き方については後ほど詳しく解説しますね

CSSを書くための準備

HTMLファイルに直接CSSを書くときは、headタグの間にstyleタグでの宣言をします。以下のようにHTMLのhead部分にstyleタグを記入しましょう。

<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
    <style>
        /* ↓ここにCSSを書く */

        /* ↑ここまで */
    </style>
</head>

これでCSSを書く準備が整いました。

CANIT先生
CANIT先生

ちなみに「/*」と「*/」で囲んだ部分はコメント扱いになります。 CSSの途中でメモを残したいときに使います。コメントを削除してもデザインや動作には影響しません

牛山くん
牛山くん

メモすることもできるんですね!

CSSの書式

CANIT先生
CANIT先生

最初は細かくメモしながら書くとより理解度が深まりますね。では、続いて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の整形

CANIT先生
CANIT先生

CSSを書くときは、半角スペース・タブ・改行を自由に使うこともできます

猫田さん
猫田さん

半角スペースやタブや改行は何のために使うの?

CANIT先生
CANIT先生

主にコードを見やすくするためですね。 一定のルールを決めておけば、あとになって見返したときにコードがわかりやすくなるんですよ

スタイルごとに改行をしたり、見やすいようにスペースを入れていてもデザインには影響しません。以下のように書くこともできます。

p {
    font-size: 15px;
    color: red;
    font-weight: bold;
}
牛山くん
牛山くん

僕はこっちのほうが見やすいかも

CSSでデザインを定義する

CANIT先生
CANIT先生

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つの方法

1・2・3 数字
CANIT先生
CANIT先生

さきほど、CSSには3種類の書き方があると言ったのを覚えていますか?

牛山くん
牛山くん

覚えていますよ。 HTMLに直接書く方法だけ教えてもらいました

CANIT先生
CANIT先生

そうですね。では、CSSの書き方の残りの2種類を見ていきましょうか

styleタグでHTMLに直接書く

上記の例で使った方法です。headタグの間にstyleタグを書き、styleタグの間にCSSを書きます

この方法は手軽にスタイルを試せますが、ページごとにCSSを書くため管理が難しくなります。複数ページのWeb制作においてはあまり使われない方法です。

猫田さん
猫田さん

毎回同じことを書かなきゃいけないもんね……これはめんどくさい(汗

style属性でHTMLに直接書く

HTMLタグにstyle属性を追加することでスタイルを直接書く方法です。ピンポイントでスタイルを指定できます。

<p style=”font-size:15px;color:red;”>
CANIT先生
CANIT先生

この方法は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制作において一般的に使われます。修正に対応しやすくて管理もしやすいメリットがあるからです。

CANIT先生
CANIT先生

CSSファイルに書き込む方法なら、デザインの仕様が変更になってもCSSファイルを修正するだけで、全てのページのHTMLに仕様の変更が反映されます

牛山くん
牛山くん

ページごとに共通するデザインが多い場合は、こっちのほうが良さそうですね

ファイルごとに管理できるのもHTMLとCSSファイルを分ける利点です。スタイルは複数のCSSファイルに分けて書くこともできます。見出しだけのCSSファイル、表だけのCSSファイルというようにファイルを分けることで全体像が把握しやすくなります。

その他には複数人でWeb開発をする際に作業を分担しやすくなるメリットもあります。

セレクタ・プロパティを知ろう

CANIT先生
CANIT先生

次は、よく使われるセレクタ・プロパティについて見ていきましょうか

猫田さん
猫田さん

このセレクタとかプロパティっていう横文字がまず苦手なのよね

CANIT先生
CANIT先生

大丈夫大丈夫。セレクタはその単語の通り「どの部分か」を指定するもので、プロパティは「その部分をどのようにしたいか」を指定するものです。そう難しくありませんよ

よく使うセレクタ

よく使う3つのセレクタを紹介します。セレクタを使いこなすことで効率的にデザインを定義できるようになります。

タグの指定

p { color:red; }

HTMLのタグ名を直接指定する方法です。特定タグに対して一括でスタイルを適用できます。

クラスの指定

.abc { color:red; }

HTMLのクラス名を指定する方法です。

<p class=”abc”>文章</p>

このように指定したクラスを持つタグにだけスタイルが適用されます。

IDの指定

#abc { color:red; }

HTMLのID名を指定する方法です。

<h1 id=”abc”>見出し</h1>

牛山くん
牛山くん

タグ自体を一括で指定したり、同じタグでもクラス分けやID分けして指定できるんですね

猫田さん
猫田さん

ややこしいけど、これは使いこなせたら便利……なのかな?

CANIT先生
CANIT先生

そうですね。 とても便利ですし、慣れていけばそこまでややこしいものでもありませんよ

よく使うプロパティ

CANIT先生
CANIT先生

では次によく使うプロパティを見ていきましょう。プロパティを覚えると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:表示位置(左からの距離)を指定

牛山くん
牛山くん

さすがに全部覚えるのは大変そうですね

CANIT先生
CANIT先生

一気に全部覚える必要はありませんよ。使う必要が出てきたときに、どのプロパティを使うのかを確認してCSSを書いても良いです

牛山くん
牛山くん

なるほど。 それなら大丈夫そうですね

猫田さん
猫田さん

大丈夫! 大丈夫!

初めてCSSを触る人へ:まとめ

パソコン 女性
CANIT先生
CANIT先生

というわけで、以上がCSSの基本的な書き方になります

牛山くん
牛山くん

なんか一気にできることが広がった気がします

CANIT先生
CANIT先生

そうですね。まだCSSのほんの入り口ですけど、今回の講義の内容を理解するだけでも、大きく成長しますよ

HTMLは文章構造を定義し、CSSは文章の装飾を定義するのが役割です。

CSSはセレクタ・プロパティ・値を組み合わせた書式で書きます。CSSを書くときは専用ファイルを用意し、それをHTMLファイルから読み込むのが一般的な方法です。外部ファイル化により管理が楽になります。

まずは簡単なプロパティから覚えていくのが上達への近道です。

猫田さん
猫田さん

よーし、この調子で、次いってみよー!

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

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

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

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

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

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