【html css 入門】エンジニアなら知らないとヤバイ！WEB系言語の基本を解説！

2019.10.11
この記事は約19分で読めます。
WEB系のクリエイターやエンジニアを目指す方には避けては通れないのがHTMLとCSSという言語になります。

HTMLとCSSに関してはWEB系のクリエイターやエンジニア以外でも見る機会も多いですので、IT業界で働く方は是非知っておきましょう。

この記事ではIT業界では欠かせないHTMLとCSSについて解説していきます。

この記事がおすすめの方は・・・
  • IT業界に興味があるけど何を勉強していいのかわからないという方
  • IT業界に必須のスキルについて知りたい方
  • WEB系のエンジニアになりたいと考えている方
  • WEB系のデザイナー（クリエーター）になりたいと考えている方

※IT業界の情報について知りたい方は以下も合わせて読んでみてください。

IT業界未経験がエンジニアに転職する際に知らないとまずい！？【IT業界未経験の方が知っておくべき情報まとめ】
未経験からエンジニアに転職を考えているけど何から始めればいいのかわからないIT業界は学習することが多くて何から手を付ければいいのかわからないIT業界の転職を考えているけどどう準備すればいいのかわから...
pgfrat.com
2019.11.25
Search

HTMLとは

HTMLとは

HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の1つ。略してHTML（エイチティーエムエル）と呼ばれることが多い。SGMLを元に開発された。World Wide Web (WWW)において、ウェブページ（1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い）を表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。

ウィキペディア（Wikipedia）

HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）の略語になります。

  • World Wide Web (WWW)＝インターネット
  • ウェブページ＝コンテンツとも呼ばれる

と考えていただければ結構です。

要するにインターネット上でウェブページを表示するのに使われるのがHTMLになりますのでHTMLはWEBの表示を担当します。

ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある

このようにHTMLは見出しや段落等も構造化してコードで書く事もできますし、リンクや画像に関してもURLをルールに則った形で書くことで表示することが可能です。

デザインに関しては後述するCSSが担当にはなるのですが、HTMLでも記述してフォントや文字色の指定なども行うことが可能です。

さらにここには書いてはありませんが、videoタグと呼ばれるタグを利用することで動画の再生も可能となっております。

未経験歓迎のエンジニアスクールを見てみる

インターネットで画面が見れる仕組み

WEB（インターネット）におけるHTMLは

  • HTMLのファイルにHTMLのルールに則りコーディングを行う
  • WEBサーバーに上記のHTMLファイルを配置をする

という作業を行うことでインターネット上からWEBサーバーにリクエストがあった場合

リクエストしたPCのブラウザにコーディングしたHTMLが表示されるという流れになります。

あなたが今見ているこちらの画面も私が記述したHTMLをサーバーから取ってくることでこの画面が表示されています。

このmoriblog（モリブログ）はCMSのワードプレスで作られていますが、企業で構築したWEBサービスなども同じ原理になります。

画面のあるシステムはHTMLが必須でありこれがインターネット上で画面を見れる仕組みになります。

インターネットにおけるHTML取得の流れ

HTML取得の流れをまとめますと

  • URLをブラウザ（Googleなど）からリクエスト→
  • URLに対応したサーバーにリクエストが行く（検索結果のリンク押す）
  • WEBサーバーはリクエスト元にURLに対応したHTMLファイルを送信する
  • リクエスト元のあなたのクライアントPCにHTMLファイルが表示されて画面が見える

という流れになります。

以前javascriptの回でHTMLとjavascriptをローカルのPCで書いてクロームでHTMLファイルを表示させた方はなんとなくわかったかと思います。

ブラウザからhtmlの中身を確認する方法

HTMLファイルなどのソースをを見るにはF12の開発者モードで見ることが可能です。

今回はそれとは別にHTMLの中身を表示する方法をお伝え致します。

右クリックをしてソースを表示というようにすればソースコードが表示されるはずです。

非常に多くのHTMLが表示されています。

HTMLの依存ファイル

これを見ますとcssやphpでデータベースから取ってきたデータやjavascriptのコードも一緒に表示されています。

