💻

HTMLとCSSとJavascriptって何ができるの？

2021/11/18に公開

CSS

HTML

JavaScript

tech

※このブログは、プログラミング初学者が書いているため、情報やニュアンスに誤りがある可能性がございます。予めご了承ください。

HTMLとCSSとJavascriptで何ができるの？

簡単に超ザックリまとめると・・・

「これら3つの言語を使うと、 $\textcolor{red}{Webサイトの見た目を作る}$ ことができる！」

それぞれの役割は・・・
HTML　→　文字や図の羅列（装飾なし）で、文章構造を担っている
CSS　→　装飾を付ける
Javascript →　動きを付ける

※厳密にいうと、HTML5では動的な動きも可能になったりと、バージョンアップに伴い上記と異なる仕様も出てきますが、なんとな〜くこんな感じでイメージすると私は分かりやすかったです。

けど、さすがにザックリしすぎてますね。
ということで、もう少しだけ詳しく見ていきましょう！

ちなみに、それぞれのファイルをバラバラに作った場合を想定してまとめました。
（「外部定義」という書き方です。ここではサラッと流してください！詳しくはまた別の記事に♪）

HTMLって何？

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

もともとは、論文を簡単に管理しよう！
ということを目的に、スイス・ジュネーブにあるCERN（欧州原子核研究機構）により、サーバーやブラウザとともに生み出されたそうです。

HTMLは何ができるの？

Webページに表示したい文字を書く
Webページに表示したい画像を書く

逆に、「文字の装飾は基本的にできない」と考えると良いかなと思います。

つまり、
文字（フォント）の大きさや色などは全て同じで配置場所も選べない。
「上から順番に（決められた順番で）、決められた場所に、ただ書いていくだけ」みたいな〜

極端に言うと方眼用紙に鉛筆で文字を書いていくイメージが近いかも！

あくまでも私感ですが。とにかく、構造なんですよね。

HTMLのファイル名は？

●●.html
というファイル名を使います。

上記の「●●」には、ファイル名が入ります。
※半角英数字を使い、文字数の制限はありません。

Webサイトを開いた際のトップページとしては、「index.html」 とすることで、不具合が起きにくくなるそうなので、1ページのみのサイトやランディングページ、1つ目のページとしてHTMLファイルを作る場合は、index.htmlとすることをオススメします！

HTMLはどんな書き方？

まず、「このファイルがHTMLファイルですよ」 という宣言を書かなければならない。

んっ！？！？意味不明なんやけど・・・((((；ﾟДﾟ)))))))
どーいうことー！？笑
→別の記事にまとめます。

宣言ができたら、あとは全体の流れ。
それぞれ役割を持ったタグと呼ばれるものを使います。
表示したい文字は、「開始タグ」 と 「終了タグ」 で挟んで書きます。

タグを表す記号としては、不等号の記号である < と > を使います。

終了タグには、「/」を入れる。

イメージがつかみにくいですね。

ということで、実際のコードを見てみましょう！
「こんにちは」を表示させたい場合は以下のように表記します。

index.html

<開始タグ>こんにちは<終了タグ>

↓
↓ 見出し をつけて書いてみると
↓

index.html

<h1>こんにちは</h1>

こんな感じになります！

上記のh1タグは、最も大きな見出しであり、見出しの階層が下にいくたびに、h2、h3、h4…となります。

つまり、

index.html

<h1>1番大きな見出し</h1>
<h2>2番目に大きな見出し</h2>
<h3>3番目に大きな見出し</h3>
<h4>4番目に大きな見出し</h4>

こんな感じですね。ここまでわかりますかね？
難しいよー（汗）という方は、twitterにDMいただければ、もっと噛み砕いてお話しします！

HTMLのタグには、どんな種類があるの？

うーん、いっぱいあるから、ここに書こうか悩む〜。

詳しくは、使いたいものが出てくるたびに都度調べて良いと思いますが、少しだけご紹介しておきます。

タグ	内容
h1,h2,h3・・・	見出し
div	範囲の指定（ブロックレベル）
p	段落
ul、li	順不同のリスト＋リストの項目
ol、li	順序付きリスト＋リストの項目
img	画像の埋め込み
table	表
button	ボタン

CSS（スタイルシート）って何？

CSSとは、Cascading Style Sheetsの略です。
（カスケーディング・スタイル・シート）

CSSは何ができるの？

Webページのスタイル（デザイン・レイアウト）を指定することができます。

文字の色や大きさを指定したり、背景色を変えたり、どの場所にどの内容を置くといった配置を指定するなど、見た目を好きなように装飾することができます。

基本的に、動きの制御が少なめな静的なページを好きなようにデザインできる言語と考えて良いでしょう。

※厳密には違いますけど、初めての学びということで、ザックリとしたイメージでとらえていただければと思います。

CSSのファイル名は？

●●.css
というファイル名を使います。

上記の「●●」には、ファイル名が入ります。
※半角英数字を使い、文字数の制限はありません。

各htmlファイルに対応するCSSファイルを複数紐付けするパターンや、
「複数のスタイルシートを1つのスタイルシートに読み込んで（インポート）して、最終的にそのスタイルシートをhtmlファイルに読み込ませる」
といったものがあります。

