Webサイトを作るときに、重要なプログラミング言語がいくつかあります。その中でもHTMLとCSSは必須のプログラミング言語です。また、Webページの表現力や機能を高めるために利用されるJavaScriptも押さえておくと、Webデザインの幅が広がります。今回はコーディング初心者の方のために、HTMLやCSS、JavaScriptの役割や特徴について取り上げます。

 

ウェブ制作の基礎をおさえる。HTML/CSS/Dreamweaver講座

 

HTML・CSS・JavaScriptを理解しよう

それでは、HTML、CSS、JavaScriptとはどのようなものなのかを解説していきます。

 

HTMLの役割とは？役割を紹介

HTML（HyperText Markup Language）とは、Webページを作成するためのコーディング言語で、主にページ内の情報を構造化し、見出し、本文などを明確化する目的で使用します。 HTMLタグで必要な文書を囲むだけで利用できるため、一般的にWeb開発に携わる人の多くが、最初に学習する言語です。

HTMLタグは、「<開始タグ>」と「</終了タグ>」で内容を囲んで記述します。例えば、「<a href=”リンク先URL”></a>」と記述すれば、リンクをクリックしたユーザーをリンク先にジャンプさせることができます。

また、HTMLと関連性のある言語にXHTML（Extensible HyperText Markup Language）があります。HTMLは記載方法が比較的自由であるメリットを持つ一方、同じ内容に対して複数の記述方法が許されるため、解釈にあいまいさが生まれるデメリットがありました。

XHTMLは文法が厳密なXML（Extensible Markup Language）をベースにしているため、より正確なコーディングが行えます。

 

HTMLとCSSの違い

HTMLとCSSはウェブ開発における重要な要素ですが、それぞれの果たす役割は異なります。

HTMLは、ウェブページの構造やコンテンツを記述するための言語です。基本的に、文書の骨格や要素を定義します。一方でCSSは、ウェブページの見た目やスタイルを定義するための言語です。つまり、HTMLがコンテンツの構造を決めるのに対し、CSSはそのコンテンツの見た目や装飾を指定します。

HTMLはウェブページの構造を定義し、CSSはその構造に対するスタイルや装飾を指定します。両者は密接に連携して、美しく整ったウェブページを作成するために使用されます。

関連記事：HTML/CSSとは？基礎知識や違い、Webページを作成するためのステップを初心者にも分かりやすく解説

HTMLのバージョン紹介

HTMLはこれまでに5バージョンリリースされており、アップデートされてきました。

HTML5回目の大幅な改訂にあたるHTML5では、セクションを表すsectionタグ、記事を表すarticleタグ、ナビゲーションを表すnavタグが導入されました。新たに導入されたタグを使うことによって、文章構造を厳密に指定することができます。

プラグインを利用することなく、JavaScriptでvideo要素やaudio要素を操作して動画やオーディオ再生ができるなど、マルチメディア機能も充実しました。

Web上では、HTML5より以前のバージョンで書かれたサイトも多く存在しています。

HTMLのタグとは？

HTMLのタグは、文書内でコンテンツをマークアップするための記号や要素です。基本的に、タグは開始タグと終了タグのペアで構成され、その間にコンテンツが入ります。HTMLタグはブラウザに対して、どのようにコンテンツを表示すべきか指示します。

HTMLタグはさまざまな役割を果たし、それぞれが特定の意味を持っています。段落、見出し、リスト、リンク、画像などの要素を表現するためのタグがあります。これらを組み合わせて、ウェブページの構造を作成することができます。

HTMLタグの種類