最終的に出力されるHTMLがこのように表示がされるのでデバックする際にも役に立ちます。
  • css
  • php
  • javascript

などの言語は依存関係にありまして、大抵のアプリケーションやWEBシステムに関してはこれらの言語を複数使って、デザインや機能を形作っています。

上記の言語をHTMLが呼んできているため、最終的に表示されるHTMLファイルにはCSS、PHP、javascriptなどのコードが混じって出力されています。

未経験歓迎のエンジニアスクールを見てみる

HTMLの構成

HTMLの構成としては基本は以下になります。

<!doctype html>
<head>
<title>ページのタイトル</title>
</head>

<body>
</body>
 
</html>

対になるタグで囲んで記述するのがHTMLのルールになります。

<!doctype html>

はドキュメントタイプを宣言するために書きます。

通常は大抵書きますのでルールやおまじないだと思っておけば問題ないです。

タグのルールとしては

<html>

と書いたら

</html>

で閉じないといけません。

headタグの使い方

<head></head>

の中には

  • CSSの依存させるファイルのパス
  • javascriptの依存させるファイルのパス
  • ページのタイトル
  • メタ情報

などを記載します。

以前のjavascriptの記事ではHTMLファイル上直接javascriptを書いていましたが、その場合はコードがゴチャゴチャしてしまい見づらくなってしまうため別ファイルで管理しファイルの置き場所を指定してhtmlに読み込ませるということが主流となっています。これはCSSも同様です。

例としては以下になります。

<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
<link rel="stylesheet" href="style.css">
</head>

メタ情報

文字化けを防ぐために

メタ情報として

<meta charset="utf-8">

を記述して文字コードをutf-8にしています。

日本語がhtmlの中に混じってしまう場合は文字コードの指定も重要になります。

bodyタグの使い方

<body></body>

の中には以下のようにタグを入れていきます。

<body>
<h1>pgfratとHTMLを書こう！</h1>
<p>エンジニアになるには、HTMLの知識は欠かせません。<br>慣れてしまえば簡単です、頑張りましょう！</p>
<h2>HTMLは基本の言語になります。</h2>
</body>

見出し

<h1>
<h2>

は見出しになります。

数字が大きいほど小見出しになり文字の大きさも変わります。

htmlはこのようにタグをかき分けることで構造化が可能となります。

今までのHTMLを合わせると下記になります。

<!doctype html>
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
<link rel="stylesheet" href="style.css"> 
</head>

 <body>
<h1>pgfratとHTMLを書こう！</h1>
<p>エンジニアになるには、HTMLの知識は欠かせません。<br>慣れてしまえば簡単です、頑張りましょう！</p>
<h2>HTMLは基本の言語になります。</h2>
</body>  
 
</html>  　
未経験歓迎のエンジニアスクールを見てみる

実際にHTMLを書いてみよう

それでは実際にhtmlを書いてブラウザ上で表示してみます。

このように書きましたので

index.htmlという名前で保存しておきます。

保存したhtmlファイルをjavascriptの時のようにPCブラウザにドラック＆ドロップしてみましょう。

ブラウザにHTMLが表示されればOKです。

もし文字化けをしてしまっているようならhtmlのコードを書いたエディターの設定の文字コードを変更する必要があります。

Windows標準のメモ帳なら文字化けはないはずですが、

サクラエディタは初期設定が文字コードが違うため変更する必要がありますので気をつけてください。

改行タグ

<br>

というタグが入っていますが<br>は改行になります。

そしてこの改行タグは</br>で閉じることはありませんので気をつけてください。

アンカータグ

今のHTMLを少し変化させます。

<!doctype html>
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
<link rel="stylesheet" href="style.css"> 
</head>

<body>
<h1>pgfratとHTMLを書こう！</h1>
<a href="https://pgfrat.com">pgfrat</a><br>
<p>エンジニアになるには、HTMLの知識は欠かせません。<br>慣れてしまえば簡単です、頑張りましょう！</p>
<h2>HTMLは基本の言語になります。</h2>
</body>  
 
</html>  　
<a href="https://pgfrat.com">pgfrat</a><br>

を追加しました。

<a></a>

上記のタグはアンカータグといいます。

リンク先を　

href=""

