どうも、しだゆう(@araShidayuuKi)です！
私自体、まだまだ初心者エンジニアではありますが、
初心者だからこそ伝えられることがあります！
初めてプログラミングをやる方にとっては、
HTMLは簡単だよ！と言われたとしても
プログラミング画面を見たら、何が何だかわからないものです。
今回は１記事で全てを理解してもらうのは不可能なので
全部ではなく、基本となる部分で必ず使用される部分を紹介していきます！
よく使われる基本的な用語ですので
読んでいただけると、HTMLについて大まかに理解できるようになります！
ということで、上級者の方はスルーしてくださいw
では早速はじめていきましょう！！
Contents
まずはプログラミングをはじめる環境を整える
第１条件として、パソコンをお持ちであることを前提としてお話しします
まずはMac、Windows共に「Atomエディタ」というソフトを使っての説明が出てきますので、この機会に是非ともインストールしてください！
検索していただいてもいいのですが
下記リンクから直接ダウンロードできますので、こちらも利用ください↓↓
Atomエディタのダウンロード・設定方法
まずこのような画面が現れたら
- まずは自分のパソコンのOS(オペレーティングシステム)を確認する
(macOSの場合は10.9以降であればOK) - OSが確認できたら、「Download」ボタンをクリック
オペレーティングシステムのバージョンがわからない方は
下記のやり方でご確認ください！
- 画面左上の「」をクリックする
- 「このMacについて」をクリックすると確認できます！
※余談ですが、「」の入力方法はoption + shift + k で入力できます
- 「マイコンピュータ」を右クリックし
- 「プロパティ」をクリックする
- 「オペレーティングシステム」タブをクリックする
現在のWindowsOSのバージョン(Windows7,8,10など)が確認できます！
※バージョンによっては確認できない場合がございますので、その際はご了承ください。
動画でわかりやすく教えてくれる「ドットインストール」
プログラミング学習をする際に
色々な勉強方法はありますが、個人的にもオススメな勉強法はコチラ↓↓
ドットインストール｜
3分動画でマスターする初心者向けプログラミング学習サイト
HTMLに関しては、ほとんど無料で受講可能です！！
有料といっても、月額980円と格安なので
最初から有料で登録してもいいとは思いますが
HTML基礎文法入門までは無料で学べます！
- コンテンツによっては女性の声で解説してくれる
- 動画の速度を変更できる
- 音声の文字起こしをしてくれる
- 解説したコードを見れるようになるなど
というメリットがあります！
個人的には、女性に教えてもらえるなんて夢のような話しなので、
音声が女性にできる！というだけで有料会員になりましたw
HTMLで使われる基本的な7つの構成タグ
- <!DOCTYPE html>
- <html></html> 読み方：エイチティエムエルタグ
- <head></head> 読み方：ヘッドタグ
- <meta> 読み方：メタタグ
- <link> 読み方：リンクタグ
- <title></title> 読み方：タイトルタグ
- <body></body> 読み方：ボディタグ
基本的にはこの7つがあれば、ホームページの構成を作成できます！
真っさらな画面からスタートしても
この7項目を先に入力してしまうのもアリです！
HTMLでよく使われる4つの要素タグ
<h1></h1> 読み方：エイチワン タグ
<p></p> 読み方：ピータグ
<img> 読み方：イメージタグ
<a></a> 読み方：エータグ
タグにはたくさん種類があるのですが、
初心者であれば7つの構成タグと
よく使われる4つの要素タグをまず覚えましょう！
これを覚えるだけでも、HTMLの理解度は3割くらいあるのではないでしょうか？(言い過ぎかもですがw)
それでは簡単にサクッと説明していきます！
7つの構成タグの使い方と説明
上記は実際にAtomエディタで記述した際のプログラムです
①<!doctype html>とは
文書型宣言と呼ばれており、詳しく話すとなると
かなりややこしくなってしまうので書きません！w
簡単にいってしまうと
HTMLのコードを書くときは必ずこの記述をする必要があります！
ということなので、ルールとして必要なんだな程度に理解しておきましょう！
最初の部分に記述する必要がありますので、忘れずに必ず書くようにしてください！
別の参考書などで<!DOCTYPE html>と記載していたりしますが、
大文字・小文字どちらでも問題はありません！
②<html></html>とは
<!doctype html>以外の全てのコードを
この<html>タグ内で記述する必要があります！
意味合いとしては、
<html>から</html>までがhtmlの内容ですよ〜という理解で大丈夫です！
ですので、内容となるコードは全て<html>内に書きましょう！
- <html>をhtmlの開始タグと呼び、
- </html>をhtmlの終了タグと呼びます！
プログラムの締めくくりには、</html>がくる！という事になります
終了タグには「/」(スラッシュ)を使用します！
※metaタグとlinkタグには終了タグは必要ありません
③<head></head>とは
この<head>タグの中には
- <meta>タグ
- <link>タグ
- <title>タグ
が含まれます
<head>タグの意味としては
Webページに関する情報を入れるための要素という意味です！
サイトを閲覧している際には、<head>の中身は基本的に見えない構造となっております
唯一、<title>タグだけ見る機会がありますが
その説明は以下の「⑥<title></title>とは」で説明します
④<meta>とは(終了タグ不要)
<meta>タグとは
Webページ自身に関するさまざまな情報(メタデータ)を示す要素です！
上記の写真にて
<meta charset=”utf-8″>
と入力しておりますが、
このcharsetは文字コードのことで、
「utf-8」という文字コードを指定したことになります！
基本的には文字コードは「utf-8」でOKです！
状況によっては別の文字コードを指定しなければならないとは思いますが、
その時がくるまでは「utf-8」と書いておきましょう！
他にもメタデータの種類はありますが、
初歩としては「charset=”utf-8″」だけしっかり覚えておきましょう！
⑤<link>とは(終了タグ不要)
<link>タグとは
別の場所にある情報を読み込ませるための要素となります！
添付の写真の中には
<link rel=”stylesheet” href=”css/style.css”>
とありますが、
relはrelation(リレーション)の略で、ファイルの種類を指定します
href(エイチレフ)は、hypertext referenceの略で関連するファイルのURLを指定します
ですので
rel=”stylesheet”は、stylesheetというファイルの種類を指定し、
href=”css/style.css”とは、
cssフォルダ内(css/)にあるstyle.cssファイルにリンクするという事となります！
こちらも他にも種類がありますが、今はこの内容だけしっかり理解しておきましょう！
⑥<title></title>とは
<title>タグとは
Webページのタイトルを入れる要素です！
どこに表示されるかと言うと、
Yahoo!JAPANのページだと、こちらの部分となります！
まさにタイトル、といったところですね。
<head>タグ内は基本的にはサイトの情報なので外部から見えることはないのですが、この<title>タグに関しては、このように表示されます！
隣にあるアイコンは
faviconと呼ばれるアイコンですが、今後の記事にてお伝えします
⑦<body></body>とは
<body>タグとは
ブラウザで表示させたい内容を入力します！
<head>タグとは逆の要素という事になります(titleを除く)
なのでこれから説明する「4つのよく使うタグ」も
この<body>タグ内に入力する形となります！
4つのよく使うタグの使い方と説明
こちらの内容は、<body>タグ内に書く内容です
<h1></h1> 読み方：エイチワン タグ
<p></p> 読み方：ピータグ
<img> 読み方：イメージタグ
<a></a> 読み方：エータグ
深く学べば学ぶほど複雑になってきますが、基本的な部分を理解しておけば戸惑うことはなくなります！(少しずつですが)
まずは基本をしっかりと理解していきましょう！
<h1></h1>タグ(エイチワンタグ)について
hとは、heading(ヘディング)の略式で「見出し」の意味です
h1だけではなく、h2,h3,h4,h5と見出しを使い分けることができます
書き方としては
①
<h1>見出し</h1>もしくは、
②
<h1>
見出し
</h1>
となります。
①、②ともに結果は同じなので、見出しの文章が長い場合は②の方法をとるのが良いです！
hタグに限らず、長い文章が入る場合は見やすさを優先させた②の方法を使いましょう！
hタグは番号が大きくなるにつれ、強調は弱くなる仕組みです
文章があれば必ず使われるので、よく使われるタグの一つです！
<p></p>タグ(ピータグ)について
pとは、paragraph(パラグラフ)の略で「段落」の意味ですね
基本的には、hタグの次にくるタグが「pタグ」となります
<h1>見出し</h1>
<p>内容を書く</p>
このようになりますね！
もちろん文章が長い場合は、改行して入力してください！
hタグとpタグはセットになりがちなので
これが基本となるのだと覚えておきましょう！
<img>タグ(イメージタグ)について(終了タグ不要)
imgとは、image(イメージ)の略で
主に写真・画像を添付するための要素です！
書き方としては
<img src=”画像のファイル名” alt=”※文章“>
となります。
srcとは、source(ソース)の略で、画像のファイル名を指定する必要があります
同じフォルダ内であれば、「〇〇.jpg」というようなファイル名となりますが
別のフォルダに入っている場合は「フォルダ名/〇〇.jpg」となります。
現代のサイトには、画像・写真は必須なので覚えておきましょう！
<a></a>タグ(エータグ)について
aとは、anchor(アンカー)の略で
アンカーは船の「錨(イカリ)」の意味です
ハイパーリンクと呼ばれるもので、クリックするとそのサイトに飛ぶ設定ができ、関連サイトを紹介したり、別の記事に移動させたい場合によく利用されます。
上記の「ドットインストール」の文字をクリックすると
ドットインストールのサイトに飛びます！
これが<a>タグの効果ですね
記述方法は
<a href=”https://dotinstall.com”>ドットインストール</a>
となります！
ここでもhrefを使うので、linkタグとaタグで使用すると覚えておきましょう！
まとめ
①まずはAtomエディタをダウンロードし、インストールする
②システム要件の確認は、「Atomエディタのダウンロード・設定方法」を確認する↑↑
③具体的なhtmlの学習方法は「ドットインストール」を利用する(htmlはほぼ無料)
- <!DOCTYPE html>
- <html></html> 読み方：エイチティエムエルタグ
- <head></head> 読み方：ヘッドタグ
- <meta> 読み方：メタタグ
- <link> 読み方：リンクタグ
- <title></title> 読み方：タイトルタグ
- <body></body> 読み方：ボディタグ
<h1></h1> 読み方：エイチワン タグ
<p></p> 読み方：ピータグ
<img> 読み方：イメージタグ
<a></a> 読み方：エータグ
上記をしっかりと理解すれば、本当の基礎の部分は理解できた事になります！
進むにつれ、色んなコード・要素などなど増えてきますので
少しずつ理解を深めていきましょう！
次は初心者向けのCSSについて書いていきます！
