HTMLとCSSとWEBページの関係性【理解できます】

2020年12月2日 2022年3月24日

あなた

HTMLとCSSとWEBページってどんな関係性なんでしょうか？

HTMLとCSSの勉強を始めるとHTMLとCSSを使ってWEBページをつくることができるというような言葉をよく見ますよね。

しかし初心者の方にとっては「それってどういうことなの？」みたいな状態になります。

そこでこの記事ではHTMLとCSSとWEBページの関係性を解説しながら実際にWEBページを表示させる方法までを紹介します。

【この記事でわかること】

HTMLとCSSとWEBページの関係性

HTMLとCSSを使ってWEBページを公開する方法

【この記事の信頼性】

この記事を書いている僕は現役のWEBエンジニアです。

普段からHTMLとCSSを使ってWEBページを制作しています。

ではさっそく見ていきましょう。

>>HTMLとCSSの学習ステップ一覧はコチラ

HTMLとCSSとWEBページの関係性を理解しよう

あなた

そもそもHTMLとCSSとWEBページって何が何なんですか？3つは関係があるんでしょうか？

このような疑問に答えるべく、それぞれの意味と3つの関係性について解説していきます。

3つの違い

WEBページ

WEBページというのは今あなたが見ているこの画面のことです。

インターネット上に公開されているサイトの各ページのことをWEBページといいます。

HTML

HTMLはWEBページの土台部分です。

実はWEBページはもともとは黒い文字やシンプルなボタンからできています。

CSS

CSSはHTMLを装飾するものです。

HTMLだけではシンプルすぎる見た目に色をつけたり動きをつけてくれます。

HTMLとCSSの表示する方法はコチラに画像つきで紹介しています。

言葉だけではイメージがつかない方は参考にしてみてください。

>>HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】

WEBページが表示される仕組み

HTMLとCSSとWEBページの違いがわかったら次はWEBページが表示される仕組みを理解しましょう。

あなたは普通にWEBページを開く際にインターネットのブラウザを使って〇〇.comなどのサイトにアクセスしますよね？

すると当たり前かのようにWEBページが表示されます。

WEBページを作る上でこの時何が起きているのか一応イメージはできるようになっておいたほうがいいです。

実際に起きていることを以下にざっくりまとめました。

①：ユーザーが〇〇.comにアクセスする

②：〇〇.comで指定されたWEBサーバーが応答してhtmlファイルを返す

WEBサーバーはwebサイトの元を保管しているコンピュータだと思ってくださればいったんOKです。

下の図はあなたがインターネットで〇〇.comにアクセスしてからwebページが表示されるまでの流れをまとめた図です。

ここからわかるようにWEBページの仕組みを理解するには

・HTML

・CSS

・WEBサーバー

の理解が必須だということはわかりますね。

ただし、外部に公開するときにWEBサーバーは必要で、開発段階では必要ありません。

開発段階では自分のパソコンをWEBサーバー代わりにしておけます。

自分のPCでのWEBページの制作環境は「ローカル」と言いますので覚えておきましょう。

WEBページ作成に必要なスキル

ここまでざっくりとHTML、CSS、WEBページの意味とその関係性・仕組みについて解説してきました。

あらためてまとめるとWEBページ制作には最低限以下のスキルが必要です。

・HTML

・CSS

・WEBサーバー

他にもサイトに動きをつけたいのであればJavaScript、PHP、MySQLなどの知識も必要になってきますがいったんはシンプルなところからやっていきましょう。

HTMLとCSSの教材をまだ準備していない方は準備しましょう。

>>HTMLとCSSのオススメ教材を紹介【失敗しない】

HTMLとCSSを学べるオリジナル教材はコチラ

>>HTMLとCSSの学習ステップ一覧はコチラ

HTMLとCSSでWEBページを作成してみよう

あなた

WEBページが表示される流れやWEBページを構成しているものについては理解することができました。実際に作る流れを知りたいです。