のダブルクォート（””）に入れることでリンクを作ることができます。

アンカータグを書いた

pgfrat

の文字が青く色が変わっていると思います。

アンカータグで作成したリンクは標準ではこのような表示となります。

リンクボタンを押すと

リンク先にちゃんと飛べることが確認できます。

未経験歓迎のエンジニアスクールを見てみる

CSSとは

CSSとは

Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート、日: 段階スタイルシート[1]）は、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様の一つで、World Wide Web Consortium (W3C) がとりまとめ勧告する。文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。以下の点を特徴とする。

ウィキペディア（Wikipedia）

ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる。

ユーザーエージェント（多くの場合ウェブブラウザ）、ウェブサイト制作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる（カスケードする）ことができる。

ウィキペディア（Wikipedia）

Cascading Style Sheets（CSS、カスケーディング・スタイル・シート）

の略になります。

既に言及しましたが、CSSはhtmlの装飾を担当します。

CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える

という特徴がありますのでHTMLで表現できるデザインの以外の部分もCSSなら実現が可能ということになります。

htmlからCSSファイルは複数読み込むことが可能で、現在主流となっているレスポンシブデザインはCSSにより実現されています。

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法

ウィキペディア（Wikipedia）
未経験歓迎のエンジニアスクールを見てみる

CSSを使ってみる

それではCSSを使う準備に入りましょう。

先ほどのHTMLを修正します。

<!doctype html>
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
<link rel="stylesheet" href="style.css"> 
</head>

<body>
<h1>pgfratとHTMLを書こう！</h1>
<a href="https://pgfrat.com">pgfrat</a><br>
<p>エンジニアになるには、HTMLの知識は欠かせません。<br>慣れてしまえば簡単です、頑張りましょう！</p>
<h2>HTMLは基本の言語になります。</h2>
<div class="pgfrat">ここはクラスになります</div>
<div id="pgfrat">ここはIDになります</div>
</body>  
 
</html>
<div class="pgfrat">ここはクラスになります</div>
<div id="pgfrat">ここはIDになります</div>

ここで新たに登場したのは

<div></div>

とクラスとID

class=""
id=""

になります。

divタグは単体では特に意味を持たないタグになりますが

CSSで操作する際にブロック要素と呼ばれるタグになりデザインをコントロールしやすくなります。

CSSの使い方

CSSはHTMLのデザインを担当します。

CSSでできることは様々ありますが、今回は基本をさらっとやってみます。

先ほど作ったindex.htmlをフォルダーの中に入れます。

私はpgfratというフォルダーを新しく作ってその中にindex.htmlを入れます。

皆さんは好きな名前のフォルダーを作ってください。

その中にstyle.cssというファイルを作成します。

style.cssはまだ空の状態です。

もし違う場所に対象のCSSファイルを置いてhtmlに反映させたい場合は場所を指定してあげる必要があります。

今回は

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

上記の通りindex.htmlと同じ階層にstyle.cssを用意したので問題はありません。

CSSを使う際は

.cssの拡張子の先頭の名前は任意ですが、.cssの拡張子には気をつけてください。

今度はフォルダーごとブラウザにドラック＆ドロップをしてください。

こちらからindexhtmlを選択すると

このようになるはずです。

まだCSSを書いていないので何も変化はありません。

ここからCSSを書いていきます。

書き方としてはHTMLのタグに対してそれぞれ命令していくことになります。

タグに対してのデザインの指定

試しに以下のように書いてみます。

h1 {
   font-size: 50px;
   color: red;
   border : solid 1px #333;
 }
 .pgfrat {
   background-color: blue;
 }
 #pgfrat {
 text-align: center;
 }

それぞれのタグに対してコードを書いていきました。

タグに対しては

h1 {}

というように大カッコで閉じるのがCSSのルールになります。

h1 {}

の中身に関しては

h1のタグに対してフォントサイズを変更し、color を赤で指定して文字色を変更

という処理を行っています。

線のデザインを変える

他には

border : solid 1px #333;

というコードでh1のタグの周りに線を弾いてカラーコード（#333）で色を指定しています。

色の指定

カラーコードについては

カラーピッカーと検索すればご自分で好きな色を探すことができます。

