【コーディング初心者】HTML独学の始め方【徹底解説】
#本記事はプロモーションを含みます。
あなた
「Webデザイナーになるためにはコーディングっていう知識が必要みたいなんだけど、どうやって勉強したらいいんだろう？とりあえず簡単にコーディングを体験してみたいな。」
そんな悩みにお答えします。画像付きで徹底解説です。
この記事で分かること
- コーディングとは
- HTML/CSSとは
- 実際のコーディングの流れ
目次
コーディング初心者のための基礎知識
初めてのコーディングを始める前に、基礎知識だけサクッとおさらいです。
いざコーディングを始めるにあたっても、知らない言葉ばかりだと混乱しますからね。
- コーディングって何？
- HTMLって何？
- CSSって何？
などなど、すでに知ってる人は復習として。本当に初めての人は、基礎知識として。
実際にコーディングを体験してみる前に、バッチリ理解しちゃいましょう。
コーディングって何？
超シンプルに言うと、コーディングとは”書くこと”。
- Webデザイナーなら、Webサイトを書くこと
- プログラマーなら、プログラムを書くこと
Webデザイナーは、決まった文法を使ってWebサイトを書きます。そうやってWebサイトを作るんですね。
今あなたが読んでいるこの記事も、”コーディング”してます。決まった文法なのですごく簡単にできるんですよ。
コーディングとは、Webサイトのコードを書くこと。
HTMLって何？
HTML（エイチティーエムエル）は、Webページを書くために使う言語です。
“言語”って書くとちょっと堅苦しいですが、要するに日本語とか英語みたいな、決まった文法のある言葉のこと。
そのWebページを書くために使う言葉が、HTML。HTMLのことを、”マークアップ言語”って呼びます。
- この部分は、見出しにしよう
- この部分は、引用にしよう
とかとか、Webページの構成を作るために”マークアップ”するから、マークアップ言語って呼ぶんですね。
Webページを書くために使う言語が、HTML（エイチティーエムエル）。簡単！
Webデザイナーは、HTMLを使ってコーディングする。そして、今まさにあなたの見ているWebブラウザが、HTMLという文法を読んでWebサイトを表示してるんです。
CSSって何？
あなた
「HTMLっていう言葉でWebサイト書くんでしょ？じゃぁCSSなんて何に使うの？」
そう思っちゃいますよね。その理解であってます！
ぶっちゃけ、デザインに何もこだわらなければ、HTMLだけでWebサイトを書けちゃうんです。
でも、やっぱり綺麗な色使いとか飾り付けされたWebサイトの方が、見てて楽しいですよね？
そんな飾り付けをするために使う言葉が、CSS（シーエスエス）なんです。
Webデザイナーは、HTMLを使ってコーディングしたWebサイトをCSSで飾り付けしている。簡単ですね！
コーディングには、HTMLとCSSを使う
ここまでを3行でまとめると、こんな感じ。
- コーディングとは、Webサイトを書くこと
- HTMLとは、Webサイトを書くための言葉や文法のこと
- CSSとは、HTMLで書いたWebサイトの飾り付け
はい、これであなたもコーディング体験をする基礎知識がバッチリです。
早速コーディングしてみましょう！
初心者のためのコーディング体験
それでは早速、コーディング体験に突入です。
今から、こんな流れでコーディングします。せっかくなので、実際にブラウザで見れるWebサイトを作っちゃいましょう。
- Webサイトを書く準備
- HTMLを書いてみる
- ブラウザで表示してみる
このステップを、一つずつ画像付きで徹底解説です。
Macの画面で説明してますが、Windowsでも内容はほとんど同じようにできます。
Webサイトを書く準備
まず最初に、Webサイトを書くために必要なエディターをダウンロードします。
これからもコーディングするときにずっと使えるように、Atomっていう超定番のエディターを使いますね。
Atomをダウンロード
こちらのAtom公式サイトから、画像の通りにDownloadボタンをクリックします。すると、ダウンロードが始まります。
ダウンロードが終わったら、ダウンロードフォルダにあるAtomアイコンをダブルクリック。すると、Atomが起動します。
もし、atom-mac.zipという圧縮ファイルになっていたら、ダブルクリックするとAtomが出てきます。
こんな画面が立ち上がったら、Atomエディターを使う準備が完了。
Atomのおすすめパッケージ3選【ブログやWebライティングに必須】
これは必須だ！っていうレベルのAtomのおすすめパッケージを知りたいあなたへ、3つ厳選しました。特に、ブログを書いている方やWebライターの方は、この3つのパッケージを活用すればライティング作業が超はかどります。この3つのパッケージで、一気に生産性アップしちゃいましょう。
Atomを日本語化する
あなた
「英語だと読めなくて分からないよ！」
そう思ったあなた、ご安心を。Atomはちゃんと日本語対応しています。
まずは、Atom のメニューから Preferences をクリック。
続いて、出てきたメニュー画面の中にある +Install をクリック。
検索窓に “japanese-menu” と入れて検索すると、画面のようなパッケージが出てくるので、Installをクリック。
これで、Atomの日本語化が完了。もし日本語にならなかったら、一度Atomを終了してから再起動してみてくださいね。
HTMLを書く
Webサイトをコーディングするためのエディターも準備できたので、HTMLを書いてみます。
HTMLファイルを作る
まずは、WebサイトをコーディングするHTMLファイルを作ります。
“my-website”というフォルダをデスクトップに作ってみましょう。
続いて、Atomの”ファイル”メニューから”プロジェクトフォルダを開く”を選んで、作ったばかりのmy-websiteフォルダを開きます。
左側に、my-websiteのフォルダが表示されるので、そこで右クリックをして”新規ファイル”を選択です。
出てきた小さいウインドウに、”index.html”と入力してエンターを押します。
すると、my-websiteというフォルダの下にindex.htmlというファイルができました。
ファイル名の最後につけた”.html”は拡張子といって、このファイルはHTMLっていう言葉で書かれてるよ！っていう意味です。
これで、HTMLでWebサイトを書く準備ができました。
HTMLを書いてみる
それでは、HTMLで簡単なWebサイトを書いてみます。
今Atomエディタで開いてる index.html の中に、この文書をコピペ＆保存してみてください。
<!DOCTYPE html> <html> <head> <title>私の初めてのWebサイト</title> </head> <body> <h1>1番大きい見出し</h1> <h2>2番目に大きい見出し</h2> <p>ここに文章を書くと、2番目の見出しの中</p> <h3>3番目に大きい見出し</h3> <p>ここに文章を書くと、3番目の見出しの中</p> </body> </html>
書いてある内容、1行ずつ説明しますね。
<!DOCTYPE html>
これは、HMTLファイルの最初に必ず書いておく、おまじないのようなもの。このファイルはHTMLで書いてます！っていう宣言をしてます。
<html> ... </html>
Webサイトは、html と /html で全体を必ず囲ってあげます。これも必ずやってあげる大事なルール。ルート要素って呼びます。
<head> ... </head>
head と /head で囲った場所には、Webサイトのタイトル情報とかを入れる場所です。
<title>私の初めてのWebサイト</title>
Webサイト名を title と /title で囲ってあげると、ブラウザのタイトルバーに表示されます。これを、head と /head の間に入れてあげます。
<body> ... </body>
この body と /body の中に、Webサイトとして表示する中身を書いていきます。
<h1>1番大きい見出し</h1> <h2>2番目に大きい見出し</h2> <p>ここに文章を書くと、2番目の見出しの中</p> <h3>3番目に大きい見出し</h3> <p>ここに文章を書くと、3番目の見出しの中</p>
ここは、見たまんまでとても簡単。h1,h2,h3で見出し、pで文章を書きます。それを、body と /body の中に入れてあげます。
ここを書き直すことで、あなたのWebサイトを更新していくことができます。
HTMLはとにかく”囲む”
- Webサイト全体は、html と /html で囲む
- Webサイト表示部分は、body と /body で囲む
- 見出しは、h1 と /h1 で囲む
みたいな感じで、HTMLはとにかく要素を”囲みます”。これだけはとにかく覚えてくださいね。
囲ってあげないと、文章が崩れたりうまく表示ができなくなっちゃいます。
HTMLの文法のルールは、とにかく”囲む”、です。
ブラウザで表示
それでは、あなたが初めて作ったWebサイトをブラウザで表示してみましょう。
左側にあるindex.htmlを右クリックして、Copy Full Pathをクリック。
続いて、あなたの使っているブラウザのURLを入力する場所にペーストします。
そしてエンターを押してみましょう。すると、こんなWebサイトが表示されましたか？
ちゃんと表示されていれば、出来上がり！これがまさに、Webデザイナーのコーディングの基礎の基礎。
今はあなたのパソコンの中にあるファイルを表示しましたけど、これをサーバーに置いてあげればみんなが見れるWebサイトになるわけですね。
あとはHTMLの文法をたくさん調べて使っていけば、すごいWebサイトが作れるようになりますよ！英語を覚えるよりも超簡単です。
脱コーディング初心者のための次のステップ
あなた
「初めて作ったWebサイトだけど、それにしてもダサくない？」
ダサいですよね笑
せっかく作ったんだから、もっと綺麗にカッコよくしたいです。そんな時、どうやって飾り付けすればいいのか覚えていますか？
そう、ここで使うのがCSS！HTMLでWebサイトを書いて、さらにCSSを使うことで、あなたのWebサイトをもっと綺麗に飾り付けしていくことができます。
とはいえ、ここでCSSの解説を始めたらもう終わりが見えないので、そのまま続きを勉強できる本をご紹介。
WebクリエイターボックスのManaさんが書かれた本です。私も買ったのですが、これがもう超分かりやすい。
Webデザインの基礎がほぼ網羅されてると言っても過言ではないです。
この本もAtomエディタを使って解説されているので、スムーズに勉強の続きができちゃいますよ！
コーディング初心者でもWebデザイナーになれる
この記事では、コーディング初心者の方に向けて、基礎知識と実際のコーディングの流れを解説しました。
ここでやったのは本当に初歩の初歩。でも、HTMLの書き方はもう完璧に分かってます。
あとは、CSSも含めて知識を増やしていくのみ。
- ここの見出しは、こんな配色にしたいな
- この見出しの下に、画像を挿入してみたいな
とかとか、ぜひあなたの想像した理想のWebサイトを作成のために、これからもコーディングを勉強してみてくださいね。
先ほど紹介した本でもいいし、無料のオンライン講座もとても便利です。
HTMLとCSSのコーディングを勉強すればするほど、あなたのWebサイトはもっと綺麗にカッコよくなりますよ。
Webデザイナーになって、優雅にスタバで仕事してみませんか？
【初心者向け】Webデザインの独学って何からやる？【徹底解説】
Webデザインの独学って何から始めればいいの？と迷っているあなたへ、最短コースをご紹介。何も考えずに独学する場合と比べて、この記事の方法ならWebデザインスキルの身に付く速さは圧倒的に違います。スマートにWebデザインスキルを独学しますか？それとも、遠回りしますか？
【注意】ウソ？Webデザイナーなのにコーディングできないの？
Webデザイナーって、HTML/CSSのコーディングできた方がいいのかな？そんな疑問にお答えします。Webデザイナーとしての将来的なキャリアの視点、そしてWebデザインを依頼する側の視点から、HTML/CSSのコーディングの必要性を解説します。