まじメモ|白兎Blog -副業×会社員×お金-

「副業×会社員×お金」をテーマにしたサイトです。働きながら給料以外に収入を得たい人に読んで欲しい副業ノウハウを経験談を交えてご紹介してます。

【副業で稼ぐ!】WEBマーケッターが教える『HTML講座 001』HTMLエディターを立ち上げて基礎を覚える

f:id:shiro-usagi:20200820225159j:plain

 

こんにちは

白兎(@shirousagi_memo)です。

 

はじめに

今日から実際にHTMLの基礎を勉強していきます。今の時代はCMSと言ってワードプレスのようにHTMLが出来なくてもWEBサイトが作れるシステムが無料で使えます。でも、やっぱり所どころHTMLは必要だし、HTMLが出来たほうが出来る事が格段に増えます。

 

しろうさぎのHTML口座は1記事1要素としてまとめて行きます。是非HTMLを覚えたい人は参考にして下さいね。

 

私もHTML覚えたいので楽しみです^^

一度覚えれば簡単だから頑張ろうね!

 

その前に前の記事を読んでない人は絶対読んでからこの記事に入ってね。

 

www.shirousagi.site

 

この記事で紹介してる「Brackets」と言う無料のHTMLエディターを使って授業をしていくので、インストールしてない人は宜しくね!アドビのドリームウィーバーでも全然OKだよ。

 

STEP-1:まずは「Brackets」を立ち上げる

f:id:shiro-usagi:20200822171506p:plain

 

Bracketsを立ち上げるとこんな画面になるよね。新しくHTMLを作成する為のページを作成するので以下の手順で作ってみよう!

Brackets(ブラケッツ)を立ち上げたら、まずやる事!

  • 1:ファイルを選択
  • 2:新規作成を選択
  • 3:「Ctrl + S」で保存
  • 4:ファイル名を「test.html」としてみよう

 

ここで大事なのが「.html」と言うデータで保存する事。この拡張子はブラウザで開く事が出来る。要はこの時点でHTMLデータが出来たんですよね。これはテキストでも同じ事が出来ます。

 

f:id:shiro-usagi:20200822172037p:plain



保存したデータを見てみよう!

そうすると「.html」と言う拡張子で保存されたデータは上の画像のようにブラウザのアイコンになっているはず。僕はメインで使ってるWEBブラウザがグーグルクロームだったので、グーグルクロームの形になってますね^^。

HTMLデータは「.html」で保存と覚える!

ここまでの部分で覚えて欲しいのが、HTMLデータを作成するときには「.html」で保存するという事。もっと正確に言うと...

 

  • .html で保存
  • .htm で保存

 

この2つ。

詳しくはHTMLの授業をやっていくとわかるので、ここでは割愛しますね。例えばワードプレスでHTMLを作りたい!と思ったときはBracketsを立ち上げて、ファイル名は適当で良いけど、拡張子はhtmlで保存。そうするとワードプレスでプレビューしなくてもプレビュー出来る。

 

ちなみにBracketsのプレビューはココ

f:id:shiro-usagi:20200822173037g:plain

 

白い⇒の稲妻みたいなマークをクリックするとプレビューが見れる。でも、今のデータをちゃんと保存した状態のみなので注意。保存してないデータで加工中のデータは見れないので、ちゃんと「Ctrl+S」で保存してからこのマークをクリックしましょうね。

STEP-2:HTMLの基礎構文を覚える

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>無題ドキュメント</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>

 

HTMLは上記のような構成から始まる。

上記の部分はテンプレートとして初めから保存して入れば便利。ちなみにドリームウィーバーも立ち上げるとこの構文がデフォルトでセットされていますら便利ですね。

 

まずは細かい事を抜きにして上を覚えておきましょう。

 

実際に自分でHTMLを作っていく場合は...

  1. <body>
  2. ここにHTMLを自分で作っていく!
  3. </body>

 

<body> これはボディーと読みます。このボディータグと</body>の中に自分でHTMLを組んでいきます。

 

このボディータグはブラウザで実際に表示する部分になります。いくらHTMLを自分で書いても、ボディータグの中に入ってなければブラウザで表示されませんからね。注意してくださいね。これはWEBの世界のルールとなります。

 

ここまでは大丈夫ですか?

ここまでの流れで分からない所があったらコメント下さいね。出来るだけ早く返信します。

STEP-3:実際にHTMLを組んでブラウザで見てみよう!

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>無題ドキュメント</title>
  6. </head>
  7. <body>
  8. ここに好きな文字を入れてみよう
  9. </body>
  10. </html>

 

Bracketsを開いて、基本となるHTML構文を入れて、<body></body>の間に好きな文字を入れて「〇〇.html」というファイル形式で保存してみましょう。〇の部分は好きな文字を入れて保存してみてくださいね。

 

そしたらそのファイルをブラウザで開いてみましょう!

Googleクロームで開きたい場合はブラウザの新しいタブを作って、そこに保存したデータをドラック&ドロップでOKです。そうすると以下の画像のように表示されませんか?

 

f:id:shiro-usagi:20200822182958p:plain
僕が作ったHTMLコードは▼

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>無題ドキュメント</title>
  6. </head>
  7. <body>
  8. 僕はしろうさぎです。 <br />
  9. 仕事はECコンサルタントとWEBマーケッターの仕事をしています。<br />
  10. まじメモと言うブログの管理人でもあります。<br />
  11. </body>
  12. </html>

 

こんな感じです。

<body></body>の間に入ってる文章を見てください。

正に上で入れたような感じで表示されていますね。この時点はで特に文字の大きさや色などを指定してないので、デフォルトの状態で表示されています。

<br  />(ビーアール)とは?

わかる人はもうピンと来たと思うのですが「改行」となります。

  • <br /> = 改行

 

最初のころはこの改行、凄く使うと思います。なのでまず最初に改行を覚えてしまいましょうね。本当によく使います(笑)

 

人によっては<br>と書く人もいますが、どちらでも大丈夫。でも個人的には<br />が正式な書き方なのでおすすめです。

STEP-4:HTMLは2つのタグで1セット

HTMLは2つのタグで1セットとなります。

  • <div> </div>

はじめと終わりを上のように同じタグで囲います。また終わりのタグには必ず「/」が入ります。このルールを覚えておきましょう。一部例外を除いてこのルールでHTMLは出来ています。

 

どうですか?

今日はここまでですが、この記事を覚えるだけでHTMLの基礎が何となくわかるはず。では今日のまとめに行きますね。

HTMLの基礎まとめ

  • ①HTMLを組むときは専用エディター
  • ②HTMLの基礎構文は決まってる
  • ③HTMLデータは「.html」の拡張子
  • ④HTMLタグは2つで1セット

 

ちゃんと順を追って今後詳しくやっていきますし、このあたりのHTMLの基礎はHTMLをやっていく事で自然と身に付きますので安心してくださいね。まだ参考書の1ページと2ページが終わったばかり。頑張りましょう!

【副業で稼ぐ!】WEBマーケッターが教える『HTML講座:序章』:HTMLとは?無料で使えるツールは?

www.shirousagi.site

HTMLのおすすめ参考書