ファイル名は自由ですが、1つ目のファイルを作る際には、「style.css」 が多いかな〜
「main.css」 も比較的よく見かける気がするな〜

CSSはどんな書き方？

htmlファイルがあることが大前提のファイルとなります。

そこで、htmlファイルのclassに対応するものは「.（ドット）」、idに対応する部分には「#（シャープ）」を付けて、それに対応するスタイルを指定していきます。
指定したいスタイルは、波括弧 { } の中に書きます。

はいっ！？！？((((；ﾟДﾟ)))))))

ですよね。笑
そうそう、これがわからんのよ！

では、ここでまた具体的に見ていきたいと思います。

■ HTMLファイル

index.html

<div class="aisatsu">おはよう</div>

■ CSSファイル（書き方）

style.css

.aisatsu {
　ここに指定したいスタイルを記述
 }

■ CSSファイル（例：フォントサイズを16px、色を赤にしたい場合）

style.css

.aisatsu {
　font-size: 16px;
　color: red;
 }

Javascriptって何？

JavaScript（ジャバスクリプト）とは、プログラミング言語のひとつである。JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。
出展：JavaScript｜wikipedia

イヤイヤ、難しいわ(´Д｀)

私は1ヶ月弱学習して、以下のように理解しました！（違うかもしれませんが）
↓
「Webページに動きをつける」

これなら、なんとな〜くイメージつかめませんか？

あとでもう少し詳しくお話ししましょう〜

Javascriptは略したら何と呼ぶの？

マクドナルドをマックと呼ぶように、ジャバスクリプトはジャバで良いのかな？

ダメーッ！！！

実は、Javaという言語があるのですが、Javascriptとは全く別の言語だそうです。

どのぐらい違うかというと・・・
私の講師いわく、「ハムスターとハムぐらい違う」

それは、全然違うわ！笑
例えがツボすぎて、その後も講義中に笑いを堪えるの必死www

話がそれましたが、では何と呼ぶの？

答えは「JS（ジェーエス）」

言語を学び始めたばかりだと、「全部アルファベットだから同じやん？」と思ってしまいそうですが、JavascriptをJavaと調べてしまうと全く違う答えが出てきてしまうので、皆さんもお気を付けくださいね〜。

Javascriptは何ができるの？

先に書いたように、「動き」を表現できる言語だと考えてもらえるとわかりやすいかなと思います。

イメージとしては、
雑誌のようなページは、HTML＋CSSで作ることができる。
しっかりとデザインされていますが、ページをめくったからといって写真が動いたり、文字が変わったりしませんよね？

一方、
Webページだと、動きがあるものが多いですよね？
Javascriptを使うと、この動きが表現できます。

例えばこんな動き

スライドショーが表示される
フワッと画像が出現する
グラフが伸びる
数値を入力するとグラフに反映される

繰り返しになりますが、最新のHTML5やCSS3では、動きまで表現できるようになってきたので、一概には言えませんが、とりあえずカッコイイ効果を表現しているものっていうイメージで良いんじゃないかな〜。

Javascriptのファイル名は？

●●.js
というファイル名を使います。

上記の「●●」には、ファイル名が入ります。
※半角英数字を使い、文字数の制限はありません。
※小文字が望ましいらしい。

app.jsをよく見る気がしますが、index.htmlのように全体的に統一されているようなファイル名はJSには見当たりませんでした。

今のところ、以下のような名称が割り当てられているような印象を受けています。

バージョン名
サービス名
その機能

Javascriptはどんな書き方？

こんな感じ！

app.js

const btn = document.getElementById("btn")
btn.addEventListener("click", function(){
  alert("送信しますか？");
})

意味わかんないですよね（汗）
でも、大丈夫！

1ヶ月ぐらいコードを書き続けると、「なるほど！」と思える日がくるので面白いです。
私も1ヶ月前は、上記を見ても何が何だかサッパリでした。

どこで区切るのか、そもそもアルファベットがただ並んでるだけで意味不明と思っていましたが、今は要素ごとに固まりに見えます。

そのうち、コードを見ただけで動きさえも見えてくる（想像できる）んじゃないかと期待している！

HTMLとCSSに比べると、JSはプログラムっぽいです。
奥がものすごく深いそうなので、じっくりとお勉強していきましょう〜

まとめ

いかがでしたか？この記事を読んで、3つの言語がそれぞれどのように使われているのか、何となく想像できるようになっていると嬉しいです。

おさらいということで、もう一度まとめておきましょう！

HTMLは、文字や写真の要素を書く言語。
CSSは、文字や写真などの装飾＋レイアウトを指定する言語。
Javascriptは、カッコイイ効果や動きをつける言語。

最後まで読んでくださりありがとうございました！
エンジニアを目指して頑張りましょー☆

HTMLとCSSとJavascriptで何ができるの？

HTMLって何？

HTMLは何ができるの？

HTMLのファイル名は？

HTMLはどんな書き方？

HTMLのタグには、どんな種類があるの？

CSS（スタイルシート）って何？

CSSは何ができるの？

CSSのファイル名は？

CSSはどんな書き方？

Javascriptって何？

Javascriptは略したら何と呼ぶの？

Javascriptは何ができるの？

Javascriptのファイル名は？

Javascriptはどんな書き方？

まとめ

Discussion