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

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

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

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

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

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;

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

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

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

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

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

IDはHTMLで 

id="id"

としたならば

CSSでは

#id

とする必要があります。

中央寄せ

text-align: center;

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

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

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

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

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

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業界への転職を考えている方は以下の記事も確認してください。

コメント

プロフィール

シュン@pgfrat

高校卒業後に製菓学校に進学し製菓関連の国家資格を取得する。
専門学校卒業後に個人の洋菓子店やレストランなどで洋菓子や料理に携わるが、ブラックな勤務体制により絶望と脱獄、転職を繰り返してニートやフリーターを数年経験。

サラリーマンとして再起を図るものの、リーマンショックにより正社員にも関わらずリストラされてまたもやニート生活に堕ちる。
その後は奇跡的に大手家電量販店に転職し、接客販売業に従事。
数年間満足した生活を送ったが、夢を見たくて再度ホテルとレストランで修行を開始。

数年で身体を壊して為飲食業自体をリタイアしまたもやニートになりながらも何かしらの正社員にならないとマズイなと思う。
その後転職活動を営業、事務、などのデスクワーク中心の業種に絞り転職活動を行う。

今から営業は無理だと思いIT業界を目指して勉強を開始し転職を成功させて現在に至る。

現在はエンジニアとしてシステムエンジニアとして上流工程から下流工程まで浅く広く。

趣味は料理、it関連、音楽、映画、ゲーム、レジャー、ガジェット、ダーツなど

定期的にmoriblogを更新しておりますので読んでいただけたら幸いです。

シュン@pgfratをフォローする

カテゴリー

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