Webデザインの教科書
Web制作 準備編
Scroll
  1. ホーム

Webデザイン初心者向けWebサイトの作り方と準備

WEBページの作るのって大変そう...
っと思われてる方！！

そんなことないです。

パソコンさえあれば、すぐ始められます。

ハイスペックのパソコンなんていりません!!普通のパソコンで十分です。

今回はWebページの作成に必要なものとWebとはどんなものなのか解説しています。

WEBページってどうやってつくるの？

Webページは全部文字で作る

Webベージはすべて文字で構成されていて、言語ごとの文法に沿って記述することでWebサイトの作ることができます。

Webページを作るには3つの言語「HTML」「CSS」「JavaScript」で構成されています。

Webページの取扱説明書

文字で「こんなふうに表示して！」「この時はこれを表示して欲しい！」など、して欲しいことをブラウザにわかりやすく説明するファイルを作成します。

作成するファイルは「HTML」「CSS」「JavaScript」の3つを組み合わせて作成します。

ブラウザ

取扱説明書(HTML,CSS,JavaScript)をもとに、解析をして画面に表示をしてくれます。

ブラウザも常に進化しているので、複雑なこともしっかりやってくれます。

つまりwebページを作る=文字を書くということですね。

と言ってもただ文章を書くのではなく、文法にそって書いていきます。

それはまたあとでお話しますね！！

Webが見れる仕組み

Webがブラウザに表示されるまで、さらに詳しく見てみましょう。

Webが見れる仕組みを、かるーーーく理解しとくと今後進みやすいと思います。

Webサイトが見れる仕組み
HELLO
Response ( レスポンス )
Request ( リクエスト )

Webページがブラウザに表示されるまでに大きく分けて4ステップの処理が行われます。

「リクエスト」「サーバー処理」「レスポンス」「表示」の4ステップを、すべての情報が揃うまで繰り返されます。

  1. Request ( リクエスト )

    ブラウザからURLの直接入力または検索結果をクリックをするとサーバーに「このWebページ下さい。」とリクエスト(要求)のメッセージを飛ばします。

  2. サーバー処理

    リクエスト(要求)のメッセージを受け取ったサーバーは「これとあれと....」といった感じに必要な情報を準備をします。

  3. Response ( レスポンス )

    サーバーからブラウザへ必要な情報を準備ができたモノからどんどん返していきます。

  4. Webページを表示
    HELLO

    返ってきた情報をもとにレンダリングと呼ばれる処置(取扱説明書からレイアウトやデザインを組み立てるような処理)を行って画面に表示します。

実際はもっと細かいことが行われています。

参考ページ:Web担当者Forum

ブラウザとは？

上のアイコンのようなWebページを見るためのソフトです。

もっと言ってしまえば、今あなたがこのサイトを見るために使っているソフトのことです。

これらのブラウザが自動的に処理を行ってWebページを表示してくれています。

サーバーとは？

サーバーとはたくさんのデータが保管されてるところです。

そして、リクエストがあれば必要な情報を提供してくれる大きいパソコンのような機能を持っています。

2種類のサーバーとその役割

サーバーは主に「DNSサーバー」「Webサーバー」の2種類があり、それらが連携して最終的にブラウザへデータが送られてきます。

DNSサーバー

DNSサーバーはURLをたくさん保管しているサーバーです。

「web-design-textbook.com」と検索した時、そのページがどこのWebサーバーに保管されてるか教えてくれます。

つまり、DNSサーバーは「住所を教えてくれるおまわりさん」のように、場所を教えてくれるサーバーです。

Webサーバー

Webページに必要なデータを保管・提供してくれるサーバーです。

DNSサーバーからWebサーバーにたどり着いた後、Webサーバーはデータを提供してブラウザで表示が出来るようにします。

参考サイト:INTERNET ACADEMY

どうですか？ちょっと難しかったですよね...

これらを知っておかないとWebページが作れないというわけではありません。

知っておけば役に立つかもという感じなので、軽く覚えおく程度で大丈夫です。

Webサイトの構造

さあ、ここからは実際に作る時に必要なことなので覚えてくださいね。

