HTML/CSS

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

投稿日:2020年12月2日 更新日:

HTMLとCSSとWEBページの関係性【理解できます】と書かれた画像

 

あなた
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とJS

 

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

 

この章ではそれぞれの意味と3つの関係性について解説していきます。 

 

【この章でわかること】

✔  HTML・CSS・WEBページの意味

✔  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ページが表示される仕組みのイラスト

 

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

・HTML

・CSS

・WEBサーバー

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

 

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

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

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

 

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

 

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

 

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

・HTML

・CSS

・WEBサーバー

 

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

 

・WEBページの見た目はHTMLとCSSから成り立っている

・インターネットからアクセスしたサイトのページはWEBサーバーから送られてきたもの

 

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

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

 

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

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

 

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

webページを制作する人

 

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

 

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

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

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

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

 

【この章でわかること】

✔ WEBページの制作方法

 

HTML

 

以下が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="Logo_area">
					<h1><a href="#">デモサイト1</a>
						<h1>
				</div>
				<div id="Navi_area">
					<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="Side_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="Main_box">
					<div class="MainBox_item">
						<div class="MainTitle">
							<h2>注目記事</h2>
						</div>
						<div class="MainBox_news">
							<p>2020年8月12日 <a href="" #>サイトを解説しました</a></p>

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

					<div class="MainBox_item">
						<div class="MainTitle">
							<h2>新着情報  [NEWS]</h2>
						</div>

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

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

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

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

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

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

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

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

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

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

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

						<div class="MainBox_news">
							<p>WEBサイト案件で稼げるようになりました。</p>
						</div>
					</div>
				</div>
				<div id="Banner_box">
					<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> © 2016 Tenshikun All rights reserved.</footer>
		</div>
	</body>

</html>

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

 

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

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

ファイルの画像

 

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

 

htmlだけで表示された画像

CSS

 

次に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 #Logo_area {
	float: left;
	height: 100px;
	width: 300px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

#Main_box .MainBox_item {
    width: 450px;
    float: left;
    margin-bottom: 20px;
}

#Main_box .MainBox_item .MainTitle {
    width: 450px;
    height: 25px;
    margin-top: 0px;
    margin-bottom: 7px;  
}

#Main_box .MainBox_item .MainTitle h2 {
    font-size : 12px;
    color: 4A4A4A;
    margin: 0 0 0 10px;
    padding: 5px;
}

#Main_box .MainBox_item img {
    float: left;
}

#Main_Box .MainBox_item a {
	color: #F63;
}

#Main_box .MainBox_item .MainBox_news {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom-width: 1px;
    border-bottom-color: #747474;
    border-bottom-style: solid;
}


main #Banner_box {
    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;
}

 

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

 

cssファイル

 

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

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

 

MainImage.png
テスト画像1
test1.jpg
テスト画像2
test2.jpg

 

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

 

 

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

 

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

 

 

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

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

 

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

 

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

 

・WEBページのでき方の雰囲気がつかめればOK

・うまく行かない場合はフォルダの名前や位置が正しい場所にあるかを確認しよう

 

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

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

 

HTMLとCSSを学べるプログラミングスクールのランキングはコチラ

>>HTML/CSSを習得できるプログラミングスクールランキング

 

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

 

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

 

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

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

 

【この章でわかること】

・WEBページを作ることができるようになるメリット

 

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

 

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

 

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

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

 

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

 

受託の案件もとれる

 

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

 

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

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

 

当然稼げますよね?

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

 

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

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

 

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

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

 

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

 

28万円のweb制作案件

 

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

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

 

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

 

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

 

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

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

 

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

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

 

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

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

 

・WEBページのでき方の雰囲気がつかめればOK

・うまく行かない場合はフォルダの名前や位置が正しい場所にあるかを確認しよう

 

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

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

 

HTMLとCSSを学べるプログラミングスクールのランキングはコチラ

