PC-More

PCの便利化、Windowsのフリーソフトや、カスタマイズ方法の紹介。

HTMLとCSSの初心者講座

HTMLとCSSの最低限の基本を、なるべく簡単に解説します。

目次

HTMLとは

HTMLとは、WEBページの内容を書くテキストファイル(文書ファイル)です。

文章、リンク、画像、音声、動画、などを表示するように記述出来ます。

CSSとは

CSSとは、WEBページのデザインを書くテキストファイルです。スタイルシートとも呼びます。

文字色、背景色、サイズ、装飾、などを指定します。

HTMLタグとは

HTMLタグ」とは、HTMLを記述するのに使うマーク(目印)です。

主に、「ここに〇〇を入れる」や、「ここから、ここまでを、こうする」という意味合いで使います。

又、タグは「要素」とも呼びます。

タグの書式

タグは半角の「< >」で囲んで記述します。

例えば、改行を表す「BR」タグなら、「<br>」という感じで記述します。

これで、そこに改行が挿入されます。

開始タグと終了タグ

タグは、「開始タグ」と「終了タグ」(閉じタグ)がセットで使われる事が多いです。

終了タグには、半角「/」が付きます。

例えば、段落を表す「P」タグなら、「<p>今日は晴れでした。</p>」という感じで記述します。

終了タグの無い単独タグの場合は、XHTMLの文法である「<br />」という、末尾に半角スペースと半角スラッシュを付加した形式で記述しても良いですが、HTML5では「<br>」のような形式が推奨されているようです。

属性

開始タグ(要素)の中には、「属性」というものを書き込む事が出来ます。
これは、そのタグの設定のようなものです。

例えば、リンクを表す「A」タグなら、
「<a href="https://www.yahoo.co.jp/">こちらをクリック</a>」
という感じで記述します。

href」属性で、
https://www.yahoo.co.jp/」を値として指定していますから、
こちらをクリック」という一文をクリックすると、
https://www.yahoo.co.jp/」へとジャンプするようになります。

簡単なHTMLを作成する

簡単なHTMLファイルを作ってみましょう。

作成

Windows付属のメモ帳等のテキストエディタを起動します。

以下のHTMLサンプルを書き込むか、コピー&ペーストします。

手打ちで書き込む場合は、基本的にHTMLの構文は半角文字で記述する点にご注意ください。
こんにちは」のような本文全角文字でも構いません。

以下は、「HTML5」(バージョン)の例です。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<p>本文</p>
</body>

</html>

保存

テキストエディタにHTMLを記述したら、
上部メニューの「ファイル」をクリックし、
名前を付けて保存」をクリックし、
出た画面の左の欄保存場所を選択し、
文字コード」を「UTF-8」にし、(メモ帳の場合)
ファイル名を「index.html」、あるいは、任意のファイル名を入力し、
末尾は「.html」か「.htm」にし、Enterキーを押して保存します。

index.html」というファイル名は、フォルダにアクセスした場合に表示される一般的なファイル名です。

つまり、
http://〇〇〇.com/aaa/」にアクセスすると、
http://〇〇〇.com/aaa/index.html」が表示されるという意味です。

文字コードを指定出来ないテキストエディタの場合は、
<meta charset="UTF-8">」を
<meta charset="Shift_JIS">」にしてください。

表示

保存したHTMLファイルをダブルクリックして開きます。

WEBブラウザ(インターネットを見るソフト)が起動して、「本文」とだけ表示されれば成功です。

滅茶苦茶な文字が表示される場合は、実際の文字コードと、ファイル内で指定されている文字コードが合っていない可能性があります。

解説

先述のHTMLの重要な部分だけを解説します。

<html ~ </html>」は、HTML全体を囲むタグです。

<head> ~ </head>」は、そのHTMLに関する設定や情報を記述するタグです。

<meta charset=" ~ ">」は、文字コード(文字解釈の種類)を記述するタグです。

<title> ~ </title>」は、WEBページのタイトルを記述するタグです。

<link ~ href="style.css">」は、そのHTMLファイルと外部ファイルを結びつける為のタグです。終了タグはありません。今回は、「href」属性で、HTMLと同じ場所にある「style.css」ファイルを指定しています。

<body> ~ </body>」は、WEBページの内容を記述します。WEBページ上に表示したい文章や画像等を記述します。

上記で解説しなかった部分は、通例の記述です。詳しく知りたい場合はWEB検索なさってみてください。

考え方として一番重要なのは、HTMLタグが大枠としてあり、その中に、入れ子として、HEADタグBODYタグの順に入っているという点です。そして、それらの中に更に入れ子で詳細なタグが入っている感じです。

