1-02Webサイトとブラウザの基礎知識

このページではWebブラウザに関する基礎知識と、HTMLやCSSを書くために必要なエディタの使い方を簡単に説明します。

Webサイトが表示される仕組み

Webサイトとは、あなたがスマートフォンやPCで見ているGoogle・YouTube・Twitterなど、インターネット上にあるページのまとまりのことです。

Webサイトはサーバーと呼ばれるコンピューターの中に保存されていて、私たちはスマホやPCをインターネットにつなぎ、世界中にあるサーバーにアクセスして、サーバーに保存されている情報を呼び出すことでWebサイトを見ることができます。

サーバーに保存されているWebサイトはいくつかの要素によって作られています。主に以下のものです。

  • HTML
  • CSS
  • 画像（PNG・JPEG・GIFなど）*
  • プログラム（JavaScript・Ruby・PHP・Pythonなど）
  • データベース

*今回のスロットプログラムではPNGを使用しています。

　

　

この教材の前半では、Webサイトの表示に必ず必要となるHTMLと、Webサイトを美しく整えて表示するために必要なCSSというものについて解説をします。また後半では、アニメーションなどの複雑な表示をするために必要なJavaScriptというプログラムについても本スロットプログラムを通して触れていきます。

ページ同士を繋ぐ「ハイパーリンク」

Webサイトはたくさんのページで構成されており、ページ同士はハイパーリンクという技術つながっています。略してリンクと呼ぶことが一般的です。

試しににこのリンクをクリックしてみましょう

GoogleというWebサイトが開かれます。Googleは閲覧したいWebサイトを探すための検索エンジンと呼ばれるWebサイトです。表示されたGoogleのページの真ん中にはキーワードの入力欄があります。ここに試しにYouTubeと入力してEnterを押してみてください。

表示されたYouTubeというリンクをクリックしてみましょう。これでGoogleというWebサイトから、YouTubeというWebサイトへ移動できます。

そしてYouTube内にもたくさんのリンクが貼られていて、Webサイトの中をぐるぐると回遊してたくさんのページを見ることが出来ます。

Webサイトは世界中のたくさんの人達の手によって作られており、サイト同士はリンクで繋がり、私たちは作られたページをリンクで次々に移動することによって新しい情報を大量に得ることができます。

ブラウザの紹介

Webサイトを閲覧するにはウェブブラウザというアプリケーションが必要です。ウェブブラウザは略してブラウザと呼ばれます。このブラウザは複数の会社から提供されています。Webサイトを閲覧するという目的は同じですが、それぞれのブラウザごとに独自の機能が搭載されています。

Chrome（クローム）

上記で紹介したGoogleが提供している、世界で一番利用されているブラウザです。Windows・macOS・iOS・Androidで利用することができます。自分の使いやすいようにカスタマイズが出来たり、Googleアカウントでログインすることによってブックマークや設定を保存することが出来ます。開発機能も充実しているので、本教材はChromeを使って進めていきます。

chromeをまだインストールしていない方は、こちらを参考にインストールしてください。

VS Codeの準備

ここからはHTMLやCSSを書くのに必要なエディタについて解説します。

HTMLやCSSを書くのにはエディタと呼ばれるアプリケーションを用意する必要があります。本コースではMicrosoftが提供しているVisual Studio Code（略してVS Code）を利用します。

VS Codeのインストール

こちらも下記の記事を参考にインストールしましょう。

【Win版】VSCodeをインストールしよう

【Mac版】VSCodeをインストールしよう

VS Codeのユーザー設定を変更します

VS Codeを利用しやすいようにいくつか設定を変更します。コードを書いているとスペースをよく使いますが、スペースが１つ入っているか入っていないかだけで、コードが動かなくなってしまうことがあります。こういった間違いを減らすためにスペースを「・」で表示するように設定をします。また、HTMLを簡単にかけるようにするためのEmmet（エメット）という機能がtabで動くように、さらにEmmetの設定を日本語に切り替えます。

Windows の場合、 Ctrl + Shift + P を押します
Mac の場合、Command + Shift + P を押します

VSCodeの上部に出てきたバーに JSON と入力し、 基本設定:設定 (JSON) を開く を選択します。
もし 基本設定:設定 (JSON) を開く が表示されない場合、上記画面のようにバーの入力欄の先頭に > が表示されているか確認してください。表示されていない場合はバーを表示させる手順からやり直してみてください。

基本設定:設定 (JSON) を開く を選択

setting.json というファイルが開くので、以下のコードを貼り付けます。以下の12行のコードをマウスで選択して、Command + Cでコピーをし、setting.json にCommand + Vで貼り付けます。
なお、Windowsの方はこれ以降Commandキーの部分をCtrlキーで読み替えてください。

{
    // スペースを表示
    "editor.renderWhitespace": "all",
    // emmetの言語設定を日本語に
    "emmet.variables": {"lang" : "ja"},
    // emmetをタブキーで実行
    "emmet.triggerExpansionOnTab": true,
    // タブをスペース2個に変更
    "editor.tabSize": 2,
    // 折り返し
    "editor.wordWrap": "on",
}

なお、 VS Code を普段使っている人は、これまでに自分で変更した設定が残っているかもしれません。その場合はすべて書き換えるのではなく、最後の項目の末尾にカンマ（,）を入力し、その後ろに上記の内容を貼り付けてください。

貼り付けると setting.json はこのようになります。

Command + Sで上書き保存をします。Tips　よく使うショートカットキーについて

Tips　よく使うショートカットキーについて

ここまでで登場したコピー・貼り付け・上書き保存はどのアプリケーションでも使える非常によく使うショートカットキーなので覚えておきましょう。
・コピー：Command + C
・貼り付け：Command + V
・上書き保存：Command + S

まとめ

  • WebサイトはHTML・CSS・画像などの複数の要素で作られている
  • WebサイトやWebページはリンクで繋がれており、リンクを辿って移動することができる
  • Webサイトを閲覧するにはブラウザが必要であり、ブラウザには複数の種類がある
  • HTMLやCSSをコーディングするにはエディタというアプリケーションを利用する

スポンサーリンク

Posted by エスパパの娘