ニート脱出のためプログラミングを始めた30代後半おじさんの冒険録。

ぱらぽれ

プログラミング

HTML、CSS、JavaScriptの違い・初心者のざっくり解説

この記事は私のプログラミング学習のメモ的なものです。

学習前の私は、ブログをちょこっとカスタマイズしたくても「CSS」という単語が出てきた瞬間そっ閉じするようなレベルでした。

今は少しお勉強をして、HTMLやCSSがぼんやり何なのかわかる程度にはなりました。

この記事でもそのくらいのざっくりとした理解を目指して、かんたんな解説をしていきます

 

この記事のまとめ

HTML・CSS・JavaScriptの違い&できること

30秒でできる!3つの言語でwebページ作成

それぞれの言語でできること

簡単に言うと3言語の役割は下記のとおりです。

HTML:webページの構造を作る。

CSS:装飾をする。

JavaScript:動的な処理をする。

HTML

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。

Webページの基本構造を作る言語です

例えば、これがタイトルだよ、ここからここまで本文だよ、ここで改行するよといった指令をコンピュータに送ることができます。

ぱら
はいぱぁ・・・まーっくあっぷう・・・。
ぽれ
強そう名前ね。

CSS

CSS とはCascading Style Sheets (カスケーディング・スタイル・シート) の略で、スタイルシートと呼ばれることもあります。

HTML の装飾をすることができる言語です

ページのレイアウトを変更したり、文字の色や大きさを変更したりできます。

JavaScript

主に、Web サイトのページ内に記述され、Web ブラウザ上で実行されるプログラミング言語です。 

Webページに動的処理を加えることができます

例えば、ポップアップ通知や入力フォームの送信などができます。

HTML・CSSよりもできることが多く、webアプリやゲーム開発もできたりと、なんかもうすごい色々できます

ぽれ
もうちょっとまともな説明ないの!?

【30秒でできるHTML】コピペでwebページを作ってみよう

ここからは各言語をコピペで使ってみて、どんな動きをするか実際に試してみましょう。

4ステップでできます。

  1. メモ帳をPCで開く
  2. コピペする
  3. ファイル名を変更する
  4. ファイルを開く

 

まずパソコンでメモ帳を開いて、下記のコードをコピペします↓↓

メモ帳のファイル名を「first.html」という名前に変更して保存します。

このときの注意点は「.txt→.html」と拡張子も変更する点です。

そしてメモ帳を閉じてから「first.html」を開くと、あら不思議「よろしく」と書かれたページが表示されます。

ぽれ
ね、簡単でしょ。

※拡張子の変更方法がわからない場合

「拡張子 変更」でググるとやり方が出てきます。

【30秒でできるCSS】コピペで背景色を変えてみよう

新しいメモ帳をPCで開いて下記をコピペします。

ファイル名を「second.css」にして「first.html」と同じフォルダーに保存します。

そして「first.html」を開くとページ背景が水色になっているはずです。

 

どうやって動いているのか?

「first.html」のbody部分で「second.css」を呼び出しています↓↓

呼び出された「second.css」には背景色を水色にしてください(background-color: lightblue;)という指令が書かれていたため、背景色が変わったという流れです。

【30秒でできるJavaScript】コピペでアラートを表示しよう

新規のメモ帳に下記をコピペします。

ファイル名を「third.js」という名前にして「first.html」と同じフォルダーに保存します。

そして「first.html」を開くとポップアップアラートが表示されるはずです。

 

どうやって動いているのか?

CSSの時と同じように「first.html」のbody部分で「third.js」を呼び出してJavaSciriptを実行しています↓↓

「third.js」にはアラートを表示してください(alert("JavaScriptを学ぼう"); )という指令が書かれていたので、ポップアップアラートが表示されました。

このようにHTMLからCSSやJavaScriptを呼び出して実行することができます。

 

ちなみにHTMLは上から順番に実行されます。

アラートのOKボタンを押した後に背景色が青くなるのは、上から実行されているためです。

HTMLの中身をアバウト解説

HTMLの中身を1行ずつ見ていきます。

長いので興味ない方は飛ばしてちゃって構いません。

 

まず、HTMLの中身は大きく分けてheadとbody部分に分かれます

headにはタイトルや著者情報・ページの説明などブラウザに表示されない情報を書きます。

bodyはブラウザに表示されるコンテンツを書くところです。

 

1行目から解説して行きます。

 

<!DOCTYPE html>

html5を使うよ。

 

 

<html lang="ja">

ここからhtmlの中身を書きますよ。

lang="ja"は日本語ですよ、という宣言です。

 

 

<head>

ここからheadを書きますという宣言。

 

 

<title>はじめてのHTML</title>

このhtmlページのタイトル宣言。

 

 

</head>

head終了のお知らせ。

ここでheadは終わりですよ、という宣言です。

 

 

<body> でbodyを書きますという宣言しています。

「よろしく」がwebページに表示されます。

 

<script src="third.js"></script> でthrid.jsを呼び出し。

<link rel="stylesheet" href="second.css"> でsecond.cssを呼び出し。

</body> でbodyを終了します。

 

 

</html>

ここでhtmlは終わりですよ、という宣言です。

HTML&CSS&JavaScriptまとめ

  • HTML:webページの構造を作る。
  • CSS:装飾をする。
  • JavaScript:動的な処理をする。
  • <head>は表示されない情報。
  • <body>は表示されるコンテンツ。

上記の5つを覚えておくだけでも、ソースに書かれている内容が少しわかるかと思います。

大枠を理解しているとどこに何が書かれているのか予想がつきやすくなるからです。

また、どの言語も英語を基本にしているので、alert("〇〇〇");と出てきたらアラートを呼び出しているんだなと理解できます。

気になるページがあったらソースを確認してみるのも良いです。

Google Chromeなら「Ctrl + U」でソースが表示されます。

-プログラミング

Copyright© ぱらぽれ , 2020 All Rights Reserved.