教材の解説と開発環境

0章 教材の解説と開発環境

0.1 教材の目的

  • WebページやWebサービス制作において、初めの一歩となる知識を学ぶ。
  • 文字の装飾や背景色などを自在に扱えるようになり、統一感のあるWebページを作れるようになる。

0.2 開発環境

エディタ

エディタ」もしくは「テキストエディタ」とは何か? 一言で説明するならば、テキストを書く・編集する・ファイルとして保存する機能をもつアプリケーションです。

最もシンプルなエディタの一つは、パソコンに購入時からインストールされているメモ帳アプリです。

コンピューターに実行させたい処理が書かれたプログラム本体を、コードもしくはソースコードと呼びます。エディタは、コードを作成するために用います。

代表的なエディタを以下に挙げます。これらのエディタには、HTMLやCSSのみならず、さまざまなプログラミング言語のコードを書くのに便利な様々な機能が備わっています。

これらは無料で利用できます。各エディタのWebサイトの「Download」のところから、インストールしてみましょう。

本コースではAWS Cloud9のエディタを用いて、Webページの骨組み・レイアウトを作るHTML、Webページ内の文字などコンテンツを装飾するCSSというプログラミング言語のコードを書いていきます。

AWS Cloud9の環境構築を行なっていない方は、教材コースのCloud9を見ながら、先に環境構築を行なってください。

デベロッパーツール(検証モード)

ここでは、Chromeのデベロッパーツール(検証モード)について説明します。これからHTML/CSSやJavaScriptなどを学ぶ際に、絶対に知っておくべき機能なので早めのタイミングで覚えておきましょう。

Google Chromeで開いたWebサイトの適当な場所で右クリックをすると、「検証」という項目が現れます。「検証」を左クリックすると、Webサイトが下の画像のように切り替わるので、試してみてください。(本教材では侍エンジニア塾ブログを例として使用します)

検証モード画像1

上の画像の左側がブラウザで見たWebサイトのページ、右側がWebページを作っているHTMLとCSSのコードです。

このようにChromeのデベロッパーツールを使うことで、WebページがどのようなHTMLおよびCSSのコードで作られているかを分析できます。

私たちが普段目にしているWebサイトは、HTMLやCSSなどのプログラミング言語で書かれたコードで構築されています。コードのような文字で書かれたデータから、Webページというグラフィックなコンテンツを生成することをレンダリングといいます。

すなわち、ブラウザは、HTMLやCSSのコードをレンダリングしてWebページを生成し、ユーザーである私たちに見せる役割を担うアプリケーションです。

 

表示の読み方-デベロッパーツール側から分析する

検証モード画像2

上の画像で、デベロッパーツールのElements()が選択されています。この「Elements」は、左側のWebサイトのページを作っているHTMLのコードです。

デベロッパーツール左下のStyles()には、Webページを作っているCSSのコードが表示されています。

デベロッパーツールのHTMLコードの選択行(右側の)は、記述されているHTMLコードの行にマウスカーソルを乗せると、そのコードで作られているWebページの領域が色付けされます(左側の)。青の領域は文字などが位置する要素部分、緑の領域は余白部分です。

このようにデベロッパーツールを使うと、HTMLコードとWebページの対応関係を視覚的にわかりやすく把握できます。そのためWeb開発には必須のツールです。

例えば、HTMLコードをきちんと書いたつもりなのに、Webページを見ると意図しない余白が入ってしまう。そんなときの原因究明に役立ちます。

デベロッパーツールの右下部分()では、上下左右でどれだけ余白の幅があるのかを表示しています。
 

表示の読み方-Webページ側から分析する

検証モード画像3

デベロッパーツールを用いると、HTMLのコードからWebサイト上で該当する領域を色付きで表示できることを説明しましたが、その逆も可能です。Webページ上のある領域にマウスポインタを乗せることで、該当するHTMLコードの場所を示すことが可能です。

デベロッパーツールの左上()を左クリックして青くなったら、Webサイト上のある領域にマウスポインタを乗せてください(左側の)。そうすると、デベロッパーツールのHTMLコードの該当部分がハイライトされます(右側の)。

デザインの手本としたいWebサイトがあったら、ぜひChromeのデベロッパーツールを起動して分析してみましょう。

これらの他にも、デベロッパーツールにはWeb開発において便利な機能がたくさんあります。本教材では必要に応じてデベロッパーツールの機能や使い方を解説していきます。

0.3 HTMLとCSS

HTMLとは

みなさんが普段パソコンやモバイル端末で見ているWebページの多くは、HTMLで作られています。

HTMLとは「Hyper Text Markup Language」の略で、Webページを作成するためのマークアップ言語です。わかりやすく言うと、文字・表・画像・リンクなどの要素に役割を明記して、Webページ内に配置するためのプログラミング言語です。

マークアップとは、目印をつけるという意味です。HTMLのコードのなかで、「タグ」という目印を用いてWebページを作っていきます。「タグ」を例えるなら、お弁当を作るさいにお弁当箱の中に置く仕切りのように、レイアウトや配置決めを担っているものです。

CSSとは

CSSとは「Cascading Style Sheets」の略で、主にHTMLで配置した文字、表、画像などのコンテンツを装飾する役割を担うプログラミング言語です。CSSを用いることで、HTMLのみで作られたWebページを機能とデザインの両面において、より美しくすることができます。

またお弁当に例えるなら、「お弁当箱の仕切られた各スペースに置かれた食物(=コンテンツ)を、より美味しそうに盛り付けるプログラミング言語」です。

下の画像は、HTML, CSS, ブラウザ, ユーザーの関係性を表した図です。

ポンチ絵1

もし学習に行き詰まってしまったら...無料体験レッスンに
参加してみませんか?

SAMURAI ENGINEERは、
月額7000円からマンツーマン
レッスンができます。

現役エンジニアがあなたのプログラミング学習を徹底サポート。
未経験でも挫折せず、最短で目標達成するために必要な
手厚いサポート体制が揃っています。
少しでも興味をお持ちでしたら、
無料体験レッスンへお越しください。