このように、HTMLは基本的に入れ子状に記述します。

編集

保存したファイルを編集するには、テキストエディタメモ帳等で開いて編集します。

スタイルを適用する

スタイルシート(CSSファイル)を作成して、上記のHTMLサンプルにスタイルデザイン)を適用してみましょう。

作成

Windows付属のメモ帳等のテキストエディタを起動します。

テキストエディタの画面に、以下のCSSサンプルを書き込むか、コピー&ペーストします。

手打ちで書き込む場合は、基本的にCSSの構文半角文字で記述する点にご注意ください。

@charset "UTF-8";

body{
background: #80bfff;
color: #ffffff;
}

簡単に説明しますと、

@charset " ~ ";」は、文字コード(文字解釈の種類)を表しています。1行目に記述します。

body{ ~ }」は、「body」タグに関するスタイルである事を表しています。

background: ~;」は、背景を指定しています。

color: ~;」は、文字色を指定しています。

#〇〇〇〇〇〇」は、HTMLカラーコード(色のコード)を指定しています。これは、WEB検索すると取得出来るサイトやフリーソフトが見付かります。

保存

テキストエディタにCSSを記述したら、
上部メニューの「ファイル」をクリックし、
名前を付けて保存」をクリックし、
出た画面の左の欄保存場所を選択し、
文字コード」を「UTF-8」にし、(メモ帳の場合)
ファイル名を「style.css」と入力し、Enterキーを押して保存します。

今回はHTMLサンプルに記述した「style.css」というファイル名を使用しましたが、これは任意のファイル名です。

文字コードを指定出来ないテキストエディタの場合は、
@charset "UTF-8";」を
@charset "Shift_JIS";」にしてください。

表示

HTMLファイルをダブルクリックして開きます。

WEBブラウザが起動して、「青い背景に、白い文字」になっていれば成功です。

解説

以下はCSSの書式です。

セレクタ{
プロパティ: 値;
プロパティ: 値;
}

セレクタ」は、対象とする場所です。

先述のCSSサンプルでは、「body」タグを指定しています。

body」タグは、WEBページの内容部分の一番外側の大枠ですから、ここで指定したスタイルの中には、その中にある要素(タグ)にも受け継がれるものもあります

受け継がれたスタイルとは別のスタイルを適用したい場所には、別にスタイルを記述します。

以下は、「BODY」タグとは別に、「P」タグのスタイルを指定する例です。
こう書く事で「P」タグだけスタイルが変わります。

body{
background: #80bfff;
color: #ffffff;
}

p{
background: #dddddd;
color: #000000;
}

CSSでの場所の指定方法

CSSでの場所(セレクタ)の指定方法についてです。

要素での指定

body」タグを指定をしたい場合は、以下のような感じで記述します。

body{
background: #dddddd;
}

「中にある」という指定

body」タグの中にある全ての「div」タグ
という指定をしたい場合は、以下のように記述します。

body div{
background: #dddddd;
}

DIV」タグは、ただの四角い箱のようなもので、特に意味は持ちません。何かを囲みたい場合に使う汎用的なタグです。

「直下の」という指定

body」タグ直下にある「div」タグのみ、
という指定をしたい場合は、半角の「>」を使って、以下のように記述します。

body」タグの中にある「div」タグの中にある「div」タグには影響しません。

body > div{
background: #dddddd;
}

又、セレクタの指定方法は多数ありますので、詳しく知りたい方は「セレクタ CSS」等のワードでWEB検索なさってみてください。

IDとクラス

タグ(要素)に「ID」と「クラス」というものを付ける事により、より詳細なスタイルの指定が出来ます。

IDを指定する

ID」とは、「識別用の名前」です。

これを付ける事により、そのタグ内だけスタイルを変更出来ます。

そのHTML内に、同じ名前のIDは複数使えません1つのみです。

HTMLでの書式は「id=""」という形式です。

以下は、DIVタグに「aaa」というIDを付ける例です。

<div id="aaa">xxx</p>

CSSには、以下のような感じで記述します。

ID名の前に、半角「#」を付けて記述します。

#aaa{
background: #dddddd;
}

aaa」というIDが付いた「DIV」タグ、
という指定は、以下のような感じで記述します。

div#aaa{
background: #dddddd;
}

クラスを指定する

クラス」(class)とは、「部類、種類」の事です。

これを付ける事により、そのタグ内だけスタイルを変更出来ます。

そのHTML内に、同じ名前のクラスは複数使えます

HTMLでの書式は「class=""」という形式です。

以下は、Pタグに「aaa」というクラスを付ける例です。

