WEBサイトの作り方について今後レクチャーしていきますが、作り方を学ぶ前に知っておいてほしいことがいくつかあります。
目次
HTMLとCSSを覚えるのには3日〜1週間あれば十分
WEBサイト制作は学べば学ぶほど大量の知識を覚えていかなければなりません。そのため完全に使いこなすベテランの領域に至るまでは学習時間というよりどれだけのサイトを作ったかで決まります。しかしWEBの事なんて全くわからなくてもWEBページは作れてしまうものです。
なぜなら今はネット上にコピペで作れるようなソースが沢山転がっているからです。もしかするとコーディングをする時間より調べる時間の方がかかるかもしれません。
とは言え自分で色々と書けるようになることはより良いサイトを作るために重要です。年月をかけて少しずつスキルアップしていきましょう。
ガチれば3日で最低スキルは習得できる
僕が始めてWEBページを作ったのはとある企業サイトの特集１ページでした。いわゆるLP（ランディングページ）と呼ばれるものですね。普段はデザインをしていたので１ページくらい余裕で作れるだろうとHTMLを触ったことがないにも関わらず仕事を受けてしまいました。非常にナメてましたね。
結果的に間に合ったものの３日徹夜です。デザイン＋コーディングなので時間に余裕がありませんでした。企業サイトなのでコーディングルールも決められており、意味の理解できない仕様書を眺めつつネットで調べながら完成させます。
今その当時のHTMLを見たらとても恥ずかしい出来だと思いますが、デザイン的には問題ないものでしたしユーザーから見れば中身なんてわからないものです。
何が言いたいかと言うと「寝ずにやれば３日で覚えられる」レベルということです。１週間もあれば初歩的なことはマスターできます。その初歩的な知識だけでもWEBサイトは作ることができます。
HTMLの触りの部分は本当に簡単
いきなりECサイトを作るのは技術的に難しいですが、本当に基礎の基礎はシンプルで簡単です。文章をHTMLタグで囲んでCSSを反映させるだけです。それさえ理解できれば後は出来ることをレベルアップしていくだけです。
勉強してみたけど難しくて理解できない人
おそらく学び方が間違っています。例えばWEB制作の参考書がありますが、基本的なことから学んで徐々に色々なタグを使って覚えていくと思います。１STEPずつ学んでいける親切な作りだとは思うのですが「自分が必要としないようなコーディングを学んでも頭に入らない」と思います。
考え方としては
×勉強してからサイトを作る
○サイトを作りながら調べる
です。
WEBサイトを作る上で厳格なルールなど仕様があったりしますが、始めに覚える必要は一切ないです。HTMLファイルの中身がぐちゃぐちゃでもブラウザで開いてキレイに見えていたらOKです。
参考書やリファレンス的なサイト・動画を見ても知る必要のない情報ばかり教えられたり、意味のわからない単語ばかり出てきます。そのような事で手が止まるくらいなら不格好なHTMLファイルを沢山作って修練を積んだほうが成長できます。
勉強してもWEBサイトを作れるようになれなかった人は恐らく、情報が多すぎて基本的なコーディングを理解できなかったのだと思います。このサイトではその基本的なコーディング部分を砕けてレクチャーしているつもりです。
Dreamweaverなどのエディタを使うのはやめなさい
複数のエンジニアが共同で作る場合にDreamweaverが便利だったりしますが、始めからそういった支援系のエディタアプリを使うのは止めましょう。まずそのアプリの学習コストがかかってしまいます。Dreamweaverの教本を読んだことがありますが、WEBページを実際に作り始めるまで何時間か学習する必要がありますよね？無駄な時間です。しかも不必要な情報を頭にいれることになるのでHTMLの基本的なことが理解できなくなる可能性があります。
テキストエディタ、いわゆるメモ帳アプリでWEBサイトを作ってください。5分でHTML作成を始められるようにしましょう。
まずは作りたいサイトをイメージしておこう！
WEBサイトと言っても色々なジャンルがあります。企業サイトと個人ブログではまるっきりデザイン性が違いますし、ECサイトだと普通は作る必要のない機能を作る必要があります。
作るサイトの方向性で学ぶ必要のあるスキルが変わってくるので、まずはどんなサイトを作るのか決めましょう。そしてそのジャンルのサイトをいっぱい見てブックマークしておきましょう。
始めに作るサイトとしては個人ブログがオススメです。WEBサイトの基本的な作り方が万遍なく学べますし、簡単な記述で作ることができます。
ルールにとらわれない
HTMLタグやCSSの記述にはいくつかの厳守するべきとされる構文ルールが存在します。HTMLチェッカーなどもあり、正しく書けているのか点数を付けられたりもします。
そんなのはどうでも良いので無視してください。
ブラウザで正しく表示されていれば正解です。使い方が間違っているとか関係ありません。例えば昔はリンクタグはブロック要素というものを囲むことが出来ませんでした。でもそれってブログによくある画像とテキストがカードのようにデザインされている要素をリンクさせることができないってことなんですよね。別にリンクが機能するから良くない？と思いますよね。良いんです。
※HTML5になってからブロック要素と呼ばれていたタグを<a>で囲めるようになってます。
とにかく構文とかルールを無視してHTMLファイルを完成させてください。完成したら次のページを。それも完成したら次のページを。どんどん作っていいくうちにより良いコーディングが出来るようになっていきます。
【余談】
W3Cが作った構文チェッカーが存在しますがW3C自体が10年くらい前から時代遅れすぎて正しくないです。2021年にはHTML開発を先導しているWHATWG（Apple、Mozilla、Operaの従業員）から標準規格を名乗るのをやめろと言われてやめています。
WEBサイトを作るために
絶対覚えなければならない基礎
このサイトではある程度のステップを経て実際のコーディングに取りかかれるようにするつもりですが、まず始めにWEBサイトを作るための最も基礎となる書き方を先に教えます。これを出来るようになればネットで検索しながら色々と出来るようになるはずです。
WEBサイトはHTMLファイルとCSSファイルで出来ている
| HTMLファイル | ブラウザに表示されるページそのもの |
| CSSファイル | 文字サイズや色などを変更できるファイル |
HTMLに文章を書きます。そしてHTMLファイルからCSSファイルを読み込んで文字サイズや色を変更させます。
これがWEBサイト制作で最低限必要なことです。これだけでWEBサイトが作れますし、この２つを作れないと何も作れません。
HTMLファイルの作り方
文字コードのUTF-8を利用できるテキストエディタアプリを準備します。MACならCotEditor、Windowsなら最新版OSであればメモ帳でも大丈夫です。
テキストエディタアプリを開いたらUTF-8の設定にして下記の記述をコピペします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<link rel="stylesheet" href="./style.css" type="text/css" media="all" />
</head>
<body>
<!-- ▼ここからHTMLタグを記述▼ -->
<!-- ▲HTMLタグはここまで▲ -->
</body>
</html>
コピペしたら適当なフォルダに「index.html」というファイル名で保存してください。
これはHTMLファイルの骨組みです。「▼ここからHTMLタグを記述▼」とコメントを書いています。この範囲の中にHTMLタグを書いていけばブラウザで表示されます。
試しに適当に範囲内へ<p>○○○（好きな文章）</p>を追記して保存してみましょう。
CSSファイルの作り方
HTMLファイルと同様のテキストエディタアプリで新規ファイルを作り下記の記述をコピペしてください。
@charset "utf-8";
/* リセットCSS */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;}
ul,ol{list-style:none}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins{color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
img{vertical-align:middle;}
*:focus{outline:none;}
/*====================
▼ここからCSSを記述▼
====================*/
/* ▼サンプル記述▼ */
/*========================================
カスタムプロパティ
=======================================*/
:root {
--main-color:#de146e;
--main-font-color:#000;
}
/*========================================
基礎CSS
=======================================*/
*{box-sizing:border-box;}
html{color:var(--main-font-color);font-size:62.5%;font-family:"Lucida Grande","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","游ゴシック","Yu Gothic",sans-serif;background:#fff;scroll-behavior:smooth;}
p{font-size:1.6rem;}
コピペしたら「index.html」と同じフォルダに「style.css」というファイル名で保存してください。
このCSSの記述はリセットCSSと呼ばれるもので、ブラウザのデフォルトCSSをリセットしてあります。フォントサイズも10px相当のサイズで最適化してあります。font-sizeを1.6remで指定していますがこれはhtmlのフォントサイズを継承させているので「10px × 1.6倍」という意味になります。なぜこんな事をしているかはいずれわかります。
後で色々わかってきたら自分の好きなようにカスタマイズしましょう。
ブラウザで実行してみる
作成した「index.html」をブラウザで開いてみてください。ブラウザにindex.htmlファイルを投げ込むだけでOKです。<p>○○○（好きな文章）</p>が表示されていれば成功です。
今後はこのファイルへ色々とタグを書いてWEBページを完成させましょう。
書き方にとらわれず数をこなそう
始めから上手く作ることは非常に難しいです。とにかく上記に紹介したHTMLの骨組みやネット上で拾える情報を継ぎ接ぎでもいいので完成させて沢山のページを作りましょう。意味が解らないでも大丈夫です。一つ一つはそう難しくありませんが、簡単な事を沢山覚えなきゃいけないので頭がパンクします。
まずはHTMLファイルを作ってCSSを反映させてブラウザで確認する…その流れを何も見ずに出来るように体でしっかり覚えましょう。HTMLタグなどのコーディングは指で覚えます！！
人によっては向き不向きがあります
ソシャゲやECサイトなどのプログラムをゴリゴリ書いている人が言っていました。「HTMLとCSSが難しくて出来ない」と。いやいやプログラミングの方が意味わからないよねと思いましたが、恐らくこれまでの経歴とか思考の仕方とかで向き不向きがあるんだと思います。
僕は元々はデザイン系の人間です。サイトの設計とかも割と好きなタイプです。プライベートでは家具作ったりと工作が大好きです。たぶん理想の形を体現するのが好きなんでしょうね。
プログラマーの方は会話？パズル？プログラマーではないので何とも言えないですが「作るのが好き！」というタイプでは無い気がします。運転が好きとか操縦系とかかもしれないです。
ともかくHTMLとCSSでフロント側のコーディングをするのが苦手なタイプもいるということを知っておいてください。そんな方はプログラムを学んでみると才能が開花するかもしれません。WordPressのおかげでHTMLコーダーも割とプログラマー寄りになることが多くなってきましたが、やっぱり餅は餅屋でそれぞれどちらかが大得意です。たまに何でも出来る化け物がいますが…。
