ここではWebサイトの構成を簡単に解説するよ。今回はサラッと学習していきましょう。
フロントエンド（見た目や操作部分）とは
フロントエンドは、Webサイトやアプリで、みなさんが「目で見たり、触ったりできる部分」の事です。
そうです！普段私たちがスマホの画面で見ている部分です。文字やボタン、画像など、実際に「見える」＋「使う」部分全部がフロントエンドです。
3つの要素
フロントエンドは
◯ HTML（配置・設計図）
◯ CSS（デザイン）
◯ JavaScript（動き）
の3つの要素からできています。
たとえば、スマホでオンラインショップを使うとき、
1 商品の画像が見える→HTMLで配置・設計図…ここに商品を置く ここにカートを置く ここに値段を表示するなど、配置をします。簡単に言えば、何をどこに置くかを決めるだけです。
2 画面がカラフルでおしゃれ→CSSでデザイン…文字の大きさを変える 背景や文字の色を変える ボタンを丸くするなど、Webページをおしゃれにすることです。
3 「カートに入れる」を押すと反応→JavaScriptで動きを作る…ボタンを押したら、別のページに移動したりする。
これ全部、フロントエンドの仕事です。
HTMLとCSSのみを使って分かりやすく画像で簡単に説明すると、
HTML（配置・設計図）のみで表示される画像です。
一番上の【見出し】＝いまのきもち その下に【写真】、写真の下に【説明文】＝さいこ〜〜 という配置にしました
CSSでデザインされていないので、背景は白、フォントも普通、写真は四角、全体的に左側に寄っていますね。
しかし、CSSでデザインを加えると、
このように背景色はグレーに、フォントを可愛く、写真を丸くし、全体的に中央にデザインしました。
難しそうに感じるかもしれませんが、一歩ずつ進めば大丈夫です。私も挑戦中なので、皆さんと一緒に成長できれば嬉しいです。
まとめ
フロントエンドとは、ウェブサイトやアプリの「見た目」や「使いやすさ」を作る部分のことです。
この時点ではあまり深く考えずに、HTML（配置 設計図）・CSS（デザイン）・JavaScript（動き）の3つの要素からできているということだけ覚えておきましょう。
次回は プログラミング始める前の【準備】Visual studio code（ビジュアル スタジオ コード）ソフトについて学びましょう。
コメント