<p class="aaa">xxx</p>

CSSには、以下のような感じで記述します。

クラス名の前に、半角「.」(ドット)を付けて記述します。

.aaa{
background: #dddddd;
}

aaa」というクラスが付いた「DIV」タグ、
という指定は、以下のような感じで記述します。

div.aaa{
background: #dddddd;
}

又、クラスの場合は、以下のように、1つのタグに複数のクラスを付ける事も出来ます。
半角スペース区切りで記述します。

<p class="aaa bbb ccc">xxx</p>

ブロックレベル要素とインライン要素

要素(タグ)には、「ブロックレベル要素」と「インライン要素」があります。

簡単に言うと、
ブロックレベル要素」=「ボックス(箱)
インライン要素」=「文章中の範囲
です。

HTML5には、より詳細な分類がありますが、今回は割愛します。

ブロックレベル要素

ブロックレベル要素のタグで囲まれた部分は、その部分が四角いボックスで囲まれます

ボックス自体は、CSSで背景色や枠線を付けないと見えません。

「ブロックレベル要素」のタグは、
DIV」タグ(ただのボックス
P」タグ(段落
H1」~「H6」タグ(見出し
等があります。

インライン要素

インライン要素は、主に文章中の範囲に使用します。

タグで囲まれた部分に機能やスタイルを付ける事が出来ます。

「インライン要素」のタグは、
SPAN」タグ(ただの範囲指定
A」タグ(リンク
STRONG」タグ(強めの強調
EM」タグ(強調
等があります。

ファイルやフォルダのパス(場所)について

ファイルやフォルダのパス(場所)についてです。

絶対パス

http://」や「https://」等から始まるパスです。

  • 外部サイトへのリンクに使われます。
  • サイト内リンクに使う場合は、ローカル(PC上)での表示を確認が出来ません
  • 記述が長くなります

相対パス

そのファイルから見て、リンク先がどの位置にあるかを記述します。

これを記述したファイルと同じ場所にある「xxx.css」へのリンクであれば、
xxx.css」か「./xxx.css」と記述します。

一つ上の階層(フォルダ)にある「xxx.css」へのリンクであれば、
../xxx.css」と記述します。

二つ上の階層にある「xxx.css」へのリンクであれば、
../../xxx.css」と記述します。

二つ上の階層にある、「bbb」フォルダにある、「xxx.css」へのリンクであれば、
../../bbb/xxx.css」と記述します。

  • ローカルでも表示を確認出来ます
  • 記述が短いです

ルートパス(ルート相対パス)

サイトの一番上の階層(ルート)から見ての場所を記述します。

http://〇〇〇.com/aaa/xxx.css」というファイルであれば、
/aaa/xxx.css」と記述します。

  • ローカルでは、「HTTPサーバー」という種類のプログラムを動作させないと表示を確認出来ません
  • 記述がやや長いです
  • ルートからの位置が分かりやすいです

実用例

以下のようなWEBページを作成する例を挙げたいと思います。
HTML5」での例です。
画像

ダウンロード

サンプルをダウンロードして確認したい場合はこちらから保存してください。

ダウンロードしたファイルを解凍して、テキストエディタやメモ帳で中にあるHTMLファイルやCSSファイルを開いてみてください。

HTMLソース

以下は、HTMLのソース(記述)です。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>カレーの作り方|田中のレシピ</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<header>
<h1>田中のレシピ</h1>
</header>

<main>
<article>
<h2>カレーの作り方</h2>
<p>カレーの作り方をご紹介します。</p>

<section>
<h3>切る</h3>
<p>鶏肉、玉ねぎ、じゃがいも、にんじんを一口大に切ります。</p>
</section>

<section>
<h3>炒める</h3>
<p>鍋にサラダ油を入れて熱し、玉ねぎ、鶏肉、じゃがいも、にんじんを炒めます。</p>
</section>

<section>
<h3>煮る</h3>
<p>水を入れて、沸騰したらあくを取り、弱火~中火で15分程煮込みます。</p>
</section>

<section>
<h3>ルウを入れる</h3>
<p>一旦火を止めて、ルウを入れて溶かし、弱火でとろみがつくまで10分程煮込みます。</p>
</section>

</article>
</main>

<footer>
<small>Copyright (C) 2018 田中のレシピ All Rights Reserved.</small>
</footer>

</body>
</html>

CSSソース

以下は、CSSのソースです。

@charset "UTF-8";

*{
padding: 0;
margin: 0;
}

body{
background: #444444;
color: #222222;
font-family: "Yu Gothic UI","Yu Gothic","Meiryo","MS UI Gothic";
}

header{
background: #E6BE91;
padding: 2em 1.5em;
color: #ffffff;
}

header h1{
font-size: 200%;
color: #ffffff;
}

article{
padding: 2.5em 1.5em;
background: #ffffff;
}

section{
padding: 0 2%;
margin: 2em 0 0 0;
}

main h2{
color: #777777;
padding: 0.5em 0.7em;
margin: 0 0 0.7em 0;
border-left: 4px solid #E6BE91;
font-size: 200%;
}

main h3{
color: #777777;
padding: 0.5em 1em;
margin: 0 0 1em 0;
border-left: 4px solid #E6BE91;
font-size: 150%;
}

p{
padding: 0 4% 0 2%;
margin: 0 0 1em 0;
}

footer{
padding: 2em 1em 3em 1em;
text-align: center;
color: #ffffff;
}

解説

サンプルで使用したHTMLのタグの簡単な説明です。

  • header」 = ヘッダー部分
    (表示されるWEBページの上部にあるヘッダー部分。「head」タグとは別。)
  • main」 = メインコンテンツ部分
  • footer」 = フッター部分
  • article」 = 記事部分
  • section」 = 汎用的な仕切り・節・項
  • h1」 = 1番大きな見出し
  • h2」 = 2番目に大きな見出し
  • h3」 = 3番目に大きな見出し
  • p」 = 段落
  • small」 = 注釈

サンプルで使用したCSSの簡単な説明です。

  • background: #カラーコード;」 = 背景
  • border: サイズ 線の種類 #カラーコード;」 = 枠線
  • border-left: サイズ 線の種類 #カラーコード;」 = 左の線
  • color: #カラーコード;」 = 文字色
  • font-size: サイズ;」 = フォントサイズ
  • margin: サイズ;」 = 外側の他の要素との距離
  • padding: サイズ;」 = 内側の余白
  • text-align: 位置;」 = 文章の揃え位置
  • font-family: "フォント名","フォント名"・・・;」 = フォント(文字の種類。左から優先。)

*{ ~ }」は、全ての要素(タグ)のスタイルを表しており、今回の例では、内側と外側の余白をゼロにリセットしています。完璧に全ての要素に適用される訳ではないですが、大体の要素に適用されます。

margin」と「padding」のサイズ指定の方法は、
上・右・下・左」(例:10px 20px 30px 40px)
上下・左右」(例:10px 20px)
四方」(例:10px)
という感じです。

単位は、
px」(ピクセル)
em」(1文字分)
等があります。

詳細を知りたい場合の検索方法は、
CSSの「border」について詳しく知りたい場合は、「CSS border
CSSでボックス要素等の横幅を指定したい場合は、「CSS 横幅
HTMLの「section」タグについて知りたい場合は、「HTML section
HTMLで画像を貼りたい場合は、「HTML タグ 画像
という感じでWEB検索してみてください。

注意点

上記サンプルは、あくまで私の記述例であり、大まかな仕組みを理解する為のものです。HTMLのテンプレート(雛形)ではありません。

WEBで色んな方の記述例も参考になさってください。

又、HTML5は古いWEBブラウザでは表示出来ませんので、古いブラウザにも対応させたい場合は、「html5shiv」というJavaScript(WEBページ用のプログラム)を利用する方法があります。

又、HTML5のブロック要素のタグは、古いブラウザではインライン要素として認識されてしまう場合がありますので、CSSにて「display: block;」と記述しておくと無難です。以下のような感じです。

header,main,footer,nav,aside,article,section{
display: block;
}

コメントを書く

HTMLやCSSには、自分が分かりやすいようにコメント(メモのようなもの)を書き込む事も出来ます。これは実際の表示には影響しません

HTMLの場合

<!-- ~ -->」がコメントとなります。

<!-- 1行コメント -->

<!--
複数行コメント
複数行コメント
複数行コメント
-->

CSSの場合

/* ~ */」がコメントとなります。

/* 1行コメント */

/*
複数行コメント
複数行コメント
複数行コメント
*/

HTMLとCSSの構文のチェック

HTMLやCSSの構文が正しいかチェックするWEBツールがあります。

HTMLの構文のチェックは、こちらの「The W3C Markup Validation Service」のページで出来ます。

タブで入力を切り替える事が出来ます。

「Validate by URI」=URLをチェック
「Validate by File Upload」=ファイルをアップロードしてチェック
「Validate by Direct Input」=直接入力してチェック
です。

CSSの構文のチェックは、こちらの「W3C CSS 検証サービス」のページで出来ます。

こちらもタブで入力を切り替える事が出来ます。