コーディングの概要

Coding Overview

HTML/CSS/JavaScriptの役割と違い

HTML(HyperText Markup Language)

  • ウェブサイトの構造をコンピューターへ指示するために使うコード。マークアップ言語。
  • 見出しや段落、画像や箇条書きのリスト、テーブルなどのウェブサイトの構造を、タグを使って記述する。

CSS(Cascading Style Sheets)

  • HTMLの要素のスタイルを設定するコード。スタイルシート言語。
  • 文字の色やサイズ、背景色、レイアウトなどの外観を管理する。

JavaScript

  • ブラウザの中で動くプログラミング言語。 (クライアントサイド言語)
  • HTML側で読み込む。
  • ユーザーの操作に応じて意図した動作を命令でき、ウェブサイトが読み込まれた時やリサイズした時、ユーザーがクリックした時やスクロールした時など。
  • ほとんどのウェブサイトで使用され、アニメーションも実行できる。
  • クオリティの高いサイトになればなるほど高度な記述が必要な傾向。

JavaScriptとJava

ハンバーガーメニュー

JavaScriptを省略すると「JS(ジェーエス)」という。
Java(ジャバ)という別のプログラミング言語もあるので間違えないように注意する。

JavaScriptを使った実例

ハンバーガーメニュー

スマホなどであるメニューで、三本の水平線のアイコンをクリックするとメニューが開く。

カルーセルスライダー

左右の矢印などでスライドさせ、要素を切り替える。

スクロールアニメーション

スクロールした際、要素が画面ないに表示されるとアニメーションする。

モーダル

画像をクリックすると拡大表示される。

スムーススクロール

リンクをクリックすると、ページ内の指定位置にスクロールアニメーションする。

パララックスアニメーション

スクロールに連動して要素や画像などが微妙に動くアニメーション。