あとおすすめの参考書もあれば教えてほしい・・
こういった疑問に答えます。
・HTML、CSS、JavaScriptとは？基礎知識や役割の違い
・HTML、CSS、JavaScriptの学習におすすめの参考書【初心者向け】
・フロントエンド開発言語の基礎が理解できたらPHPも勉強しよう
この記事を書いている私は、プログラミング歴2年ほどで毎日HTML、CSS、JavaScriptを書いています。
これらはフロントエンドの開発言語で初心者の方でも独学で学べる範囲なので、IT系で仕事をしていきたいと思っている方は、ある程度勉強しておきましょう。
このあたりのこともあとで説明します。
それでは見ていきましょう。
HTML、CSSの違いを画像で確認してみよう
ひとまずHTML・CSS・JavaScriptの役割をそれぞれ簡単に紹介します。
- HTML：Webサイトの土台
- CSS：見た目やデザインを制御
- JavaScript：動的な振る舞い
こんな感じですね。
といっても、文字だけだとわかりづらいと思うので、ひとまずHTMLとCSSの違いを画像で確認してみましょう。
今回は、Yahoo!のトップページを使用します。
HTMLだけで見たYahoo!トップページ
こちらがHTMLだけで見たYahoo!のトップページです。
要素のみの状態ですね。
もちろん文字をクリックするとそれぞれリンク先のページに飛ぶし、検索をすることもできるので本来の機能はちゃんと果たしています。
ただこれだとちょっと味気ないしなんだかつまんないですよね・・笑
ここでCSSの出番です！！！
このHTMLにCSSを追加してみましょう。
HTML&CSSで見たYahoo!トップページ
どうでしょう？とても見やすくなりましたよね。
これは、CSSでデザインの装飾をしてユーザーが見やすいようにしたからです。
JavaScriptは画像だとちょっとわかりにくいのですが、例えばこのYahoo!トップページで言うと、右側に広告がありますよね。
広告によってはユーザーの目を惹くために動いていたりしますが、そう言う仕掛けをJavaScriptで行うことができます。
詳しくは下で解説しますね。
HTML、CSS、JavaScriptとは？基礎知識や役割の違い
HTMLやCSS、JavaScriptは、フロントエンドの開発言語です。
フロントエンドとは、ユーザが見ているWebサービスやWebアプリの見た目の部分のことです。
例えば、背景にアニメーションを流してみたり、カーソルを合わせたときに文字の色を変えてみたりとかですね。
フロントエンドの逆にバックエンドもあります。
簡単に言うと、サーバーサイドやデータベースの連携などユーザの目に見えない部分のことです。
例えば、検索結果の出力や会員情報の登録とかですね。
ひとまず、今回はフロントエンドの開発言語についてなので、HTML、CSS、JavaScriptについて詳しく見ていきましょう。
HTMLとは？
HTMLとは、Hyper Text Markup Language (ハイパーテキスト・マークアップ・ランゲージ) の略で、Webサイトの構造(土台)を記述するための言語です。
Webサイトを制作する際は最も基本となる言語で、必ず必要になります。
「タグ」と呼ばれる記号を使って、どこまでが見出し、ここからここまでが文章、ここには画像を入れるなどといった命令を出してWebサイトの構造を作ります。
CSSファイルやJavaScriptファイルを読み込んで、3つの言語をつなげる役割も果たしてくれます。
実際にHTMLを表示してみよう
HTMLを実際に表示してみましょう。
上記のサンプルコードをテキストエディタやメモ帳に貼り付けて、「test.html」という名前で保存します。
それをブラウザにドラック&ドロップしてみましょう。
どうでしょう？
上の画像のように、<body></body>の中身がページに表示されたと思います。これがHTMLとなります。
HTMLには、サンプルコードに書いているタグ以外にもいろんな意味を持つタグがありますが、すべてを覚える必要はないのでひとまず大丈夫です。
CSSとは？
CSSとは、Cascading Style Sheets (カスケーディング スタイル シート) の略で、見た目やデザインを制御するための言語です。
HTMLと一緒に組み合わせて使う言語で、HTMLタグで囲んだ文字の色や大きさ、配置などを指定することができます。
CSSは、HTMLの中に組み込んで使用することもできるし、別のファイルに分けて記述し、HTML側でCSSファイルを読み込むこともできます。
HTMLにCSSを適用させてみよう
今回はHTML内にCSSを組み込みます。
先ほどのHTMLのサンプルにCSSを記述してみましょう。
記述できたら、先ほど同様にブラウザに表示してみましょう。
h1タグの部分が赤色なり、pタグの中の文字が青色でサイズが大きくなりましたよね。
こんな感じに、より見やすい表示のためのスタイルを定義するのがCSSの役割になります。
JavaScriptとは？
JavaScriptとは、動的な振る舞いを記述する言語です。
動的な振る舞いというのは、例えばポップアップが表示されたりクリックするとアニメーションが動いたりなどです。
他にも、フォームに適切な文字列が入力されているかのチェックや複数の画像をスライド形式で入れ替わる機能なども実装できます。
サーバーと通信する必要がないので、送受信に時間がかかることもありません。
JavaScriptはCSS同様に、HTMLの中に組み込んで使用することもできるし、別のファイルに分けて記述し、HTML側で読み込むこともできます。
JavaScriptを使って動的な動きを適用してみよう
今回はHTML内にJavaScriptを組み込みます。
先ほどのHTMLのサンプルにJavaScriptを記述してみましょう。
記述できたら、先ほど同様にブラウザに表示してみましょう。
開いた瞬間に上記のように「成功です！！」と表示されればOKです。
こんな感じでJavaScriptを利用すると、ブラウザ上でいろんな動きを行えるようになります。
スポンサードサーチ
HTML&CSS、JavaScriptの学習におすすめの参考書【初心者向け】
HTML&CSS、JavaScriptは独学で勉強が可能です。
初心者の方でもそんなに難しくないと思うので、自分で学習して簡単なWebページなどを作ってみましょう。
今回は初心者の方向けの入門書を紹介します。
基礎知識を身につける本は何冊も読む必要はないので、それぞれ良さそうだなと思った本で学習しましょう。
HTML&CSS学習のおすすめ入門書【2選】
まずは、HTMLとCSSの学習ができる入門書を2冊紹介します。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
まず最初に紹介する1冊は、「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」です。
WebクリエイターボックスのManaさんが書かれたHTMLとCSSの入門書籍で、Amazonのベストセラー本です。
特徴・おすすめポイント
後半は実習形式で、綺麗なデザインのWebサイトを制作することができます。
図もわかりやすく、とにかく説明も丁寧なので初心者の方でも挫折せずに読み進められます。
スラスラわかるHTML & CSSのきほん 第2版
次に紹介する本は、「スラスラわかるHTML & CSSのきほん 第2版」です。
タイトルにある通り、HTML&CSSの「きほん」を学ぶことができる、初心者向けの入門書です。
特徴・おすすめポイント
本を読み進めることで、PCだけでなくスマートフォンにも対応したサイトを制作することができます。
JavaScript学習のおすすめ入門書【2選】
次に、JavaScriptの学習ができる入門書を2冊紹介します。
JavaScriptを勉強する前に、HTMLとCSSの基礎はおさえておきましょう。
確かな力が身につくJavaScript「超」入門 第2版
まず紹介する1冊は、「確かな力が身につくJavaScript「超」入門 第2版」です。
初めてJavaScriptを学ぶ人向けで、丁寧かつわかりやすい解説と実際に動かすことで理解を深めていくことができる入門書として、かなりの良書です。
特徴・おすすめポイント
初心者がつまずきやすいポイントも丁寧に解説されているので、挫折せずに読み進めることができます。
スラスラ読める JavaScript ふりがなプログラミング
次に紹介する本は、「スラスラ読める JavaScript ふりがなプログラミング」です。
全てのプログラムにふりがな(日本語訳)と読み下し文による説明があるので、初めての方でも理解しやすい本です。
特徴・おすすめポイント
実際に手を動かしながら進むだけでなく、応用問題なども用意されているので、しっかりアウトプットすることができます。
HTML&CSS、JavaScriptを一緒に学習できる入門書
最後は、HTML&CSSとJavaScriptを一緒に学習できる入門書を1冊紹介します。
これからWebをはじめる人のHTML & CSS、JavaScriptのきほんのきほん
紹介する1冊は、「これからWebをはじめる人のHTML & CSS、JavaScriptのきほんのきほん」です。
サイト制作の現場では3つセットとして扱われるHTML、CSS、JavaScriptを総合的に学ぶことができる本です。
特徴・おすすめポイント
サンプルコードも用意されているので、初心者の方でも理解しやすいです。
フロントエンドの開発言語の基礎が理解できたらPHPも勉強しよう
フロントエンドの開発言語は、比較的初心者の方でも独学して知識を身につけることが簡単です。
なので、基礎知識が理解でき、HTML&CSSとJavaScriptを使用してWebページを作れるようになったら、バックエンドの開発言語の一つでもあるPHPを勉強しましょう。
なぜPHPかというと、初心者の方でも比較的取得しやすい言語で需要も高いからです。
HTML&CSS、JavaScriptだけでも簡単なWebサイトを作ることは可能ですが、PHPを習得できれば、会員情報登録機能やオンライン決済機能がついたECサイトなども実装することができます。
就職・転職するにしても、フロントエンドエンジニアにもなれるしバックエンドエンジニアにもなれます。
可能性が広がりますよね。
とはいえ、いきなりPHPを勉強してもなんのこっちゃとなってしまうので、ひとまずフロントエンドの開発言語(HTML、CSS、JavaScript)の基礎知識だけはちゃんと学習しておきましょう。
PHPについては、当ブログで【初心者向け】PHPとは？基礎知識とPHPがプログラミング初心者におすすめの理由で解説しているので興味のある方はぜひ。
スポンサードサーチ
まとめ
いかがだったでしょうか？
フロントエンドの開発言語技術は、比較的に習得しやすいのでまずは本で基礎を勉強してから、自分自身でなにかしらのWebページなどを制作してみてくださいね。
というわけで今回は以上です。