HTML/CSSの勉強を進め、架空のコスメサイト「Lumiere」を制作しました。
サイトのレイアウトや色、文字の大きさなどはHTMLとCSSを使って作ることができましたが、制作中に苦戦したことがあります。
それが、ヘッダーのメニューを開いたり閉じたりする仕組みです。
見た目を作ることはできても、ボタンをクリックしたときに何が起きるのか、その仕組みがよく分かりませんでした。
そこで、次はJavaScriptを勉強することにしました。
JavaScriptとは？
JavaScriptは、Webサイトにさまざまな機能や動作を加えることができるプログラミング言語です。
例えば、次のようなことができます。
- ボタンをクリックすると色が変わる
- メニューボタンをクリックするとナビゲーションが開く
- 入力フォームの内容をチェックする
- 画面に表示する内容を切り替える
このように、ユーザーの操作などをきっかけに処理を実行できることが、JavaScriptの特徴のひとつです。
HTML・CSS・JavaScriptの違い
HTML・CSS・JavaScriptは、それぞれ役割が異なります。
- HTML： Webページの構造や内容を作る
- CSS： 色や大きさ、配置などの見た目を整える
- JavaScript： 操作に応じた処理や機能を実装する
例えば、メニューボタンを作る場合、HTMLでボタンやメニューを用意し、CSSで見た目や表示状態を整え、JavaScriptでクリックされたときの開閉処理を実装できます。
それぞれの役割を組み合わせることで、使いやすいWebサイトを作ることができます。
まとめ
今回は、JavaScriptとは何か、HTML・CSSとの違いや、JavaScriptでできることについて整理しました。
これまでHTML/CSSを勉強してきましたが、実際にサイトを制作することで、見た目を作るだけでは実現できない機能があることにも気づきました。
特に、メニューの開閉など、ユーザーの操作に応じて動作する仕組みは、これからJavaScriptを学んで理解していきたい部分です。
まだJavaScriptについては分からないことが多いですが、まずは基本的な文法から少しずつ学んでいこうと思います。
次回からは、変数やデータ型、条件分岐、繰り返し処理など、JavaScriptの基本的な文法について、実際に勉強しながら学んだことやつまずいたポイントを記録していきます。
分からないことを一つずつ整理しながら、少しずつできることを増やしていきたいです。
