HTML/CSS

【HTML】初心者が独学で勉強を始めてみた時の話【意外と出来る】

投稿日:2019年4月21日 更新日:

アメリカ書籍ボックス

 

あなた

HTMLってたまに目にするけど何?HTMLって初心者でも勉強できるの?

 

こんな風に思ったことありませんか?

突然ですが「まず行動」がモットーの僕が挑戦した時の話をします(笑)

結論から言うと完全初心者の僕でも意外と独学でもできました。

今では結構楽しくなっちゃってついにはエンジニアになりましたww

HTMLを独学で学んでみたい方はぜひ挑戦してみるべきだと思います。

 

今回はHTMLとはそもそも何か初心者の方も理解できるように説明していきます。

またHTMLの独学での勉強の始め方についても簡単に説明します。

 

こんな方におすすめ

  • HTMLとは何か知りたい方
  • HTMLの勉強の始め方を知りたい方

HTMLとは【初心者も理解できる!】

 

「HTML」とは簡単に言うとWebページを作っている文字です。このページもHTMLによって作られています。

人間の体に例えると骨の部分ですね。骨がないと人間の体は成り立ちません。「HTML」はWebページの土台部分というわけです。

 

てんし君

ちなみにHyper Text Markup Language (ハイパー・テキスト・マークアップ・ランゲージ)の略で「HTML」だよ!

初心者だけど「HTML」の正式名称知ってるぜ的なノリでどや顔してみよう☆

 

HTMLを使えるようになるとWebページの土台を1から作れるようになります。

また他のサイトを見ていても「こういう風に作られているんだな」と本質的に見抜くことが出来ます。

僕はHTMLについて理解するようになってからWebページの外見だけでなく構造が気になるようになりました。

 

ちなみに最初に言っておきますがHTMLは初心者でも十分に理解できる言語でもあります。僕はこの記事を書いている数か月前はパソコン自体まともに触らない人間でしたが、HTMLについてはある程度理解できるようになっています。

ここからは「最初の一歩」と題して具体的なHTMLの独学の勉強の始め方を紹介していきます。

レッツトライ☆

今回の流れ

 

①パソコンを準備しよう

②教材を準備しよう

③テキストエディターをダウンロード・インストールしよう

④Visual Studio CodeでHTMLを編集する

⑤Webブラウザで表示する

おわりに

 

読者さんへの前置きメッセージ

 

この記事ではHTMLの完全初心者に向けて、独学での勉強の始め方を紹介しています。

この記事を読むことでHTMLの勉強の第一歩を踏み出すことが出来ます。

今回は、あくまで独学の第一歩を踏み出す準備と基本的な扱い方だけ紹介しています。

今すぐ本格的に学んで仕事にしたいという方はお金を払ってスクールなどに行くほうが確実に早いのでそちらを第一におすすめします。

この記事を読み終えたとき「自分でもHTMLをちょっと扱えそうだな」と思っていただければ幸いです。

それではさっそく見ていきましょう!

 

①パソコンを準備しよう

 

インターネットに接続できるパソコンがあればOKです。特に機能やスペックは気にしなくて大丈夫です。

 

②教材を準備しよう

 

独学を始める際は先生の代わりとなる教材となる本を用意しておいたほうがいいと思います。

別にネットでいちいち調べてもいいんですけど。。

書き込んだりもできないし見ずらかったりすることもあるのでなるべく自分に合った教材となる本を購入することをおすすめします。

てんし君

やるぞ~ってなるし、自分のミスを書き込んだりできる!

あと単純に見やすい(笑)

 

教材は個人に合ったものを選べばいいと思いますが

・索引がついているもの

・情報が沢山載っているもの

・写真や絵で説明されており、見やすいもの

・読んでいて楽しいもの

 

以上の点は必ず押さえておくべきだと思います!

あまりに難しすぎるもので、自分に合わないものだとモチベーションも下がりまくりだと思いますので、「これならよんでみたいな~」と思えるものにしておくべきです(笑)

 

ちなみに僕は、グラフィックデザイナーMana(まな)さんの

 

一冊ですべて身につくHTML&CSSとWebデザイン 入門講座 SBcreative

 

という本を見ながらHTMLを独学しています。

HTMLのコードがしっかり載っています。本屋に行ってHTMLの本を探しているときに見つけて速攻で買いました。

 

てんし君

めちゃめちゃ見やすいっ

また、HTMLのことだけでなくWebページ全体のことを包括的に学ぶことが出来ます。

 

 

③テキストエディターをダウンロード・インストールしよう

 

HTMLを扱うにはまずテキストエディターをダウンロード、インストールします。

テキストエディターとはHTMLという文字を編集する場所です。

 

色々なテキストエディターがありますが、今回はMicrosoft社の Visual Studio Code と呼ばれているテキストエディターを使用していきます。

