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

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

そんなことないです。

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

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

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

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

Webページは全部文字で作る
- Webページの取扱説明書
  
  文字で「こんなふうに表示して！」「この時はこれを表示して欲しい！」など、して欲しいことをブラウザにわかりやすく説明するファイルを作成します。
  
  作成するファイルは「HTML」「CSS」「JavaScript」の3つを組み合わせて作成します。
- ブラウザ
  
  取扱説明書(HTML,CSS,JavaScript)をもとに、解析をして画面に表示をしてくれます。
  
  ブラウザも常に進化しているので、複雑なこともしっかりやってくれます。

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

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

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

Webが見れる仕組み

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

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

HELLO

Response ( レスポンス )

Request ( リクエスト )

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

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

Request ( リクエスト )

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

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

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

HELLO

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

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

参考ページ:Web担当者Forum

ブラウザとは？

上のアイコンのようなWebページを見るためのソフトです。
もっと言ってしまえば、今あなたがこのサイトを見るために使っているソフトのことです。

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

絶対使ってはいけないブラウザ

Internet Explorer(通称:IE)

マイクロソフトの旧ブラウザのInternet Explorerは使用しないようにしましょう。
IE11(最終バージョン)のサポート期間は2025年10月14日にほぼ終了します。

使用してはいけない理由をまとめてみました。

サポートがなくなる=すべてが自己責任になる
セキュリティが弱いため情報が漏れや、ウイルス感染の危険が高い
最新のデザインについていけないためゴチャゴチャしたレイアウトになる可能性がある
マイクロソフトが公式に利用を止めるように発表している

使い続ける理由がない限り最新のブラウザに変えることをおすすめします。

参考サイト:@dream + PLUS
サポート終了期間の参考サイト:@IT atmarkit
マイクロソフト公式サイト:Microsoft IEの今後について

サーバーとは？

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

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

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つのファイルで出来ています。

3つのファイルとその役割

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ページを作る時に必要なのは「文字入力」だけなので、高性能なパソコンは必要ありません。
  
  ストレスなく文字が打ち込めるパソコンであればなんでもOKです。
- テキストエディター
  
  無料のテキストエディターをダウンロードします。
  
  テキストエディターとは「ファイルの作成」や「文字の予想変換」など、Web制作をサポートしてくれる便利なソフトのことを言います。
  - ダウンロード
    
    「Visual Studio Code」というテキストエディターをダウンロードします。
    
    Visual Studio Code(通称:VS code)はMicrosoft社が提供する無料の高性能テキストエディターです。
    
    Visual Studio Code 公式サイト
  - インストール
    
    ダウンロードが完了したら、使える状態にするためインストールします。
    
    インストールの仕方は下記のサイトがとても詳しく紹介していたのでこちらを参考にしてください。
    
    参考:エンジニアの入り口
- Google Chrome ブラウザ
  
  無料のブラウザ「Chrome」をダウンロードします。
  
  見た目もシンプルで、Web制作でサポートしてくれる機能がたくさん備わっています。
  - ダウンロード
    
    Googleが提供するブラウザ「Google Chrome」をダウンロードします。
    
    Webの制作に必要な機能がもともと備わっていて、使いやすいのが特徴です。
    
    Google Chrome 公式サイト