ここからは実際にWEBページを制作する流れを解説します。

ファイルの編集にはエディタを使います。

まだ準備できていない方はエディタを準備してください。

>>HTMLとCSSのエディタ紹介【これさえあればOK】

HTML

以下がHTMLファイルです。

エディタを開いて新規ファイル作成からindex.htmlを作成しましょう。

index.html
<!doctype html>
<html>

	<head>
		<title>テストサイト</title>
		<meta charset="utf-8">
		<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
	</head>

	<body>
		<div id="container">
			<header>
				<div id="title">
					<h1><a href="#">デモサイト1</a>
						<h1>
				</div>
				<div id="cat_menu">
					<ul>
						<li><a href="#">DEMO1</a></li>
						<li><a href="#">DEMO2</a></li>
						<li><a href="#">DEMO3</a></li>
						<li><a href="#">DEMO4</a></li>
					</ul>
				</div>
			</header>
			<main>
				<img src="images/MainImage.png" alt="メイン画像">
				<div id="left_navi">
					<ul>
						<li id="navi01">
							<h2><a href="#">トップ</a></h2>
						</li>
						<li id="navi02">
							<h2><a href="#">デモサイト集</a></h2>
						</li>
						<li id="navi03">
							<h2><a href="#">学習</a></h2>
						</li>
						<li id="navi04">
							<h2><a href="#">制作実績</a></h2>
						</li>
						<li id="navi05">
							<h2><a href="#">お問合わせ</a></h2>
						</li>
					</ul>
				</div>
				<div id="article">
					<div class="article_item">
						<div class="article_title">
							<h2>注目記事</h2>
						</div>
						<div class="article_news">
							<p>2020年8月12日 <a href="" #>サイトを解説しました</a></p>

							<p>デモサイトを公開しました。</p>
						</div>
					</div>

					<div class="article_item">
						<div class="article_title">
							<h2>新着情報&emsp;　[NEWS]</h2>
						</div>

						<div class="article_news">
							<p>2020年8月13日 <a href="" #>1記事目</a></p>

							<p>自己紹介です。</p>
						</div>

						<div class="article_news">
							<p>2020年8月14日 <a href="" #>2記事目</a></p>

							<p>デモサイト1を公開しました。</p>
						</div>

						<div class="article_news">
							<p>2020年8月15日 <a href="" #>3記事目</a></p>

							<p>デモサイト2を公開しました。</p>
						</div>

						<div class="article_news">
							<p>2020年8月16日 <a href="" #>4記事目</a></p>

							<p>デモサイト3を公開しました。</p>
						</div>

						<div class="article_news">
							<p>2020年8月17日 <a href="" #>5記事目</a></p>

							<p>デモサイト4を公開しました。</p>
						</div>
					</div>

					<div class="article_item">
						<div class="article_title">
							<h2>最新のブログ記事　[BLOG]</h2>
						</div>

						<div class="article_news">
							<p>WEBサイト案件で稼げるようになりました。</p>
						</div>
					</div>
				</div>
				<div id="banner">
					<a href="#"><img src="images/test1.jpg" class="side_image" alt="1"></a>
					<a href="#"><img src="images/test2.jpg" class="side_image" alt="2"></a>
				</div>
			</main>
			<footer> © 2021 Tenshikun All rights reserved.</footer>
		</div>
	</body>

</html>

作成したファイルは新しく作成した「見本サイト」というフォルダの中に入れておきます。

作成できたらこのようなファイルの画像をクリックしてみましょう。

自動でブラウザに表示されるはずです。

ブラウザにはこのように表示されるはずです。

CSS

次にCSSファイルです。

エディタを開いて新規ファイル作成からstyle.cssを作成しましょう。

style.css
body {
	margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
	background-repeat: repeat-x;
}

p {
    font-size: 12px;
    line-height: 150%;
}

#container {
    width: 900px;
    height: 600px;
    margin: 0px auto 0px auto;
    float: none;
}