HTMLにはさまざまなタグがあります。それぞれのタグは特定の役割を果たします。以下にいくつかの主なHTMLタグをいくつか紹介します。

  1. 基本的な構造を定義するタグ:
    • <html>: HTML文書全体を定義します。
    • <head>: ページのメタ情報やタイトル、スタイルシートを含みます。
    • <body>: 実際のコンテンツ（テキスト、画像、リンクなど）を含みます。
  2. テキストやコンテンツを定義するタグ:
    • <h1> - <h6>: 見出しを定義します（h1が最も重要で大きく、h6が最も小さい）。
    • <p>: 段落を定義します。
    • <a>: リンクを作成します。
    • <strong>、<em>: テキストを強調したり、強調するために使用します。
  3. リストを作成するタグ:
    • <ul>: 順序なしリスト（箇条書き）を定義します。
    • <ol>: 順序付きリスト（番号付き）を定義します。
    • <li>: リストの各項目を表します。
  4. 画像やメディアを表示するタグ:
    • <img>: 画像を表示します。
    • <video>: 動画を表示します。
    • <audio>: 音声を表示します。
  5. テーブルを作成するタグ:
    • <table>: テーブルを作成します。
    • <tr>: 表の行を定義します。
    • <td>、<th>: 表のセル（データセルとヘッダーセル）を定義します。
  6. フォーム要素を定義するタグ:
    • <form>: フォームを作成します。
    • <input>: ユーザーの入力を受け付けるためのフィールドを作成します（テキストボックス、チェックボックス、ラジオボタンなど）。
    • <textarea>: 複数行のテキスト入力を受け付けます。

他にもさまざまなタグがあります。

HTMLを書く方法

HTMLを書く上で、必要な準備としては、PCとテキストエディタとWebブラウザの3つを用意してください。

ルールを覚えるまでは学習と慣れが必要ですが、HTMLを使えば、見出しの設置、表の作成、リンクの設置、画像や動画の埋め込みなどなどが簡単にできます。

HTMLの記述例

ここでは、HTMLのもっとも基本的な記述例のみを紹介します。

HTMLには118のタグが存在していますが、いずれのタグを利用するうえでも基本的に以下の要素が必要となります。

  • <!DOCTYPE html> ：HTML5で制作したファイルだと宣言する。
  • <head></head>：画面表示はされていないものの、必要なタイトルや情報が入力されている箇所。ページ内で最初に読み込まれる記述であり、そのページの基本情報が書かれている。
  • <body></body>：コンテンツが記載される箇所。
  • <h○></h○>：見出しが記述される箇所。h1~h6まである。
  • <p></p>：段落が記述される箇所。

 

<!doctype html>
<html>
<head></head>
<body>
<section>
<h1>見出しが入ります</h1>
<p>本文が入ります</p>
</section>
</body>
</html>

 

段落や画像設置の方法は、以下の記事を参考にしてみてください。

HTMLとは？基礎知識や書き方の基本を解説

CSSとは？役割を紹介

CSSの役割
HTMLがWebページに表示される実際のテキストや画像を記述するのに対し、CSS（Cascading Style Sheet）はテキストや画像の見栄えを良くするために、文字の大きさを変えたり、表示位置を調整したり、色を設定したりする役割を持っています。

CSSとは、Cascading Style Sheetsの略で、HTMLを装飾しWebサイトのテキストや画像をきれいに見せる役割があります。 HTMLとCSSの違いは指定する対象で、HTMLは文書の構造、CSSは色やサイズなどの装飾を指定します。 CSSはHTMLのように単体では使用できないため必ずHTMLとセットで使用します。

HTMLにもレイアウト用のタグが存在し、以前はそのようなタグを使ってレイアウトを記述しているHTMLファイルも多くありました。しかし、Webコンテンツの多様化により、すべてのレイアウト情報をHTMLに記述するとソースコードが複雑になり、コーディングに手間がかかります。現在ではレイアウトに関する情報はCSSにまとめて記述するケースが増え、「Webページの文書構造はHTML、デザインはCSSで指定する」ことが一般的です。

また、CSSは複数デバイスに対応させるコンテンツの作成に便利です。PCとモバイルの両方に適したレイアウトが必要な場合、各端末用のCSSを用意すれば、単一のHTMLファイルでデバイスに合わせて表示を切り替えることが可能です。

 

CSSのバージョン紹介

CSSにはCSS1、CSS2、CSS3という3つのバージョンが存在しており、現在は最新版のCSS3が主流となっています。CSS3では背景画像を設定するbackground-imageプロパティにおいて、要素に複数の画像を指定できるようになりました。

例えば、p{background-image: 画像1のURL, 画像2のURL, 画像3のURL;}と書けば、段落に3つの背景画像を表示させることができます。

また、文字に影を付けるtext-shadowプロパティとbox-shadowプロパティが追加されたことで、CSS3以前のように文字やボックスに影を付ける際に画像を利用する必要がなくなりました。

スマートフォンが当たり前になり、モバイルフレンドリーなWebサイトが検索エンジン上で評価されやすいアルゴリズムが生まれている現在、Webデザインに関わる上でCSS3の習得は欠かせないといえるでしょう。

