Web制作についての基本を知ろう

初心者のためのHTML入門1 / 9

mosya（モシャ）へようこそ ✨
初心者の方でも分かりやすいように、入門編では Web 制作の基本から丁寧に解説しています。

はじめまして！ぼくの名前は「mosyabo（モシャボ）」です！
これから一緒にコードの書き方を学んでいこうね！

Web 制作について

「Web 制作」とは、インターネット上で見ることができる Web サイトを作ることです。

Webサイトは HTML や CSS、JavaScript という言語を使って、テキスト、写真、動画などのコンテンツを組み合わせて作られています。

Web サイトを作るための言語にはそれぞれに役割があります。
（下のボタンをクリックすると解説が表示されます。）

HTML

HTML はWeb ページの骨組みとなる言語です。

テキスト、画像、リンクなどを HTML を使ってどこに何を表示するかを決めます。
でも HTML だけでは、配置する役割を持っているだけでページのデザインやスタイリングはできません。

CSS

CSS は Web ページの見た目やデザインを整えるための言語です。

色、フォント、レイアウトなどを自由に設定することができます。
また、動きのあるアニメーションをつけたり、画面に合わせたサイズ調整をすることもできます。

JavaScript

JavaScript は、Web ページに機能を追加する言語です。
HTML と CSS で文字や画像を表示することはできますが、それらに動きや反応をつけ加えるのは JavaScript の役割です。

たとえば、ボタンをクリックしたときに何かが起こるようにしたり、ユーザーがページで行う操作に応じて内容が変わるようにすることができます。

ブラウザーとは、インターネット上にある Web サイトを見るためのアプリです。

ブラウザーを使って Web サイトにアクセスし、ページの内容を画面に表示します。

ブラウザーには Chrome（クローム）、 Safari（サファリ）、 Firefox（ファイアフォックス）ど種類がいくつかあります。

ブラウザーの中で特にChrome がおすすめ！！
Chrome はページの読み込みが速くて安全性も高く、多くの人に選ばれています。Web の最新技術をいち早く取り入れているのも魅力の 1 つです。

ダウンロードしていない場合はこちらからダウンロードしましょう！

Web サイトを作るときは、さまざまなブラウザーや端末での表示を確認する必要があります。

異なるブラウザーやデバイスでは、Web サイトの見え方や動作が変わることがあります。
Chrome、Firefox、Safari などの複数のブラウザーや、スマホ、タブレット、PC などで Web サイトが適切に表示されるかをチェックすることが必要です。

それぞれで見た目が変わることもあるから、みんなに使いやすいサイトにするためには、この確認作業が必要なんだ！

エディターとは、HTML や CSS などの言語を使ってプログラムを書くためのツールです。
それを使うと、簡単にプログラムを作ったり、修正したりすることができます。

Microsoft が開発しているVisual Studio Code、略して VScode（ブイエスコード）というエディターがオススメです。

コードを書く仕事をするときは、自分のパソコンにこのエディターを入れておくと便利だよ！

こちらのリンクからダウンロードできます。

👇VSCode のくわしい使い方はこちらを参考にしてみてください！

mosya ではページの右側に VScode を再現したエディターを用意しています。
書いたプログラムがどう動くかをその場ですぐ確認できるので、効率的に進めることができます！

さあ、mosya を通して Web 制作のスキルを一緒に身につけていこう！
下にある「問題に挑戦」ボタンをクリックして、次のステップへ進もう！