web制作の開発環境構築から表示まで

必要なもの

Web制作をするにあたって必要なものを最低限2つ必要です。

• ブラウザ
• エディタ

ブラウザは普段検索に使っているChromeやSafariなどのアプリケーションのことを言います。WindowsならEdge、MacならSafariが最初からインストールされているので、追加でインストールする必要はありません。しかし開発のしやすさではChromeがとてもおすすめです。

エディタは文章などを編集するためのアプリケーションで、代表的なのがWindowsのメモ帳です。メモ帳もエディタの1つですが、プログラムを書くにはとても不便です。そこでプログラミングをしやすくしてくれる機能が搭載された高機能エディタを使うのがとても便利です。

特におすすめのエディタはVisual Studio Codeです。コードの補完が効いたり、拡張機能が充実しており、自分好みにカスタマイズ出来るのが良い点です。

開発環境構築については別の記事でまとめていますのでご覧ください。

使うプログラミング言語

Web制作では主に3つのプログラミング言語を使います。

それぞれの言語について簡単に紹介します。

HTML

HTMLは「Hyper Text Markup Language（ハイパーテキストマークアップ言語）」の略称で、テキストや画像、レイアウトなどの構造を定義するための言語です。

「タグ」と言われるもの使って構造を定義していきます。タグは様々な種類があり、段落を表示したり、見出しを表示したり、画像を表示したりなど、それぞれのタグごとに役割があります。

<p>TEST</p>

基本的な書き方は開始タグと終了タグを書いて、その間に文字書くことで文章や見出しを表示します。

上記はpタグといい、paragraph(段落)の頭文字を取ったタグです。名前の通り段落を表示するためのタグです。

さらにタグの中にタグを書いて入れ子構造にすることでレイアウトを作っていきます。

CSS

CSSは「Cascading Style Sheets（カスケーディングスタイルシート）」の略称で、HTMLで定義したテキストや画像などの要素を装飾するための言語です。

p {
  color: red;
}

上記はpタグの文字色を赤にするというプログラムです。

CSSは「selector（セレクタ－）」「property（プロパティ）」「value（バリュー）」の3つで構成して書かれています。

どれの・何を・何にするのかというように書いていきます。

selector（セレクタ－）

セレクターは上記のpと書いている部分のことを言い、どれのにあたる部分です。

セレクターの指定方法は主に「タグ名」「class名」「id名」の3種類の指定方法があります。c

class名やid名をつけることで、特定のタグだけを装飾することできます。

property（プロパティ）

プロパティは上記のcolorと書いている部分のことを言い、何をにあたる部分です。

どの装飾をするのかを指定します。例えば背景色や横幅、縦幅、文字の大きさなどなど様々なプロパティがあります。

value（バリュー）

バリューは上記のredと書いている部分のことを言い、何ににあたる部分です。

バリューはプロパティに対してどのように装飾するのかの具体的な値を指定しするところです。colorに対してblueと指定すれば文字色が青色に変わります。

バリューを上手に設定することで様々なデザインを表示することが出来ます。

JavaScript

JavaScriptはHTMLやCSSを操作したり、計算結果を画面に反映させたり、クリックやスクロールといったイベントと言われる何かアクションしたときに何らかの処理をしたりするための言語です。

高クオリティのアニメーションやYoutubeやAmazon、TwitterなどのWebアプリもJavaScriptを使って様々な機能を実装しています。

下準備

好きな場所に適当な名前でフォルダを作成します。

Visual Studio Code(以下VScode)を起動し、VScodeに先程作ったフォルダをドラッグ&ドロップします。

プログラムを書くためには専用のファイルを作る必要があります。

プログラミング言語によってファイルの拡張子が様々あり、その言語にあった拡張子のファイルを作成します。

先程紹介したHTML・CSS・JavaScriptはそれぞれ.html・.css・.jsという拡張子です。

左のサイドバーの一番上のアイコンをクリックし、エクスプローラーを表示させます。

エクスプローラー上で右クリックして「新しいファイル」をクリックしてファイルを作成していきます。

.html・.css・.js の3種類のファイルを適当な名前で作成します。

これで下準備は完了です。

コーディングして表示しよう

実際にコーディングして表示を確認してみましょう。

先程作った.htmlファイルをブラウザにドラッグ&ドロップします。

このような画面になれば表示成功です。

今はまだ何もコーディングをしていないので真っ白な画面が表示されます。

VScodeに戻って.htmlファイルに適当にプログラムを書いて上書き保存します。

ちなみh1タグは見出しを表すタグです。

ブラウザに戻って左上のリロードマークをクリック又はF5キーでページをリロードします。

先程書いたh1タグが表示されていれば成功です。

これであとは好きなようにプログラムを書いてWebを作れます。