MacにもWindowsにも対応しています。

無料で性能がよく初心者でもわかりやすい作りになっています。

 

てんし君

それではダウンロードとインストールの手順を説明していきます!

まずMicrosoftの公式ダウンロードページでダウンロードを行います。

Visual Studio Codeーコードエディター|Microsoft Azure

 

スクリーンショット

 

ダウンロードが完了するとこのような画面になります。

 

スクリーンショット

 

次にインストールに進みます。

基本的にそのままでいいので同意して次に進みます。完了するとこのような画面になります。

 

スクリーンショット

 

インストールしたVisual Studio Codeは最初の設定ですと全て英語になってます。ここはビックリするかもしれませんが正常なので安心してください!

表記を日本語に変えることもできるのでさっそく変更していきましょう。

画面左の一番下のアイコンで「EXTENTIONS」が開きます。

Searchの欄に「Japanese」と打ち込みましょう。

Japanese Language Packが出てきたらインストールします。

 

スクリーンショット

 

インストールが完了したら「Ctrl」「Shift」「P」を同時に押します。

少し待つとコマンドパレットが出てくるのでlanguageと打ち込みます。

「ja」を選択すれば完了です。

 

スクリーンショット

 

もう一度Visual Studio Codeを開きなおすと日本語表記になっているはずです。

 

スクリーンショット
てんし君

きたーー!!

 

余談ですが僕は最初GitHubが開発したAtomというエディターでHTMLの編集を始めました。

テキストエディターでAtomは代表的です。

てんし君

Atomの優れている点は

・シンプルで使いやすい

・WindowsでもMacでも利用できる

・無料

・パッケージと呼ばれる拡張機能を用いて機能が追加できる

などが挙げられています。

 

しかしなぜ現在Visual Studio Codeを使っているかというとAtomの動作が重く感じたからです。

再起動・使用していないパッケージの削除など行いましたが動作の重さは変わらず…

上記の優れている点が一つも理解できなかった僕はHTMLの勉強を始めたとたんにエディターの壁にぶち当たりました。

 

てんし君

エディターに嫌われると必然的にHTMLの勉強熱も冷めるんですよねえこれが。

当時初心者の僕からすると起動するたび何回も画面が落ちるのはなかなか心に来ました。。

しかし、エディターの動作が重すぎてやる気をなくしていたある日、ふと

「あれ?じゃ他のエディター使えばいいんじゃね?」

となりVisual Studio Codeに切り替えたところスムーズに動きました!

 

どうやらAtomが重いと感じている人でVisual Studio Codeに切り替えたところ「スムーズになった!」という人は多いようです。

この点に関しては使っているパソコンやスペックによって使い勝手は変わってくると思います。

ちなみに僕はWindowsユーザーです。

両方試してみて使いやすいほうを選択するのがベストかもしれません!

 

②Visual Studio CodeでHTMLを編集する

 

Visual Studio Codeのダウンロード、インストール、日本語表記設定が完了したさっそくHTMLの編集をしていきましょう。

この章ではHTMLの基本と使い方を丁寧に解説します。

 

テキスト編集してみよう

 

テキストの編集をするにはまず「新しいファイルを開く」を選択します。

 

スクリーンショット

 

次にこのコード(HTML)を書いてみます。

コピペで張り付けてみてもいいですが、「この文字を打つことでWeb上にはこう表示されるんだな」と確かめながら書くことをおすすめします。

 

<!doctype html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
<title>名言集</title>
<metaname="description"content="偉人の名言集">
</head>

<body>
<h1>ルソー(哲学者)</h1>
<p>最も長生きした人間とは、最も年を経た人間のことではない。最も人生を楽しんだ人間のことである。</p>
</body>
</html>

 

スクリーンショット

それぞれの文字の意味

 

それぞれの文字の意味について解説します。

<!doctype html>

これからどのバージョンのHTMLで書いていくか明らかにします。

今回はHTML(普通のHTMLだとHTML5というバージョン)で書いていくことを明らかにしています。

ちなみにHTMLにはほかにもバージョンがあります。例えばHTML4.0などです。普通にHTMLと表記されているものはHTML5.0だと思ってもらえれば大丈夫です。

 

<html lang="ja">~</html>

HTMLを使うページであることを示します。

lang="ja"は日本語表記することを示してています。

 

<head>~</head>

ページの情報を示しています。

 

<meta charset="UTF-8">

文字コードを"UTF-8"にするという正しく表記されていないと文字化けすることがあります。

 

<title>名言集</title>

ページのタイトルとして表示されます。

このサイトのホームページですと「GNL blog 」の部分です。

 

<metaname="description"content="偉人の名言集">