>>HTML/CSSを習得できるプログラミングスクールランキング

 

地道に進もう

歩く女性

 

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

 

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

 

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

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

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

 

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

 

慣れが大事

 

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

 

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

 

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

 

 

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

 

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

 

(もちろん独学も可能ですよ)

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

 

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

 

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

・すぐに質問できる

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

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

 

もし上記メリットをお金を払ってもゲットしたいと思うのならば十分にアリでしょう。

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

>>プログラミングを1年間勉強してみた結果【人生変わった】

 

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

 

・HTMLとCSSの学習はコツコツすすめることが大事

・1人では厳しいと感じたらスクールもアリ

 

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

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

 

HTMLとCSSを学べるプログラミングスクールのランキングはコチラ

>>HTML/CSSを習得できるプログラミングスクールランキング

 

その他HTML/CSSに関する記事

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  step0 学習の見通しを持つための記事を読んでおこう!   step1 教材を用意しよう! step2 HTMLとCSSの意味を理解しよう! step3 HTMLとCSSを使って開発できる環境を ...

続きを見る

【最新】HTML/CSSを習得できるプログラミングスクールランキングと書かれた画像
HTML/CSSを習得できるプログラミングスクールランキング

 

続きを見る

2021年最新プログラミングスクール おすすめランキング 【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

 

続きを見る

テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】と書かれた画像
テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】

  あなた簡単に無料教材を手に入れることができました!でも少し質問があるのですがいいですか?   この章ではテックアカデミーの無料教材についてよくある質問に対して答えていきます。 ...

続きを見る

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

  あなたHTMLの意味とCSSの意味はわかりました。2つを使うと何ができるんでしょうか?   HTMLとCSSの意味を理解して2つを使えるようになると以下のことができます。 ・W ...

続きを見る

HTMLとCSSのオススメ教材を紹介【無料あり】と書かれた画像
HTMLとCSSのオススメ教材を紹介【無料あり】

  てんし君 大手プログラミングスクールのテックアカデミーが自社アピールのために提供しています。 大手の会社の教材なので情報も正確で信頼できます。   無料教材を手に入れる方法はコ ...

続きを見る

HTMLとCSSの入門方法【現役エンジニアの僕が解説】と書かれた画像
HTMLとCSSの入門方法【現役エンジニアの僕が解説】

  あなた本当に0円なの?急に有料になったりしない?   このように思う方もいると思いますが安心してください。 まったく料金はかかりませんし、無料教材を手にいれたからと言って本コー ...

続きを見る

HTMLとCSSの初心者は何をすべき?【経験をもとに解説】と書かれた画像
HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

 

続きを見る

HTMLとCSSが難しいと感じた時に僕がとった行動と書かれた画像
HTMLとCSSが難しいと感じた時に僕がとった行動

 

続きを見る

HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】と書かれた画像
HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

  てんし君   この記事を読んでわかること ①HTML・CSSの独学勉強方法 ②HTML・CSSの独学のきつい点 ③HTML・CSSを勉強した後にエンジニアになった僕の話 &nb ...

続きを見る

HTMLとCSSの初心者は模写をしよう【僕もやりました】と書かれた画像
HTMLとCSSの初心者は模写をしよう【僕もやりました】

 

続きを見る

HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】と書かれた画像
HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】

  てんし君実践的なテスト内容が特徴ですね。 実務経験者が腕試しで受けるのはいいかもしれませんが、初心者の方は特にこの試験のために頑張る必要はないかなと思います。 この資格を持ってる方も見た ...

続きを見る

僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】と書かれた画像
僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】

  あなたアウトプットの方法はわかりました。でもインプットのタイミングはどうすればいいのでしょうか?   ここまではHTMLとCSSのアウトプットの方法をメインに解説してきました。 ...

続きを見る

-HTML/CSS

Copyright© エンジニアてんし君ブログ , 2021 All Rights Reserved.