BLOG

KAKYOUIN
2021.01.18

はじめてのHTML, CSS 〜初心者向けに解説〜

みなさんがWebブラウザ上でよく目にするホームページ。

ホームページ制作において、「HTML」「CSS」が使われていることはご存知でしょうか?

「HTMLやCSS聞いたことはあるけど、実際よくわからない。」

「ホームページを作ってみたいけど、何から始めたら良いのかわからない。」

という方に向けてHTMLとCSSの基礎を解説してきたいと思います。

これからホームページ制作を始めてみたい、プログラミング学習に挑戦したいという方にとって、HTMLとCSSを理解することはとても大事なことです。

初心者の方でも分かりやすいと思えるような表現で解説していきますので、学習のきっかけにしていただけると嬉しいです。

HTMLとは

HTMLとは「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ」の略で、マークアップ言語と呼ばれている言語の一つです。

私たちが普段からブラウザを通して見ているWebページは、このHTMLで作られています。

時代によってバージョンが変わっていきますが、現在は「HTML5」が使われています。

HTML文書

HTMLで書かれたファイルのことを「HTML文書」と呼びます。

そしてHTML文書を「.html」という拡張子で保存し、Webブラウザに読み込ませることで、HTMLの文書の中身を表示させることができます。

HTML要素

HTML文書は「HTML要素」が組み合わさってできていて、

HTML要素は、’<’ と ‘>’のカッコで囲まれたタグと、タグの中のコンテンツで構成されています。

例:<h1>これはテストです。</h1>

HTML要素はコンテンツにどのような意味を持たせたいかによって使い分けられます。

例:<h1> 見出し、 <img> 画像、 <strong> 強調

ブロック要素とインライン要素

要素はさまざまな種類がありますが、通常は「ブロック要素」と「インライン要素」に分かれています。

ブロック要素は、一つのかたまりとして扱われ、親要素が占めている領域(ブロック)と同じ領域を占めます。そのため、ブラウザではブロック要素を追加するごとに前後に改行されます。

インライン要素は、文書の一部として扱われ、その要素自体が示す空間のみを占めます。

そのため、ブラウザでは前後に改行が入らず、横につながっていきます。

・ブロック要素の例:<div>, <h1>-<h6>, <p>

・インライン要素の例:<span>, <a>, <b>, <img>

HTML要素の書きかた・HTML文書のブラウザ検証

実際にタグとコンテンツを組み合わせるとどのようなHTML要素の書きかたになるのでしょうか。

以下のサンプルのように開始タグと終了タグでコンテンツをはさみます。

終了タグには ” / “スラッシュを含め、HTM要素は終わりだということを示します。

いっぽうで、開始タグにはスラッシュを含みません。

<h1>これはテストです。</h1>

上記のHTML要素をもったHTML文書はどのようにブラウザに表示されるか検証してみると、

以下のように「これはテストです。」と表示されるようになりました。

HTML文書の基本構造

HTML文書には、HTML要素が組み合わさってできていますが、基本的な構造が存在します。

<!DOCTYPE HTML>は宣言文と呼ばれ、このHTML文書が「HTML5」で書かれていることを示しています。

<html>要素は、文書内全ての要素を囲むために使われ、ルート要素と呼ばれます。

<head>要素は、外部ファイルやツールを読み込んだり、ページタイトルなどを記述する目的で使われます。headタグで囲まれたコンテンツはブラウザには表示されません。

<body>要素は、ブラウザに表示するための内容を記述するために使われます。

以下の例のように <h1>これはテストです。</h1> は、bodyタグの中に記述します。

CSSとは

CSSは、「Cascading Style Sheet(カスケーディング・スタイル・シート)」の略で、HTMLで記述された文章のデザインを整えるためのスタイルシート言語と呼ばれています。

また、HTMLと同様にバージョンが変わっていきますが、現在は「CSS3」が使われています。

CSSファイル

HTML文書を「.html」という拡張子で保存したように、CSSは「.css」の拡張子でファイルを保存します。

セレクタ、プロパティ、値

スタイルを加えるためには、以下のように指定する必要があります。

・セレクタ: スタイリングを加えたいHTMLの要素を指定する記述

・プロパティ: 指定したHTML要素の何をスタイリングするか記述

・値: スタイリングの実装の記述

この3つを指定することで、HTML要素の見た目を変更することができます。

以下を例にすると、

h1 が「セレクタ」、color: が「プロパティ」、red; 「プロパティに対する値」に当てはまります。

プロパティの例:color, background-color, font-size, width, height

CSSの読み取り・ブラウザ検証

ここまでで、基本的なCSSの書き方をみることができました。

それでは実際にHTMLとの紐付けと、ブラウザでの検証をしてみましょう。

先ほどHTML文書の基本構造として、headタグの中に記述をすると説明しました。

CSSファイルをheadタグに書くことで、CSSファイルが読み込まれるようになります。

CSSファイルをstyles.cssとして保存した場合、以下のように記述します。

<link rel=”stylesheet” href=”./styles.css”>

これでブラウザ検証をしてみると、以下のようにh1タグの中の文章が赤色に変わりました。

検証のとおり、

・HTML上でCSSファイルを読みこませる

・セレクタ、プロパティ、値を指定する

この基本的な2点をおさえることで、HTMLの見た目を変更することができるのです。

まとめ

HTMLとCSSの基本的な役割や使いかた、HTMLとCSSの関係性について紹介しましたが、いかがでしたでしょうか。

HTMLとCSSは、Webブラウザ上の見た目を作るので、実装したことを自分の目で確かめて実感することができる面白さがあります。

それぞれのルールはありますが、基本的な使いかたを知ってしまうと、感覚的に覚えていけるものです。

まずはこの基本をおさえ、さらに応用的な技術を学んでいきましょう。

お見積もり ご相談
お問い合わせ