WEBデザインにおいて、文字や背景など様々な場所で使えますので覚えておくとよいでしょう。

クラスに対してのデザインの指定

下記コードを見てみましょう。

.pgfrat {
   background-color: blue;
 }

こちらは

class="pgfrat"

で指定した場所のCSSの命令になります。

HTMLのclass="クラス"

をcssでは

.クラス

と書く必要があります。

背景色の変更

background-color: blue;

はそのままで背景をブルーにするということになります。

色指定は先ほどの１６進法のカラーコードでも指定することができます。

IDに対してのデザインの指定

#pgfrat {
 text-align: center;
 }
こちらはIDの指定になります。
<dev id="pgfrat">

で指定したところになります。

IDはHTMLで　

id="id"

としたならば

CSSでは

#id

とする必要があります。

中央寄せ

text-align: center;

で中心に移動させています。

上記のコード以外にも移動する手段はありますが、

上記のコードで一発で中心に来ます。
#pgfrat, p{
 text-align: center;
 }

とした場合はどうでしょうか？

ｐタグも中心に来ました。

CSSはカンマで区切ることで他のタグにも同じように適用することができます。

同じようにスタイルを適用したいのであればコードを短くするためにもカンマ区切りで指定しましょう。

画像を背景にする

次は画像を背景に入れます。

HTMLとCSSが入っているフォルダーにご自分の好きな写真を入れましょう。

入れたらCSSを下記のように変更します。

html {
   background-image: url("ご自分の写真のファイルの名前");
   background-repeat: no-repeat;
 }
 h1 {
   font-size: 50px;
   color: red;
   border : solid 1px #333;
 }
 .pgfrat {
   background-color: blue;
 }
 pgfrat, p{
 text-align: center;
 }


html {
   background-image: url("ご自分の写真のファイルの名前");
   background-repeat: no-repeat;
 }

このコードで写真をhtmlのタグの中に入れることができました。

background-repeat: no-repeat;

このコードで画像を繰り返さないようにしています。

上記の記述が無いと画像サイズによっては繰り返しが発生します。

未経験歓迎のエンジニアスクールを見てみる

初心者向け言語：HTMLとCSSの基本　最後に

HTMLもCSSの基本については理解ができるのではないでしょうか？

今回は基本的なhtmlとcssについて解説しましたが、実際の業務で使えるレベルになるには更なる学習が必要になります。

プログラミングやIT知識に関する学習は時間がかかります。

プログラミングスキル・IT知識を最短で学習しプログラマーやエンジニアとして働きたいという方はエンジニアスクールやプログラミングスクールを使うことが現在では当たり前となっています。

以下のリンクにて無料から有料の「プログラミングスクール」「エンジニアスクール」についての情報をまとめて共有していますので是非参考にしてください。

未経験歓迎のエンジニアスクールを見てみる
【it業界の転職を未経験でも実現！プログラミングスクール/エンジニアスクール14選！!】内容・評判口コミ・料金情報を徹底比較！
現在様々な企業でプログラミングが可能な人材（Webエンジニアやアプリケーション開発者など）に対する需要が高くなっています。プログラミングが可能可能な人材は他の職種に比べて給与水準が高いため、第二新卒者の方や未経験からプログ...
pgfrat.com
2020.05.14

未経験からエンジニアを目指す場合には業界情報や職種に関する情報、IT技術や用語など知るべきことが多くあります。以下の記事にて業界未経験のエンジニア職希望者が知るべき情報をまとめていますので是非見てみてください。

IT業界未経験がエンジニアに転職する際に知らないとまずい！？【IT業界未経験の方が知っておくべき情報まとめ】
未経験からエンジニアに転職を考えているけど何から始めればいいのかわからないIT業界は学習することが多くて何から手を付ければいいのかわからないIT業界の転職を考えているけどどう準備すればいいのかわから...
pgfrat.com
2019.11.25

この記事が参考になった、気に入ったと感じていただけましたらフォローとシェアをお願いいたします。

No tags for this post.

コメント 記事に関するご意見・ご感想・ご質問などお気軽にどうぞ！※メールアドレスは非公開です

タイトルとURLをコピーしました