HTML&CSSの基本を初心者向けに簡単解説！書き方や必要なものも
※本ページはプロモーションが含まれています。
Web制作のスキルを身に付けたい！WordPressのブログをカスタマイズしてみたい！
そんな時肝になるのがHTMLやCSSの最低限の基礎知識。
だけど、HTMLやCSSって覚える用語が多そうで学習に時間がかかりそう…時間もないし中途半端な知識のままで出来るのか不安（ ; ; ）
と、こんなお悩みをお持ちの方もいらっしゃるかもしれません。
そこで今回は、Web制作のスキルをこれから身に付けたい初心者の方を対象に、HTMLとCSSの基礎知識を徹底解説していきます！
この記事の内容
- HTML &CSSの基本的な役割
- 記述に必要なものは？
- HTMLの基本的な書き方とデータ作成方法
- CSSの基本的な書き方とデータ作成方法
この記事の内容
HTML&CSSの基本！役割を初心者向けに解説
最初にHTMLとCSSがどんな役割を持つものなのか、その基本から見ていきましょう！
まず、HTMLとCSSの役割を凝縮して一言で表すと、HTMLは「言葉や画像に意味をもたせるもの」、CSSは「全体から細部まで体裁を整えるもの(デザイン)」となります。
…かなり分かりにくいかもですが、この辺りは感覚で頭に入れておいてもらえればと思います。
これらのHTMLとCSSのファイルはパソコンのテキストエディッタやメモ帳で簡単に作成する事が出来ます。
特別な環境は要りません！WindowsやMacなどのパソコンがあればOKです。
それではHTMLとCSSそれぞれの基本的な役割について解説していきますね！
HTMLの基本的な役割
まずはHTMLデータのWebサイトにおける基本的な役割から。
HTMLとはHyperText Markup Languageを略したもので、「テキストをマークアップしていく役割の言語」になります。
テキストをマークアップ…、ちょっとイメージが湧きづらいですよね。
例えば、新聞や企業のパンフレットを想像してみて下さい。
企業のパンフレットだと、タイトルや目次メニュー、商品概要など見た目ですぐに判りますよね。
ですが、ブラウザ上ではテキストを並べただけでは意味や大まかな見た目は伝わりません。
そのため、タイトルや文章、その他のコンテンツに「タグ」と呼ばれるもので意味を持たせる必要があります。
この構造をブラウザ上で表現するために、HTMLが用いられています。
CSSの基本的な役割
次にCSSデータの基本的な役割。CSSもCascading Style Sheetsという正式名称を略した言葉になります。
CSSは、HTMLで仕上がったホームページにデザイン要素を加える事、また、体裁を整える事がCSSの基本的な役割です。
先ほど説明したHTMLのみでホームページを作成した場合、テキストは全て黒文字で画像サイズもバラバラといったような、非常に閲覧しにくいページとなってしまいます。
イメージし辛いですが、例えるなら何も装飾を加えておらず、黒文字のみで文字サイズも変化のない単調なレポート用紙のような感じですかね。
このようにHTMLだけでは実現出来ないサイズの調整やレイアウトの組み立てを、CSSで全て補完出来るというわけです！
HTML&CSSの記述や学習で必要なものは？
基本的な役割を理解できたとこで、HTMLとCSSの具体的な記述方法の前に、記述など学習に必要な準備物を説明しますね。
必要なものと言っても、パソコン1台があればすぐに取り組みことが可能です！
ではどんなツールが必要か下記に挙げると…
- 専用のテキストエディタ
- ブラウザソフト
- ある程度の時間
- ある程度のやる気
これだけです！今回ホームページを公開するわけでないので、レンタルサーバーを契約する必要はありません。
コーディングのための専用テキストエディタ
HTML&CSSでプログラムを記述することを「コーディング」と呼びますが、このコーディングには専用のテキストエディタがあると大変便利です！
専用のテキストエディタとは、プログラミングに特化したメモ帳のようなものとお考えください。
テキストエディタは無料で利用出来るソフトが多く存在し、例えばMac OSなら「Atom」や「Coteditor」、windowsなら「さくらエディタ」などが有名ですね。
パソコンの既存ソフトを使っても対応出来ますが、上記のテキストエディタの方が効率よく学習出来ますし、作業が捗りますのでこの機会にインストールしておきましょう！
なお、Macにおすすめの無料テキストエディタに関しては下記の記事にまとめています。
ChromeやSafariなどのブラウザソフト
ウェブ制作で必須なのが、ホームページを表示するためのブラウザ！当然ですが、ブラウザがないと表示や動作確認も何も出来ません。
windowsなら「Edge」、Mac OSなら「Safari」がそれぞれ標準搭載されていますよね。
当然既存ブラウザでも問題ないのですが、これらとは別にGoogleが開発しているブラウザ「Chrome」もインストールしておくことをおすすめします！
Chromeにはウェブ制作に最適な機能が揃っており、パソコンに導入しておくと非常に便利です。
また、リモートワークする際にも何かと便利な関連ツールが用意されているので、もしご自身のPCにChromeがないという方はこの機会に入れておきましょう。
HTMLの基本的な書き方とデータ作成方法
それではHTML言語の基本的な書き方とデータの作成方法について解説していきます。
まず、HTMLの基本的な記述として、「< タグ > HTMLの基本的な書き方< /タグ >」というような書き方をします。
では実際にどのように使うのか、下記に例を挙げてみますね。
<h2>このタグに囲われた部分は任意のテキスト</h2>
<p>このタグに囲われた部分は任意のテキスト</p>と、こんな感じです。複雑な感じは全然しないですよね。
上記はウェブサイト上で頻繁に使うタグですが、現段階では「こんなタグがあるんだ」という位の認識で問題ないです。
一先ず、タグの記述例を挙げたので、次は実際にブラウザ上でどのように表示されるかを見ていきましょう！
パソコン上にHTMLファイルを作成しよう
ここからはパソコン上にHTMLファイルを作成する手順を解説していきます。
大まかな手順としては下記の通りです。
- 保存用のフォルダを用意
- テキストエディタを開く
- 宣言文を記述
- HTMLファイルを作成し保存
- ブラウザで開く
1. テスト用のフォルダを作成する
まずはパソコン上にHTMLファイルを保存する専用のフォルダを作成していきます。
フォルダ名は任意のもので結構です！「ウェブ制作学習」、「HTMLのテスト」分かりやすい名前に設定しておきましょう。
後々解説するCSSファイルもこのフォルダに保存するので、HTMLの作成が完了しても消さずに置いておいて下さいね！
2-3. テキストエディタを開きHTML言語を記述
フォルダの設置が完了したら、「…記述や学習で必要なもの」で紹介したコーディングに適したテキストエディタソフトを起動します。
専用のソフトが現時点でない場合は、メモ帳等で問題ありません。
ソフトを起動できたら下記のテキストを記述します。コピペでも全然構いません！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習(好きなタイトルでOK!)</title>
</head>
<body>
<!-- bodyタグの中身がブラウザに反映されます -->
<h1>HTMLの練習</h1>
<p>タグ間のテキストがブラウザに表示</p>
<!-- ここまでの内容がブラウザに表示されます -->
</body>
</html>4. HTMLファイルを作成し保存する
上記の記述が完了したら、HTMLファイルとして保存します。保存先は、先ほど手順1で作成したフォルダにします。
ファイル名は「index.html」として下さい！これでHTMLファイルの作成が完了しました。
5. HTMLファイルをブラウザで開く
HTMLファイルの作成が完了したので、次は実際にブラウザで開いて表示を確認してみましょう。
作成した「index.html」を右クリックで、ブラウザで開くを選択します。ドラッグ＆ドロップでも問題ありません。
するとブラウザではタグの部分が消えて、「HTMLの練習」と「タグ間のテキストがブラウザに表示」のテキストが2行で表示されているはずです。
このようにHTMLでは特段複雑なプログラミングをする必要はなく、タグの間にテキストや画像などを指定することで、簡単にブラウザ上で表示できるのです。
Web制作でよく使うHTMLタグの書き方
HTMLの基本的な記述方法がわかったところで、次はホームページやブログで頻繁に使うであろうタグを紹介していきます！
通常のWeb制作ではもちろん、WordPressのカスタマイズに必須になるようなタグなので、ブログなど運営している方は是非参考にしていって下さい。
まず、定番のHTMLタグをいくつか挙げると…
- h1〜h6タグ(タイトルに使う)
- divタグ(ブロック要素)
- spanタグ(インライン要素)
- aタグ(リンクに使う)
- imgタグ(画像に使う)
- ul, liタグ(リストに使う)
- tableタグ(表に使う)
それでは一例とともにタグの説明をしていきます。
h1〜h6タグの使い方一例
h1〜h6タグはウェブサイト上のタイトルやサブタイトルに使う「見出し」や「小見出し」と言われるタグです。
とくにWordPressのブログで文章を書いている場合は頻繁に使うタグなので、ブログ運営をされたい方は基本的ことを覚えておくのをおすすめします。
実際のタグの書き方と一例はコチラ。
<h1>最も重要な見出しタグ</h1>
<h2>h1の次に重要な小見出しタグ</h2>
<h3>h2の次に重要な小見出しタグ</h3>
<h4>h3の次に重要な小見出しタグ</h4>
<h5>h4の次に重要な小見出しタグ</h5>
<h6>h5の次に重要な小見出しタグ</h6><h1>メインタイトル</h1>
<h2>小見出し1</h2>
<p>小見出し1に関する説明やコンテンツ</p>
<p>小見出し1に関する説明やコンテンツ</p>
<h2>小見出し2</h2>
<p>小見出し2に関する説明やコンテンツ</p>divタグの使い方一例
divタグはレイアウトやグループ化など、主にデザイン的な意味で使うことが多い「ブロック要素」のタグです。
他のタグのように、特に意味を持っているわけではありませんが、頻繁に使うタグなので覚えておきましょう。
実際のタグの書き方と一例はコチラ。
<div>コンテンツ</div>
<div><h1>divタグの使い方一例</h1></div>
<div><p>divタグの使い方一例</p></div>
<div>
<h2>小見出し1</h2>
<p>小見出し1に関する説明やコンテンツ</p>
</div>divタグの使い方としては、pやh1〜h6の見出しタグのように「テキスト」を入れるのではなく、上記のように「タグ」を入れてグループ化するのが一般的な使われ方です。
spanタグの使い方一例
spanタグは上記で紹介したdivタグと同様にとくに意味を持ち合わせていません。
主に、テキストなどに細かい飾り付けで使う「インライン要素」のタグです。
実際のタグの書き方はコチラ。
<p><span>テキストなど</span></p>aタグの使い方一例
aタグとは、ホームページ内でのリンク設定に使う重要なタグです。
リンクは直訳すると「関連付け」や「紐付け」を意味しますが、ウェブサイト上では別ページへ移動したり他のサイトに飛ぶことを意味します。
aタグの「href属性」に任意のURLを指定することが可能で、ウェブ上のテキストや画像に利用できる大変便利なタグです。
実際のタグの使い方一例はコチラ。
<a href="https://◯◯◯.com">リンク先のページへ</a>imgタグの使い方一例
imgタグは画像をサイト上に表示する際に使うタグです。「src」という属性にパスを指定することで画像を表示出来ます。
その他に、width(画像の横幅のサイズ)、height(画像の高さのサイズ)、alt(代替テキスト)などといった属性があるので、それぞれに任意の値やテキストを入力していきます。
実際のタグの使い方一例はコチラ。
<img src="image/sample.jpg" width="500" height="200" alt="サンプル画像" >上記の例で言うと、「imageフォルダ内」の「sampleというJPEG画像」を「横幅500px 高さ200px」 で表示しているということになります。
最初のうちは他のタグと比べると属性が多く、書き方が少し異なるように感じますが馴れてしまえば全然簡単です。
ul, liタグの使い方一例
liというタグはリスト項目を意味するタグで、箇条書き等によく多用します。
主に、ulタグやolタグとセットで使うことがほとんどで、ulタグは順不同のリスト、olタグの場合は列挙が決まっているリストに使います。
ヘッダーやフッターメニューなど活用シーンが多いタグです。
実際のタグの使い方はコチラ。
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>tableタグの使い方一例
table(テーブル)タグは表を生成するためのタグです。例えば、商品概要欄や簡単な比較表などをサイト上で表示する時に使います。
tableタグは「tr」や「th」など他のタグとセットで記述するので、初めての場合は少し複雑に感じるかもしれません。
そのtableタグの実際の使い方はコチラ。
<table>
<tbody>
<tr>
<th>項目</th>
<th>内容</th>
</tr>
<tr>
<td>項目名</td>
<td>項目の詳細</td>
</tr>
</tbody>
</table>CSSの基本的な書き方とファイルの作成方法
ここからはCSSの基本的な書き方とファイルの作成方法について見ていきましょう！
まずCSSの書き方の一例を挙げると、「p { color: red ;}」というような記述の仕方をします。
これを文章に置き換えると、「pタグ(セレクタ)」の「色(プロパティー)」を「赤色(値)にする」ということ。
このようにCSSは、「何に対して、どんな内容を、どの程度変更するか」が基本スタイルとなり、記述する内容は「セレクタ」「プロパティー」「値」の３つとなります！
一例だけでは分かりにくいので、もう少し掘り下げた物を下記に記載しますね。
h1 {
color: blue; /*h1タグのフォントの色を青*/
font-size: 30px; /*h1タグのフォントサイズを30pxに*/
font-weight: bold; /*h1タグのフォントを太く*/
}上記のように１つのセレクタに対して、複数のプロパティーを指定出来ます。
この場合だと、「h1タグの文字色を青、フォントをサイズ30pxにし太くする」という意味になります。
HTMLとは当然異なりますが、書き方は至ってシンプルなのですぐに馴れると思います！
CSSのファイルを作成しよう
最初にCSSのファイルから作成していきましょう！
HTMLのファイルの作成と同様、CSSファイルの作成手順も大まかには下記の通りです。
- 保存用のフォルダを用意
- テキストエディタを開く
- CSSファイルを作成し保存
- HTMLファイルに一文を記述
1. 保存用のフォルダを作成
先ほどHTMLファイルを保存したフォルダの中に、「CSS」という名前で新たにフォルダを作成します。
他の名称でも問題ないですが、他のファイルと混同しないために、一般的にはこの名前が使われています。
2-3. テキストエディタを開きCSSファイルを作成保存
フォルダの作成が完了したら、次にCSSファイルを作成し保存します。
CSSファイルはHTMLのように宣言文を記述する必要はありませんが、文字コードを統一させたいので、以下を冒頭に記述して下さい。
@charset "utf-8";こちらの記述が完了したら、拡張子を「.css」にして1番目で作成したCSSフォルダに保存します。
ファイル名は「style.css」としてください。
4. HTMLファイルにCSSを読み込ませる
CSSファイルの保存が完了したら、HTMLファイル側のheadタグ内にCSSファイルを読み込ませるため下記の一文を記述します。
<link rel="stylesheet" type="text/css" href="css/style.css" />
念の為記述後の内容も下記に載せておきますね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習(好きなタイトルでOK!)</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<!-- bodyタグの中身がブラウザに表示されます -->
<h1>HTMLの練習</h1>
<p>タグの間のテキストがブラウザに反映されます。</p>
<!-- ここまでの内容がブラウザに表示されます -->
</body>
</html>これで一先ずCSSのデータ作成、及び読み込ませる事が完了しました！
CSSは上記のように読み込ませるだけでなく、HTMLファイルに直接CSSを記述することも可能ですが、今回その話は割愛いたします。
idやclassの割り当てが可能なCSS
CSSでは、idやclass属性をセレクタとして割り当てることも可能です。
というのも、ウェブサイトでは一つのページに何度も同じHTMLタグを使い回すことから、それに応じたスタイルを適用させる必要があります。
そのため、このidやclass属性(セレクタ)の存在は欠かせません！
では、実際どんなものなのか下記に提示していきますね。
<h1>CSSの練習</h1>
<p>リードコピー</p>
<h2 id="sub-contents1">サブタイトル1</h2>
<p class="tx-st">サブタイトル1に関する内容</p>
<h2 id="sub-contents2">サブタイトル2</h2>
<p class="tx-st">サブタイトル2に関する内容</p>
#sub-contents1 {
font-size: 25px; /*フォントサイズを25pxに*/
font-weight: bold; /*フォントを太く*/
}
#sub-contents2 {
font-size: 20px; /*フォントサイズを20pxに*/
}
.tx-st {
font-size: 15px; /*フォントサイズを15pxに*/
}
idは「#」、class名は「.」を、任意の文字列の先頭に付けて記述します。
このように独自の文字列でidやclassを設定し、タグに割り当てるとスタイルを反映させることが出来ます。
ただ、idやclassにはそれぞれ記述ルールがあるので、そちらも確認しておきましょう１
idとclassの共通ルール
CSSのidやclass属性の記述方法は、「#(任意の文字列)」「.(任意の文字列)」となります。
文字列には半角の英数字やハイフン「-」やアンダースコア「_」の記号が使えますが、全角にしたり半角スペースを空けると機能しません。
id属性の基本的なルール
CSSのid属性は１つのHTMLファイル(1ページ内)に1回のみ使うことが出来ます。
重複して使うことはHTMLの文法上出来ないので注意が必要です。
classの基本的な特徴
CSSのclass属性は、先に紹介したid属性と違い、HTMLファイルに複数回記述することが出来ます。
何度も同じスタイルをタグに適用させたい場合は、このclass属性を利用しましょう。
覚えていきたいCSSの親要素と子要素
CSSを使いこなすには、「親要素」や「子要素」といった概念への理解も必要になります。
この親や子要素はCSSだけで説明すると分かりにくいので、HTMLの記述例も併せて載せていきますね。
まずはHTMLでの記述例をもとに、親や子要素について説明しています。
<div id="main">
<h1>HTMLの練習</h1>
<p>説明文など</p>
<div class="wrap">
<h2>サブタイトル1</h2>
<p>サブタイトル1に関する内容など</p>
</div>
</div>
上記で言うと、「main」というidセレクタが割り当てられたdivタグが親要素になり、その中に囲まれたh1やpタグは子要素という関係になります。
一文で表現すると、<親要素> <子要素> </子要素> </親要素>となります。
続いてCSS側の記述を見ていきましょう。
親や子要素を利用してスタイルを適用
CSSでは上記で説明した親や子要素という階層関係を利用して、タグに効率よくスタイルを適用することが出来ます。
では実際にh1とpタグにスタイルを適用する時のCSSの書き方を記載していきます。
#main h1 {
font-size: 25px; /*フォントサイズを25pxに*/
font-weight: bold; /*フォントを太く*/
}
#main p {
font-size: 15px; /*フォントサイズを15pxに*/
}
このように、「親要素(#main)」＋「半角スペース」＋「子要素(h1 または p)」と繋げて記述することで、子要素に好きなスタイルを適用できます！
Web制作でよく使われるCSSプロパティー
CSSの書き方とファイルの作成方法の次は、Web制作でよく使われるCSSのプロパティーを紹介していきます。
ほんの一部ですが、主に使われているCSSプロパティーの説明と一例を紹介していきます。
要素サイズや背景色を指定できるプロパティー
要素の幅や高さなどのサイズと背景色を設定できるCSSプロパティーは下記の通りです。
| プロパティー | 内容・仕様 |
|---|---|
| width | 要素の横幅を指定 |
| height | 要素の高さを指定 |
| background | 背景の色・画像・位置等を指定 |
横幅や高さを指定【width・height】
widthやheightは要素の幅や高さを指定できるプロパティーです。widthが横幅、heightが高さとなります。
指定できる単位は「px・em・%・rem」などがありますが、今回はpx(ピクセル)という単位で下記に書き方の一例を紹介します。
div {
width: 500px; /* 横幅を500pxに指定*/
height: 500px; /* 高さを500pxに指定*/
}
背景色などを指定【background】
backgroundは、要素に対して背景色の指定や画像を配置できるプロパティーです。
先ほど紹介したwidthとheightの一例に追記してみます。
div {
width: 500px; /* 横幅を500pxに指定*/
height: 500px; /* 高さを500pxに指定*/
background-color: blue;
}
フォントに関するプロパティー
フォントの種類やサイズなど指定できるCSSプロパティーは下記の通りです。
| プロパティー | 内容・仕様 |
|---|---|
| color | 文字色を指定 |
| fon-family | フォントの種類を指定 |
| font-size | フォントサイズを指定 |
| text-align | テキスト位置を指定 |
文字色を指定【color】
colorは主にテキストに対してカラーを指定できるプロパティーです。
下記はpタグやaタグの要素に対してカラーを指定した一例です。
p {
color: #222;
}
a {
color: skyblue;
}
フォントサイズを指定【font-size】
font-sizeは文字通りテキストサイズを指定できるプロパティーです。
指定できる単位は「px・em・%・rem」のいずれかです。下記はh2で囲われたテキストを20pxに指定した一例です。
h2 {
font-size: 20px; /*フォントサイズを20pxに指定*/
}
テキストや要素の位置指定【text-align】
text-alignはテキストやインライン要素の位置を水平軸で指定できるプロパティーです。
文章を左揃えにしたい時や、要素を中央に配置したい場合などに使います。
text-alignに使用できる値は「left(左寄せ)・center(中央配置)・right(右寄せ)など」があります。
h2 {
text-align: center; /* 中央配置 */
font-size: 20px; /* フォントサイズを20pxに指定 */
}
p {
text-align: left; /* 左寄せ */
}
余白を指定できるプロパティー
要素の余白を指定できるCSSプロパティーは下記の通りです。
| プロパティー | 内容・仕様 |
|---|---|
| margin | 外側との余白を指定 |
| padding | 内側の余白を指定 |
要素同士の余白を指定【margin】
marginとは要素同士の余白を指定できるプロパティーです。
指定できる単位は「px・em・%・rem」のいずれかで、上下左右の余白を設定できます。
div {
margin-top: 20px; /* 上部の余白を10px */
margin-left: 10px; /* 左側の余白を10px */
}
要素の内側の余白を指定【padding】
paddingとは要素の内側の余白を指定できるプロパティーです。
指定できる単位は「px・em・%・rem」のいずれかで、上下左右の余白を設定できます。
div {
padding-top: 20px; /* 上部の余白を10px */
padding-left: 10px; /* 左側の余白を10px */
}
この記事のまとめ
以上、今回は初心者の方向けのHTMLとCSSの基礎と書き方や使い方について解説いたしました！
HTMLやCSSに関して最初は覚える事が沢山あり難しく感じられるかもしれませんが、馴れてしまえば全然大したことありません。
これからのウェブ制作のスキル習得やWordPressのカスタマイズ等の参考に少しでもなれば幸いです。
この記事を書いた人
