2017.04.17

【初心者向け：第一回】HTML・CSSの勉強をする。準備編

ただの素人が、HTML・CSSを勉強して一サイトを作るまでの軌跡。誰でも要点だけ覚えればHPは作れます。

1 １・コーディングソフト
2 ブラウザー
3 環境が準備できていることを確認する
4 step1 まずはコーディングソフトを立ち上げてみる
5 step2　文字を書いて保存してみる
6 step3 書いたものをWEB画面で確認してみる
7 まとめ

みなさんこんにちは。

今回から、初心者向けのHTML・CSSを勉強方法などをご紹介していきます。

とりあえず喋ることが好きな営業マンが、実際に自分でコードが書けるようになるまで、どんなことを勉強しているかを記載していきます。

目標は、HPを１つ自分で作れるようになることです！！

学習のための準備

まず、HPを自分で作れるようになるためには、必要な物がいくつかあります。

１・コーディングソフト

HTMLやCSSと言われるHPを構成する言語をコーディング（書く）するには、メモ帳のような単純なテキストエディタを使用して作成することもできますが、やはり専用のコーディングソフトを活用することで、簡単＋スピーディーにコーディングを進めていくことができます。コーディングソフトは様々ありますが、とりあえず始めるのであれば無料のものありますから探してみてください。

無料コーディングソフト
・Crescent Eve

有料コーディングソフト
・Dreamweaver
・Coda2

様々ありますから、とりあえず利用してみて本格的に始める方は有料版を利用してみてください。

→基本的にコードを記載する行為はどれを使っても同じですので、こちらの記事ではDreamweaverを利用して内容を紹介していきます。

ブラウザー

後々、自分の書いたコードを確認する際に非常に便利な機能がありますので、こちらは、Google Chromeを利用していきましょう。

ダウンロードURLはこちら→https://www.google.co.jp/chrome/browser/desktop/

環境が準備できていることを確認する

最低限、上記の２つが揃っていればコーディングをしていくことはできます。実際にサイトを公開するまでになると、WEBサーバーやドメインなど複数の物が必要となりますが、現状の段階ではこれだけあれば十分です。

では早速、ダウンロードしてきたコーディングソフトと、ブラウザーを使って簡単なテキストを作成してみましょう。

step1 まずはコーディングソフトを立ち上げてみる

まずはコーディングソフトを立ち上げてみてください。（紹介はDreamweaverを使用しています。）

すると、まっさらな画面が表示されるかと思います。まっさらな画面に下記と同じものを記述してください。（コピー＆ペーストで結構です。）

Dreamweaverの方は新規でHTMLのファイルを作成すると自動で下記の文章が記載されているかと思います。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>
</body>
</html>

<!doctype html>

<html>

<head>

<title>無題ドキュメント</title>

</head>

<body>

</body>

</html>

これはHTMLを記述していく上でベースとなる構造文なので、簡単に解説をしていきます。

<html>の中身は大きく head と body の2つの要素にわけることができます。

step2　文字を書いて保存してみる

ここまではコーディングソフトを開いて、最低限のものを準備したというだけです。まずは一度文章を書いてみましょう。記載する箇所は

実際にはコードはこのようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>
<p>HTMLの勉強を始めました。</p>
</body>
</html>

<!doctype html>

<html>

<head>

<title>無題ドキュメント</title>

</head>

<body>

<p>HTMLの勉強を始めました。</p>

</body>

</html>

ここまでできたら、一度保存をしてみましょう。

保存方法は、macであれば「⌘command」＋「s」で、Windowsであれば「Ctrl」＋「s」で保存ができると思います。

保存するときは名前をindex.htmlとして、デスクトップに保存をしておきましょう。このindex.htmlという名前は、HPの中で特殊な存在で基本的にTOPはこのファイル名にして保存する必要があるので、覚えておきましょう。

ここまでで、文字を書いてみて保存をするという、基礎の部分が完了しました。

step3 書いたものをWEB画面で確認してみる

実際にここまでで準備をしてきたindex.htmlファイルをブラウザにドラッグ&ドロップをして確認してみましょう。

すると画面が下記のように変わることを確認してください。

先ほど記述した文章が表示されていることがわかりますね。

まとめ

今回はHTMLの基礎的として文章を書いてみる。と、ご紹介してみました。次回はこの文章に対してCSSで装飾をしてみるところからご紹介していきます。

【初心者向け：第一回】HTML・CSSの勉強をする。準備編