header {
	height: 120px;
	width: 900px;
}

header h1 {
    margin: 0px;
    padding: 0px;
}

header #title {
	float: left;
	height: 100px;
	width: 300px;
}

header #title h1 {
    margin-top: 40px;
}

header #cat_menu {
	float: right;
	height: 100px;
	width: 580px;
    
}

header #cat_menu #Banner {
    float: right;
    margin-right: 30px;
}

header #cat_menu ul {
    list-style-type: none;
    font-size: 10px;
    margin-top: 100px;
}

header #cat_menu li {
    display: inline;
    float: right;
    width: 70px;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #050505;
    padding-left: 8px;
}

header #cat_menu li a {
    text-decoration: none;
    color: #000;
}

header #cat_menu li a:hover {
    color: #09F;
    text-decoration: underline; 
}

main {
    height: auto;
    width: 900px;
}

main #left_navi {
    height: 300px;
    width: 210px;
    float: left;
    margin-top: 30px;
}

#left_navi ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000;
}

#left_navi ul #navi01 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}

#left_navi ul #navi02 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
#left_navi ul #navi03 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
#left_navi ul #navi04 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
#left_navi ul #navi05 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}

#left_navi ul a:hover img {
    visibility: hidden;
}


#left_navi ul h2 {
    margin: 0px;
    padding: 0px;
}

main #article {
    height: auto;
    width: 450px;
    float: left;
    margin: 30px 0px 0px 20px;
}

#article .article_item {
    width: 450px;
    float: left;
    margin-bottom: 20px;
}

#article .article_item .article_title {
    width: 450px;
    height: 25px;
    margin-top: 0px;
    margin-bottom: 7px;  
}

#article .article_item .article_title h2 {
    font-size : 12px;
    color: 4A4A4A;
    margin: 0 0 0 10px;
    padding: 5px;
}

#article .article_item img {
    float: left;
}

#article .article_item a {
	color: #F63;
}

#article .article_item .article_news {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom-width: 1px;
    border-bottom-color: #747474;
    border-bottom-style: solid;
}


main #banner {
    height: 300px;
    width: 200px;
    float: right;
    margin-top: 30px;
}

footer {
	clear: both;
    height: 20px;
    width: 900px;
    background-color: #000;
    font-size: 10px;
    text-align: center;
    color: #FFF;
    line-height: 17px;
    margin: 0 auto 0 auto;
}


.side_image{
   border: 1px solid #474747;
}

作成したファイルは新しく作成した「見本サイト」というフォルダの中に入れておきます。

こちらはそれぞれ上から「MainImage.png」

「test1.jpg」「test2.jpg」という名前で「見本フォルダ」の中の「images」フォルダの中に入れておいてください。

フォルダがこうなっていればOKです。

1番最初に1ndex.htmlを開いたときのようにindex.htmlのファイルをクリックしてブラウザに表示させてみましょう。

以下のように表示されるはずです

急にWEBサイトっぽい見た目になってきましたね。

今回のコードや画像は1連の今後の別記事でのより洗練されたWEBサイト制作の流れでも使っていくので消さないようにしましょう。

今回は「HTMLとCSSを使えばWEBページが作れそうだ」ということを感じて貰えればOKです。

どうなっているんだ？と思うかもしれませんが、コード（ファイルに書かれた文字）の意味はそれぞれ今後別に解説していきます。

>>参考：HTMLでCSSを読み込む方法

※次の回です

HTMLとCSSでWEBページを作れるメリット

あなた

HTMLとCSSでWEBページを作れるようになるメリットは何でしょうか？

ここまではざっくりとHTMLとCSSを使ってWEBページを表示する方法を紹介してきました。

ここではWEBページを作ることができるようになるメリットを紹介していきます。

自分だけのサイトが作れる

HTMLとCSSでWEBページを作ることができるようになるメリットの1つ目が自分だけのWEBサイトが作れるようになることです。

WEBサイトは外注しようとすると結構な値段になります。