Webサイトはどのようなファイルがあって、どんな役割があるのか簡単に説明していきますね。

ほとんどのWebサイトは「HTML」「CSS」「JavaScript」の3つのファイルで出来ています。

Webサイトは3つの言語で構成される

Webサイトを作るには、最低でも3つの言語を使って制作をします。

記事の部分の「HTML」やデザインのための「CSS」、そして動作制御のための「JavaScript」を使って1つのWebサイトが完成します。

HTML

ブログなどの記事を実際に書いていくためのファイルです。

どんな書きかた？
<p>文章</p>

タグと呼ばれるもので文章の最初と最後を囲っていく、マークアップ言語で書いていきます。

ファイル名はどんな？
.html

の部分は自由に決めて大丈夫です。

「.html」の拡張子の部分は、HTMLのファイルであることを示しています。

CSS

記事の文字の色や大きさを変えて見やすくしたり、オシャレにデザインするためのファイルです。

どんな書きかた？
p{color: red;}

まず最初にデザイン対象を書いて、{}の中にデザイン(スタイル)を書いていきます。

ファイル名はどんな？
.css

の部分は自由に決めて大丈夫です。

「.css」の拡張子の部分は、CSSのファイルであることを示しています。

HTMLファイルの中にCSSファイルを読み込ませるようにして連携させます。

JavaScript

クリックやスクロールなど、利用者が何かアクションをした時の動作を決めるためのファイルです。

さらに、時間や位置情報、スマホの傾き具合まで取得することが出来るとても便利な言語です。

どんな書きかた？
let name = "sheep";

それぞれの機能ごとに書き方があるので、使いたい機能をその都度新しく覚えていく感じになります。

と言っても、すべてを覚える必要は全くないので、必要なものだけで大丈夫だと思います。

ファイル名はどんな？
.js

の部分は自由に決めて大丈夫です。

「.js」の拡張子の部分は、JavaScriptのファイルであることを示しています。

HTMLファイルの中にJavaScriptファイルを読み込ませるようにして連携させます。

すごーくざっくりと説明しましたが、どうですか？

わかったようなわからないような...って感じでしょうか。

これから学んでいくうちに自然とわかって来るので、焦らず頑張っていきましょう。

Webサイトを作る準備

それでは最後にWebサイトを作る準備をしますよ。

必要な物は「普通のパソコン」のみです。

そこに無料のテキストエディターとブラウザをダウンロードして準備完了です。

準備するもの

Web制作をするための環境は、パソコンが1つあればどこでも制作が可能です。

そして、パソコンの中に「ブラウザ」と「テキストエディタ」をそれぞれインストールする事で全て整います。

パソコン

Webページを作る時に必要なのは「文字入力」だけなので、高性能なパソコンは必要ありません。

ストレスなく文字が打ち込めるパソコンであればなんでもOKです。

ブラウザ

無料のブラウザ「Chrome」をダウンロードします。

見た目もシンプルで、Web制作でサポートしてくれる機能がたくさん備わっています。

  • ダウンロード

    Googleが提供するブラウザ「Google Chrome」をダウンロードします。

    Webの制作に必要な機能がもともと備わっていて、使いやすいのが特徴です。

    Google Chrome 公式サイト

テキストエディタ

無料のテキストエディタをダウンロードします。

テキストエディタとは「ファイルの作成」や「文字の予想変換」など、Web制作をサポートしてくれる便利なソフトのことを言います。

  • ダウンロード

    「Visual Studio Code」というテキストエディタをダウンロードします。

    Visual Studio Code(通称:VS code)はMicrosoft社が提供する無料の高性能テキストエディタです。

    Visual Studio Code 公式サイト

  • インストール

    ダウンロードが完了したら、使える状態にするためインストールします。

    インストールの仕方は下記のサイトがとても詳しく紹介していたのでこちらを参考にしてください。

    参考ページ:エンジニアの入り口

うまくダウンロード出来ましたか？

VSCodeは最初は英語表記ですが、設定を変えれば日本語表記に変えることも可能です。

これからはテキストエディタでWebページを作成して、ブラウザで確認するという流れで制作します。

HTML