【超初心者向け】経験ゼロでもわかるHTML+CSS/JavaScript入門

前回のゼロわかはこちら▼

【超初心者向け】プログラミング最初の言語にオススメなのは？ この記事でわかること プログラミング言語とは何か プログラミング言語の種類 最初の言語にオススメ...

HTML+CSS/JavaScriptはWebページの材料

HTML+CSS/JavaScriptはWebページの材料で、あなたが見ているこのページもこれらでできています。

この世のどんなWebページもHTMLなしでは作成できず、ほとんどのホームページでHTML+CSS/JavaScriptが採用されています。

とにかく、WebページはHTML+CSS/JavaScriptで出来ているのだなとだけ思っていただければ今はOKです。

HTML+CSS/JavaScriptは初心者向けの言語です。

では、HTML+CSS/JavaScriptをもう少し詳しく説明します。

HTML+CSS/JavaScriptは3つの言語の組み合わせ

HTML+CSS/JavaScriptという言語ではなく、HTML、CSS、JavaScriptという3つの言語からなっています。

言語によって得意分野と役割が違い、いい感じのWebページを作るためには組み合わせる必要があるのです。

また、CSS/JavaScriptのファイルを別にすることで、別のページであっても同じデザインや動きにすることが出来るため、統一感を出すことが可能です。

それぞれの役割、読み方、正式名称はこんな感じです▼

HTML

読み方・正式名称

HTML（エイチティーエムエル）と読みます。

Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の頭文字でHTMLです。

雑な日本語訳をすると「超いい感じの文字構造化言語」というような意味です。

これ以上略しようがないので、現場でも普通にエイチティーエムエルと言っています。

役割

Webページの最もベースとなる部分を作成する言語で、最も重要な言語とも言えます。

CSS/JavaScriptだけでWebページを作れませんが、HTMLは単体でWebページを作れます。

CSS

読み方・正式名称

CSS（シーエスエス）と読みます。

Cascading Style Sheets（カスケーディングスタイルシーツ）の頭文字でCSSです。

これ以上略しようがないので、こちらも普通にシーエスエスと言っています。

役割

HTMLの要素を装飾します。

文字の色を変えたり、背景色を変えるなどがわかりやすい役割です。

JavaScript

読み方・正式名称

JavaScript（ジャバスクリプト）と読みます。

人によってはジャバスクと言ったりします。

チャットなどの文字ではJSと略されたりもしています。

役割

HTMLやCSSに対して働きかけて、対象の要素に動きを付けたりできます。

動きのあるWebページはJavaScriptなしでは作れないでしょう。

HTML+CSS/JavaScriptでできること

かなりざっくり言うと、動きのあるオシャレなWebページが作れるようになります。

HTMLだけでもWebページは作成可能ですが、最近よく見るオシャレなWebページはCSS/JavaScriptを組み込むことが必須。

任天堂のホームページでは、画像の上にカーソルを当てるとメニューが出て来たりしますが、これもHTMLとJavaScriptを組み合わせて動かしています。

最近はWebページを簡単に作成可能なWordPressなども多いですが、HTMLを知っていることでそれらの理解が深まり、なんらかのトラブルがあっても対処可能です。

HTML+CSS/JavaScriptはなぜ一緒に学ぶの？

現場では、ほとんどの場合セットで開発をするためです。

わかドリは10以上のWeb系業務システムに関わっていますが、画面部分を作成する場合はHTMLとCSSとJavaScriptの知識が全て必要でした。

特に、HTMLとJavaScriptの知識がなければ業務は進められなかったでしょう。

CSSは一度作成してしまえば修正することは少ないのですが、表示する情報を変える場合はHTMLを修正しますし、ボタンを押したときの動きを変える場合はJavaScriptの知識が必要でした。

初めて画面を触る時に、わかドリは何がHTMLで、何がCSSで、何がJavaScriptかわからず、非常に苦労しました。

ですので、はじめから一緒に学んで、しっかり見分けが付けられるようにしておくのがいいのです。

HTML+CSS/JavaScriptの開発に必要なもの

HTML+CSS/JavaScriptの開発環境はパソコンさえあれば、無料です。

メモ帳アプリとブラウザだけあればOK。

メモ帳、ブラウザ共に無料で様々なものがありますが、はじめはパソコンに既に入っているもので十分でしょう。

ブラウザだけはデバッグのしやすいChromeにしておいてもいいかもしれません。

HTML+CSS/JavaScriptの開発の流れ

HTML+CSS/JavaScriptの開発の流れは非常に簡単な3STEP。

メモ帳で書いて、ブラウザで動きを確認するだけです。

今回のゼロわか

お疲れさまでした。

今回は、HTML+CSS/JavaScriptとは何か、なぜ一緒に学ぶのかをゼロからわかっていただきました。

次に学ぶこと

次はHTML+CSS/JavaScriptの役割や動きをもっと詳しく学んでいきましょう。

次に学ぶこと▼

HTMLとCSSとJavaScriptの違いを役割で理解する この記事でわかること HTMLとCSSとJavaScriptの役割 HTMLとCSSとJavaScri...