mosya

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 サイトを作るときは、さまざまなブラウザーや端末での表示を確認する必要があります

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

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

エディターについて

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

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

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

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

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

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

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