CSSを書く方法と記述例

CSSを書く方法は大きく分けて3つあります。

 

  • CSSファイルを作って読み込む
  • インラインで記述する
  • head内に記述する

この中でも、もっともよく使われるのが「CSSファイルを作って読み込む」です。以下のようなHTMLコードの書かれたファイルを用意して、「index.html」のファイル形式でPCフォルダに保存しておきましょう。

 

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

<head> <meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head> <body>

<h1>見出しです</h1>

<p>本文です。</p>

</body> </html>

 

続いて、このHTMLファイルとつなげるためのCSSファイル（style.css）を作成します。

 

h1 {

color: #ff0000; /* #ff0000は、「赤色」を表す色の指定方法です *

/ }

 

その後、HTMLファイル内にlinkタグを設置し、HTMLファイルとCSSファイルをつなぎます。

 

<link rel="stylesheet" href="style.css">

 

その後はCSSに任意のコードをどんどん書いていくのみです。

 

ウェブ制作の基礎をおさえる。HTML/CSS/Dreamweaver講座

【さらに詳しく】CSSファイルを使う方法（外部スタイルシート）

最も推奨される方法で、HTMLファイルから別のCSSファイルを読み込みます。

  1. 拡張子が .css の別ファイルを作成
  2. HTMLファイルの <head> セクションで読み込む
・HTML
<!-- HTMLファイル内 -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
・CSS
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}

 

この方法のメリットとしては、コードの整理が容易な点、複数のページで同じスタイルを共有できる点、メンテナンス性が高い点が挙げられます。

head内に記述する方法

HTMLファイルの <head> セクション内に直接CSSを記述する方法です。

 

HTML
<head>
<style>
p {
color: green;
margin: 10px;
}
</style>
</head>

 

この方法のメリットとしては、1つのHTMLファイル内でスタイルを完結できる、小規模なサイトや簡単な調整に適している点が挙げられます。

インラインで記述する方法

個別の要素に直接スタイルを適用する方法です。

HTML
<p style="color: red; font-weight: bold;">
この段落は赤色で太字になります。
</p>

 

この方法のメリットとしては、即座に個別の要素にスタイルを適用できる、緊急の調整や特定の要素のみ変更したい場合に有効な点が挙げられます。

CSSは記述方法が併用可能

3つのCSS記述方法は同時に使用できます。ただし、スタイルが重複する場合は優先順位に注意が必要です。

記述方法間での優先順位

優先度としては「1.インラインスタイル」だけが高く、2,3については同列となります。同列の場合は、HTMLドキュメント内で上書きされます。

  1. インラインスタイル（要素の style 属性）
  2. 内部スタイルシート（<head> 内の <style> タグ）
  3. 外部スタイルシート（CSSファイル）

同じ記述方法における優先順位

同じ記述方法内では、以下の順で優先されます：

  1. セレクタの詳細度
    • IDセレクタ（#id）
    • クラスセレクタ（.class）
    • 要素セレクタ（div, p）
  2. 記述の順番
    • 後に書かれたスタイルほど優先される

具体例は以下です。

CSS

/* この場合、青色が適用される */
p {
color: red;
}

p {
color: blue;
}

/* IDセレクタが最も優先度が高い */
p {
color: green;
}

#myParagraph {
color: purple;
}

JavaScriptとは？役割を紹介

JavaScriptの役割
JavaScriptを使うと、HTMLやCSSでは表現できない機能をWebコンテンツに与えられます。

例えば、項目を入力してボタンを押すことで、簡単な計算結果を画面に表示できます。会員登録フォームに情報を入力して「登録」ボタンを押したときに、未記入の欄がありエラーメッセージが出た経験はありませんか。その機能を実現しているのがJavaScriptです。

 

JavaScriptを書く方法

JavaScriptを書く方法としては以下の2種類があります。

  • HTML上で動かす
  • 外部ファイルとして読み込む

CSSと同じように「index.html」に直接記述をすることも出来るし、外部ファイル「script.js」に記述して、HTMLファイルから読み込むこともできます。

JavaScriptの記述例

もっとも基本的なJavaScriptの記述例をまとめます。

 

 <!DOCTYPE html>
 <html>
 <head>
 </head>
 <body>
 <p>Hello Hollywood</p>
 <script>
 alert("Hello!");
 </script>
 </body>
 </html>

