最初の言語にオススメ...ContentsHTML+CSS/JavaScriptはWebページの材料HTML+CSS/JavaScriptは3つの言語の組み合わせHTMLCSSJavaScriptHTML+CSS/JavaScriptでできることHTML+CSS/JavaScriptはなぜ一緒に学ぶの?HTML+CSS/JavaScriptの開発に必要なものHTML+CSS/JavaScriptの開発の流れ今回のゼロわか次に学ぶことHTML+CSS/JavaScriptはWebページの材料ひなドリまず、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(エイチティーエムエル)と読みます。Language(ハイパーテキストマークアップランゲージ)の頭文字でHTMLです。雑な日本語訳をすると「超いい感じの文字構造化言語」というような意味です。これ以上略しようがないので、現場でも普通にエイチティーエムエルと言っています。役割Webページの最もベースとなる部分を作成する言語で、最も重要な言語とも言えます。CSS/JavaScriptだけでWebページを作れませんが、HTMLは単体でWebページを作れます。HTMLで作成されているWebページとして、爆速表示で有名な伝説のファンサイト「阿部寛のホームページ」さんがあります。CSS読み方・正式名称CSS(シーエスエス)と読みます。Sheets(カスケーディングスタイルシーツ)の頭文字でCSSです。これ以上略しようがないので、こちらも普通にシーエスエスと言っています。役割HTMLの要素を装飾します。文字の色を変えたり、背景色を変えるなどがわかりやすい役割です。JavaScript読み方・正式名称JavaScript(ジャバスクリプト)と読みます。人によってはジャバスクと言ったりします。チャットなどの文字ではJSと略されたりもしています。役割HTMLやCSSに対して働きかけて、対象の要素に動きを付けたりできます。動きのあるWebページはJavaScriptなしでは作れないでしょう。Javaという言語とは全くの別物ですので注意しましょう。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)メモ帳(無料でOK)ブラウザ(無料でOK)HTML+CSS/JavaScriptの開発環境はパソコンさえあれば、無料です。メモ帳アプリとブラウザだけあればOK。メモ帳、ブラウザ共に無料で様々なものがありますが、はじめはパソコンに既に入っているもので十分でしょう。ブラウザだけはデバッグのしやすいChromeにしておいてもいいかもしれません。作成したWebページを世界に公開する場合は、サーバなどの知識が必要になるので、メモ帳とブラウザだけでは開発できません。HTML+CSS/JavaScriptの開発の流れHTML+CSS/JavaScriptの開発3STEPメモ帳でHTMLを書くブラウザでHTMLを開く動作を確認するHTML+CSS/JavaScriptの開発の流れは非常に簡単な3STEP。メモ帳で書いて、ブラウザで動きを確認するだけです。ひなドリそれだけ?わかドリそれだけ。簡単だよね今回のゼロわかこの記事でわかったことHTML+CSS/JavaScriptとはWebページの材料HTML+CSS/JavaScriptを一緒に学ぶ理由Webページを作る上ですべての知識が必要なためHTML+CSS/JavaScriptの開発方法メモ帳で書いて、ブラウザで確認!お疲れさまでした。今回は、HTML+CSS/JavaScriptとは何か、なぜ一緒に学ぶのかをゼロからわかっていただきました。わかドリイエーイめっちゃ偉い!次に学ぶこと次はHTML+CSS/JavaScriptの役割や動きをもっと詳しく学んでいきましょう。MEわかドリ現役SE。何とか転職したりして10年生き残った。プログラミングのブログを運営。SEわかドリ現役SE。何とか転職したりして10年生き残った。プログラミング未経験だったかつての自分であるひなドリを救うため、プログラミングのブログを運営。