今日の学び② 〜1冊で全て身につくHTML &CSSとWebデザイン入門講座〜

こんにちは!iDoCoro編集部の藤田です。前回の記事では、Webサイトの種類、インターネットの仕組みについてこの本をもとに解説しました。今回はブラウザの種類や本題のHTMLに関しての記事を発信していきたいと思います。また今回の記事でもHTMLとCSSが全くわからない状態のiDoCoro編集部の藤田が初心者目線でこの本から学んだことを皆さんに共有できたらなと思っております。よろしくお願いします!

目次

  • ブラウザーの種類
  • HTML とは

ブラウザの種類

webのサーバーから各デバイスに送信される情報は「コード」と呼ばれる暗号でできています。そのため翻訳する必要があります。この翻訳機能をもったものがブラウザーと呼ばれるモノになります。このブラウザーを通してWebサイトの情報がいつも私たちが見ている画面へと切り替わります。主なブラウザーは以下の通りになります。

  • Google Chrome(グーグル クローム)
  • Safari(サファリ)
  • Microsoft Edge(マイクロソフト エッジ)
  • Microsoft Internet Explorer(マイクロソフトインターネットエクスプローラー)
  • Firefox(ファイヤーフォックス)

スマートフォンなどで使用しているとよくブラウザーという言葉を目にしますがこれほどまでに種類があるとは思いませんでした。iPhoneだとSafariが標準搭載されていて、Android端末のスマートフォンだとGoogle Chromeが標準搭載されているイメージです。ブラウザーの役割とはWebページを見やすく表示することです。そのため、ブラウザーの種類によって動作が変わることはほとんどありません。ただ各ブラウザーごとに翻訳の仕方が変わるので見た目が多少変わることもあります。Webサイトを作り始める際にはページの表示確認をするためにも標準ブラウザーを決める必要があります。

HTMLとは

HTMLとは「Hyper Text Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)」の略です。Webページの土台となるファイルを作成するコード(言語)になります。

具体的には、Webページに表示したい文章を「タグ」と呼ばれる様々な文字列で囲んでいくことによって書いていきます。タグとは「<」「>」この文字のことを示します。

タグは様々な種類があり、それぞれ意味があります。タグで表示したい文字列を囲むことで、「この文字列は見出しです」「ここは1段落つきます」のような指示をWebサイトのほうに出すことができます。このようにブラウザーにそのWebサイトの構造を伝えることがHTMLタグの役割です。現在、HTMLはインターネット上に存在する全てのWebサイトに使われています。

HTMLコードを書く準備をしよう!

よし!これからHTMLコード使ってWebサイト作っていくぞ!と思ったはいいものの実際に何に書き込むべきかわかりませんよね…そんな皆さんのためにHTMLコードを書く準備をする手順を紹介していきます。

 

テキストエディターの準備をしよう!

書き込む練習をする上でこの「テキストエディター」を使うことによって飛躍的に作業効率が良くなります。テキストエディターには、制作する上で役に立つ「補完機能」が装備されており、コード、タグを予測して入力できたり、ショートカットキーで簡単に記述できたりします。また、コードの役割ごとに色を変えて表示してくれるので、単純なミスを発見しやすくなります。作業効率が上がること間違いなしです。

この本ではMicrosoft社が開発した「Visual Studio Code」通称「VSCode」が紹介されています。シンプルで使いやすく無料でMacにも対応しているため是非使ってみてください!