こちらの中の

 <script>
 alert("Hello!");
 </script>

の部分がJavaScriptの箇所です。それ以外はHTMLとなります。このように、<script></script>で挟むことで指示出しをするのがJavaScriptの基本的な記述方法です。

“Hello”の箇所は、実行した際に返ってくる任意の文字列を入力しています。

 

コードの記述が完了したら、ファイルを保存。ファイル形式を「テキストファイル」から「すべてのファイル」に変更し、「hello!.html」というファイル名で保存しましょう。

そして、デスクトップに保存したファイルを右クリックし、Google Chromeなど任意のブラウザを選択し、ファイルを開きます。

 

こちらの記事も参考にしてみてください。

JavaScriptとは？使用するメリットや基本的な書き方を解説

 

Web技術におけるHTML・CSS・JavaScriptの必要性

フロントエンドとは

フロントエンドとは「クライアント・サーバーシステム」におけるクライアント側の技術全般を指します。「フロントエンドエンジニア」は、Webページのの構造を決めるHTML、ページの装飾を担うCSS、ページの動的な部分を担うJavaScriptなどを用いて、Webサイトの直接的にユーザーの目に触れる部分を構築する仕事を担当します。

サーバーサイドとは

サーバーサイドとは、サーバー側で行う処理に対して必要なプログラムの開発や、データ管理のこと。フロントエンドがWebサイトの表側を扱うのに対して、サーバーサイドは裏側を扱うと覚えておくとわかりやすいです。

言語としては、RubyやPHPやJavaといったものを扱うことで、クライアントからのリクエストを返します。

インフラとは

Webの世界でいわれるインフラとは、Webアプリケーションを動かすためのシステムの領域を指します。LinuxなどのOSやMySQLなどのデータベース、サーバーなど、WebページやWebアプリケーションが機能する上でのまさに「インフラ」となるような領域の開発をインフラエンジニアは担当します。

 

HTML・CSS・JavaScriptを学ぶ方法

フロントエンドの領域を学ぶ上で、HTML、CSS、JavaScriptは基本となります。それでは、具体的にはどのように学習してスキルアップすればいいのでしょうか。

独学で勉強する

方法のうちのポピュラーなものは独学です。教本を購入して、不明点があったらネットで調べながら学習するようなスタイルです。

費用としてはおさえやすく、上手くやれば自分の好きなスケジュールで学習ができるという特徴はありますが、働いたり学校がある中で、他の人に頼らずに学習をするのは決して簡単ではありません。

せっかく一念発起してプログラミングを学ぼうと思っても、三日坊主になってしまっては意味がないので、自分を律するのが苦手な人には向かないです。

 

オンライン講座で学ぶ

続いて、講座やスクールで学ぶという方法があります。

費用はかかりますが、プロフェッショナルと一緒に学習することで、フィードバックを受けながら学習できるので、成長速度が高くなったり、モチベーションが保たれて最後までやり抜きやすくなるというメリットがあります。

最近は、実際に通学しなくてもオンラインで学習できる講座も増えているので、より自分にあったライフスタイルでスキル習得したい方にはおすすめです。

 

デジハリ・オンラインスクールでWeb制作の基礎を学ぼう！

デジハリ・オンラインスクールでは、1994年の創業以降多くのクリエイターやエンジニアを輩出してきたデジタルハリウッドのオンライン講座です。

受講者目線での「学びやすさ」を落とし込んだカリキュラムで、オンラインでも最後まで学習しやすいような仕組みを整えています。

自分のライフスタイルに合わせて、着実にレベルアップしたい、エンジニアとしての第一歩を踏み出したいという方は一度講座ページをチェックしてみてください。これから挑戦するあなたを応援しています！

 

ウェブ制作の基礎をおさえる。HTML/CSS/Dreamweaver講座

まとめ

Webコンテンツの多様化によって、Webページに求められる機能は幅広くなっています。HTMLやCSS、JavaScriptのコーディング技術が今後一層重視されるため、HTMLやCSS、JavaScriptの役割を理解し、実際に利用できるように習熟しておくことをおすすめします。

 

このエントリーをはてなブックマークに追加

この記事におすすめのオンライン講座

こんな記事も読まれています