ページの説明文です。検索結果としてタイトルとともに表示されるので、そのページがどんなページかユーザーが一目でわかるように書きましょう。

 

 

<body>~</body>

この間に入る文字がページの内容になります。

 

<h1>ルソー(哲学者)</h1>

一番大きい見出し(タイトル)です。

今回の例だとルソー(哲学者)になります。

 

<p>最も長生きした人間とは、最も年を経た人間のことではない。最も人生を楽しんだ人間のことである。</p>

見出しに続く本文です。

 

③Webブラウザで表示させる

 

次に書いたコードをWebブラウザ上に表示させていきます。

てんし君

今まで書いてきたものがついにWeb上に表示できる!!

まずコードの編集画面のファイルを開いて名前を付けて保存を指定します。場所はデスクトップにしましょう。

このとき名前は○○.htmlにしてください。

 

スクリーンショット

 

デスクトップ上のファイルを選択してブラウザを(何でもいい)開けばこのような画面になるはずです。

 

スクリーンショット
てんし君

おおおお!

 

HTMLを扱うイメージが付いたでしょうか?

意外と簡単だったと思います。

僕も自分で打ち込んだHTMLのコードが文字になってWebページに表示されたときは感動しました。。

ちなみにもっとHTMLのコードを覚えて書けるようになれば表やリストも作れるようになります!

勉強を始める方はコードの種類とその意味を確かめながらどんどん書いて、そのたびに表示のされ方を見ていくことをおすすめします。

実際それがHTMLの習得において1番効率のいい勉強方法だと思います(笑)

コードは購入した教材を参考にしてみてください!

教材を買っていない場合はネットで調べても出てきます。

 

おわりに

 

今回は「HTMLとは何か」と「勉強の始め方」を簡単に説明しました。

ちなみに僕が勉強を始めたきっかけはHTMLを理解しておくとブログが書きやすくなるんじゃないかと思ったからです。

きっかけは人によってさまざまだと思いますがHTMLについて初心者だけどどういうものなのか知りたい!

独学でのHTMLの勉強を始めたい!という方はこの記事を参考にしていただければ幸いです。

 

てんし君

当時僕は暇なときにHTMLを使ってWebページを作る練習(ほぼ趣味みたいなレベル)をしていたのですが

「あれ?僕、HTMLを使いこなしてる…?もしかしてかっこいいのでは?」

なんて変な自己満足感も得られます。

 

ちょっと使えるようになってかっこよさを目指すのも楽しいのでぜひ気軽に触れてみてください(笑)

 

HTMLを理解しておくとWebページの構造も理解が深まるのでぜひコードを書きながら勉強してみてください。

僕は時間があるときに遊び感覚でよくコードを書いたりほかのWebページの構造を見たりしています。

(尚今はバックエンドのエンジニアしてる)

興味がある方はぜひ初めてみてください。案外はまるかもしれません。

 

 

えーちゃんのTwitterはこちら@akaaaan555

 

関連記事

2020年最新プログラミングスクール おすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

 

続きを見る

プログラミングを独学で習得する3つの方法|現役プログラマーの僕が解説と書かれた画像
プログラミングを独学で習得する3つの方法|現役プログラマーの僕が解説

  てんし君   プログラミングの学習を始めるにあたって多くの人が気にすることがプログラミングは独学でも習得できるのかどうかということです。   この記事では現役のプログ ...

続きを見る

エンジニアの志望動機を聞かれたらなんと答えるのがベストなのか【現役エンジニアが真剣に考えてみた】と書かれた画像
エンジニアの志望動機を聞かれたらなんと答えるのがベストなのか【現役エンジニアが真剣に考えてみた】

  あなたエンジニアの面接のときに志望動機を聞かれたときの良い答えってありますか?   この章ではエンジニア面接の際の良い志望動機の答え方を紹介していきます。   【この ...

続きを見る

SES企業とWEB系自社開発企業どっちがいいの?【転職してわかったことをまとめる】と書かれた画像
SES企業とWEB系自社開発企業どっちがいいの?【転職してわかったことをまとめる】

  あなたSESはよくないってこと?   ここまで読み進めてくださっている方は「SESにいいところないじゃん」と思っているかもしれませんがその考え方は間違っています。 SES企業に ...

続きを見る

【エンジニア最高】エンジニアになって4ヶ月たったので感想をまとめますと書かれた画像
【エンジニア最高】エンジニアになって4ヶ月たったので感想をまとめます

  実はエンジニアになって4ヶ月経ちました。 今回はぶっちゃけエンジニアになってどんな感じ?と気になる方に向けてエンジニアになって数ヶ月経った僕の感想を紹介していきます。   この ...

続きを見る

-HTML/CSS
-

Copyright© エンジニアてんし君ブログ , 2020 All Rights Reserved.