質の良いものだと50万円以上したりもします。

しかし自分で作れるようになるとその分の負担を減らすことができます。

副業の案件もとれる

HTMLとCSSでWEBページを作ることができるようになるメリットの2つ目が副業の案件をとれるようになることです。

先ほどWEBサイトは外注しようとすると結構な値段がするといいました。

それならばあなたが作ってあげる側になった場合はどうでしょう？

当然稼げますよね？

WEBサイトの案件は平均単価が高く十分すぎるほど稼げます。

しかもWEB制作はパソコンさえあればどこでも稼げます。

スーツを着て満員電車に乗る必要もまったくなくなりますよ。

実際にwebサイト制作の案件は普通に20~30万円稼げます。

慣れれば月に2つ3つも可能ですので月収100万円も目指せます。

以下は実際にクラウドワークスで募集されている案件の例です。

上記案件はデザイン込みで28万円です。

デザインもできればより単価も高くなります。

ちなみに、あなたが今すぐ副業で稼ぎたい場合は、スクールに通うのが手っ取り早いです。

受講後に案件紹介までしてくれるので確実に稼げます。

>>【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

: 【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】
あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの？スクール選びで失敗はしたくないです。 ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...
続きを見る

エンジニア転職やデザイナー転職も可能

HTMLとCSSでWEBページを作ることができるようになるメリットの3つ目がエンジニア転職やデザイナー転職も簡単になることです。

エンジニアやデザイナーは本業としてHTMLやCSSをはじめ色んなツールや言語を使います。

当然個人でWEBサイトを作るよりは多くの技術が求められます。

しかしWEBサイト制作が個人でできるレベルならばそれらの習得も苦にはならないでしょう。

採用面に関しても自分でWEBサイトを作れるレベルなら全然採用したいはずです。

ちなみにエンジニアやWEB制作者はフルリモートで働けたりしてめちゃくちゃ快適ですよ。

>>【エンジニア最高】エンジニアになって4ヶ月たったので感想をまとめます

\ 今すぐ学習を始めたい方はコチラ /

: 【完全無料】HTMLとCSSの学習ステップ一覧
てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...
続きを見る

地道に進もう

ということで今回はHTMLとCSSとWEBページの関係性を説明しつつ実際にHTMLとCSSを使ってWEBページを表示させる方法を紹介しました。

この記事を読めば大体のWEBページ制作の雰囲気やHTMLとCSSの使い方がわかるはずです。

しかしこれからHTMLとCSSの学習を進めていくと色々覚えることが出てきます。

そんなときあなたはついつい焦ってしまうかもしれませんがそんな必要はありません。

よっぽどの天才でない限りはすぐに習得はできません。

大事なのは「地道に進む」ことです。

慣れが大事

他のプログラミング言語を学ぶことにおいても同じですが、HTMLとCSSの学習においても何よりも慣れが大事です。

何回もコードを書いて、表示させてを繰り返すことでHTMLとCSSのマスターに繋がります。

最初はしんどいかもしれませんが慣れてくるとそうでもなくなるのでコツコツ進みましょう。

>>参考：HTMLとCSSを独学で１カ月勉強してみた結果【超成長した】

独学が厳しそうならスクールを選ぶのもアリ

また、このサイトではHTMLとCSSのマスターに向けた講座を開催していますが、中には「もう1人じゃやっていけない」と感じる方もいるでしょう。

そのような方は最初からスクールに通ってしまうのも手です。

メリットとしては以下があります。

・すぐに質問できる

・エラーややり方に悩まない

・1人じゃなく仲間や先生がいる

・確実に稼げるようになる

もし上記メリットをお金を払ってもゲットしたいと思うのならば、スクールを受講するのは十分にアリですね。

（ちなみに僕もスクールに通ってプログラミングを習得した1人です）

後はあなたの希望に応じて決めましょう。

今回は以上です。

\ 今すぐ学習を始めたい方はコチラ /

