Web制作に必要なもの
未経験だけどこれからWeb制作者を目指すためには何をしたらいいのかわからない、と感じている方は多いと思います。
インターネットでWeb制作について調べてみても、様々な情報が溢れていてどこから、何を始めればいいのか、まるで入り口がわからないと感じるでしょう。
Web制作には何が必要？
Web制作に必要とされるものはたくさんありますが、優先順位で挙げると次の通りです。
- HTML
- CSS
- Javascript/Jquery
- Photoshop
- Illustrator
- Dreamweaver
何のために必要？
Web制作におけるそれぞれの役割は次の通りです。
- HTML → Webページの文書構造を決めるための言語
- CSS → HTMLで書いた文書構造に見栄え（スタイル）を指定するための言語
- Javascript → Webページに動的効果などを与えるための言語
- Photoshop → 画像データを加工・編集するためのソフトウェア
- Illustrator → ロゴやイラストを作成・編集するためのソフトウェア
- Dreamweaver → Webページの制作・管理を行う為のソフトウェア
Web制作は何から始めるの？
Web制作の入り口はまず「HTML」の役割や仕組みを理解し習得する事です。
今回はWeb制作に必須とされる「HTML」について紹介します。
HTMLとは？
HTMLとは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、Webページを記述する為に使用されるマークアップ言語の事です。
「Hyper Text」は“テキストを超えた”テキストという意味を、「Markup」は印付け、「Language」は言語、です。
直訳すると「ハイパーテキストを記述するためのマークアップ言語」となります。
Hyper Text（ハイパーテキスト）とは、複数の文書（テキスト）をハイパーリンクで相互に関連付け、結び付けるための仕組みの事です。
なぜHTMLが必要なの？
HTMLの役割とは、「テキストに文書構造や意味を定義する」事です。
パソコン上に表示されている文書は、パソコン内に記録されている文字情報を単に入力した通りに表示しているだけで、パソコンはその文書の意味や内容は全く理解出来ません。理解する為の仕組みを持たない為です。
私たち人間は、文書を書いたり読んだりする為の訓練や学習を行う事で、文書を理解し、扱う事が出来ます。しかしパソコンは、計算は早いですが、人間のように意味を理解したり、自発的に何かするといった事は出来ません。パソコンに何かをさせるには、すべて人間が1から処理方法を設計しなければいけません。
そこでHTMLという言語を使って、文書の意味や構造を “設定”する必要があるわけです。
HTMLってたくさんあるけど？
HTMLには「HTML」「XHTML」「HTML5」などの種類がありますが、最新版の「HTML5」を習得しましょう。
HTMLの記述と確認
どうやって記述するの？
HTMLには「見出し」や「段落」など、文書を定義するための「タグ」と呼ばれる命令が用意されています。これらを使ってテキストに印付け（マークアップ）を行います。
HTMLを正しく設定するためには、まず一般的な文書の書き方や構造を踏まえた上で、HTMLの文法に基づいて適切なマークアップを行います。
HTMLはテキストベースで記述できるので、メモ帳など、テキストエディタソフトであればどのような環境でもWebページは作成できます。
具体的にどう書くの？
開始タグと終了タグを使って意味や構造を定義したい文書の範囲を指定します。
HTMLの基本構造は次の通りです。
<html>～</html>の中に、
<head>～</head>と<body>～</body>を記述します。
HTMLの文書構造は人間の体を模しています。
<head>内には、ブラウザがWebページを表示する為の必要な設定を記述します。
<body>内には、ブラウザ上に表示したいコンテンツを記述します。
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> ※ブラウザがWebページを表示する為の必要な設定を記述する </head> <body> ※ブラウザ上に表示したいコンテンツを記述する </body> </html> |
どうやって結果を見るの？
作成したテキストファイルを保存する際に「.html」という拡張子をつけて保存します。（例 index.html）
保存したHTMLファイルをWebブラウザで読み込めば結果を確認する事が出来ます。
ブラウザってなに？
Webページを表示する為に必要なソフトウェアの事です。HTMLを解釈して結果を表示してくれる言わば翻訳ソフトのようなものです。HTML以外にも画像や動画を表示する仕組みなどWebページを取り扱う為に必要な仕組みが用意されています。
代表的なWebブラウザは次の通りです。
- Google Chrome
- Mozilla Firefox
- Safari
- Microsoft Edge
見た目がダサいけど？
HTMLは必要最小限のデフォルトスタイルによる見た目の設定でしか表示されません。
HTMLは“文書構造のみ”を定義する為の言語で、見た目（スタイル）についてはCSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を使って設定していきます。
見た目より中身が大事
人間は視覚で物事の多くを評価しますが、パソコンは情報しか評価出来ません。インターネット上で自分の書いたHTMLの価値を高めるには、適切なタグで適切なマークアップを行う事です。つまり機械にわかる言葉を使って、機械に判断できる情報を定義していく、ということです。
HTMLを覚えたらCSS
WebデザインにはHTMLとCSSがセットで必要となります。HTMLで文書構造の定義を、CSSで見た目（スタイル）の定義を行います。
HTMLについての概要は大体以上となります。
まずはHTMLの文法をしっかりと身に着け、適切な文書構造の定義が出来る様になりましょう。
HTMLによる文書構造の定義が理解出来たら次は見た目の設定、CSSの習得に続きます。