>>【完全無料】HTMLとCSSの学習ステップ一覧

: 【完全無料】HTMLとCSSの学習ステップ一覧
てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...
続きを見る

\ 副業で稼げるようになるプログラミングスクールのランキングはコチラ /

>>【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

: 【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】
あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの？スクール選びで失敗はしたくないです。 ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...
続きを見る

プログラミングスクールに関する情報

: 【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】
あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。最近はエンジニアブームということもありプログラミングスクールが増えました。一方でたくさんありすぎてど ...
続きを見る

: 【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】
あなた返金保証がついているオススメのプログラミングスクールってありますか？結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。 1位：DMMWEBキャンプ　【 ...
続きを見る

: 【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】
あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの？スクール選びで失敗はしたくないです。 ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...
続きを見る

: 無料あり：フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】
あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか？最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。結論から話すと ...
続きを見る

: WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】
あなたWEB系の自社開発企業に就職したいです。オススメのスクールを教えて下さい。結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。第1位：テックアカデミー ...
続きを見る

-HTML/CSS

: HTML/CSS
【HTML】初心者が独学で勉強を始めてみた時の話【意外と出来る】
あなた HTMLってたまに目にするけど何？HTMLって初心者でも勉強できるの？こんな風に思ったことありませんか？突然ですが「まず行動」がモットーの僕が挑戦した時の話をし ...

: HTML/CSS テックアカデミー
テックアカデミーのHTML/CSSトレーニングの内容を受講生が暴露【要確認です】
あなたテックアカデミーのHTML/CSSトレーニングってどんなコースですか？結論から話すと、テックアカデミーのHTML/CSSトレーニングはHTMLとCSSの初心者向けのコースです。こ ...

: HTML/CSS
HTMLとCSSの初心者が副業で稼ぐ方法【ステップ別で紹介】
あなたHTMLとCSSの初心者です。副業で稼げるようになりたいのですが、何をしたらいいのでしょうか？最近ではプログラミングを使ったWEB制作の副業に取り組む方が増えてき ...

: HTML/CSS
CSSでサイドメニューを装飾しよう【コード付きで紹介】
あなたサイドメニューが今のままだと見にくいので見やすくしたいです。これまではプログラミング未経験者の方に向けてHTMLとCSSの基礎からWEBページの作る流れを解説してきました。前回はWE ...

: HTML/CSS
HTMLのナビメニューをCSSで装飾する方法
あなたHTMLのナビメニューがいまのままだとダサいのでいい感じにしたいです。これまではプログラミング未経験者の方に向けてHTMLとCSSの基礎からWEBページの作る流れを解説してきました。 ...

PREV: テックキャンプで就職できない噂の真相は？【信じるな】
NEXT: テックキャンプの福岡教室の特徴や場所を紹介！【要チェック】

HTMLとCSSとWEBページの関係性【理解できます】

HTMLとCSSとWEBページの関係性を理解しよう

3つの違い

WEBページが表示される仕組み

WEBページ作成に必要なスキル

HTMLとCSSでWEBページを作成してみよう

HTML

CSS

HTMLとCSSでWEBページを作れるメリット

自分だけのサイトが作れる

副業の案件もとれる

【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

エンジニア転職やデザイナー転職も可能

【完全無料】HTMLとCSSの学習ステップ一覧

地道に進もう

慣れが大事

独学が厳しそうならスクールを選ぶのもアリ

【完全無料】HTMLとCSSの学習ステップ一覧

【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

無料あり：フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

フリーランスエンジニアになるには何をすればいい？【方法と全行程を詳しく解説します】

プログラミングとは何なのか？始め方は？これから学習を始めるあなたにわかりやすく解説

未経験からエンジニア転職に成功しました【やったことを紹介】

HTMLとCSSを独学で１カ月勉強してみた結果【超成長した】

【誰でも目指せる】「フリーランスエンジニアは稼げる」はマジです【1年で月収60万円達成】