こんにちは やはです。
いつも閲覧ありがとうございます、やっぱり見てもらえるとやる気が出るというか拙くても読んでくださる方がいると頑張ろうってなりますよね
なかなか一歩が踏み出せない方のためにできるだけわかりやすく解説していきます私のブログは初歩的ですが、実際にホームページを作成できます
なので、根気よくやっていきましょう
それでは今日も始めていきましょう
今回はこれです、順番に進めていきます
HTMLの始めにかくコード
前回の記事で作っていただいたindex.htmlをVSCコードに載せましょう
載せ方はたくさんあります
VSCにドラッグ＆ドロップ（左クリックしながらVSCの画面上に動かす）
index.htmlを右クリック→プログラムorアプリケーションで開く→VSCを選択
VSCの左上のファイル→開く→ファイルの置いてある場所を選んで開く
大体はこの３つです。画像を見ながら確認しましょう
こちらは右クリックしたやり方です、簡単です
見にくい画像ですけどドラッグ＆ドロップ、これも簡単
ファイルから開いて
選んで開く、全部簡単でした
大まかに３つ紹介しましたが、自分のやりやすいやり方で開いてください
これからファイルを開く際は大体はこのやり方でやると思います
では、開いた「index.html」を開いて一番上に半角のビックリマークを打ち込みましょう
半角を押して「Shift（↑）＋ １」を押すと打ち込めます
こういうのが出てきますのでEnter or ! を押してください。
よくわからない文字がたくさんできてました、これがコードです
順番に解説していきましょう
<!DOCTYPE html>
<html lang="en">
</html>
２つのコードがありますね、これは前回もお話ししたタグのペアです
まずは<DOCTYPE>からみていきましょう
<DOCTYPE html>は実は相方がいないタグです
この相方のいないタグを空タグといいます、覚えておきましょう
現在のHTML5.0はこのタグは基本文となります
長い歴史があるようですけど、このDOCTYPEの書き方が最新のWebサイトっていう判断基準になるので、気にせず入れておいてください
参考書や検索すると解説がたくさんありますよ
HTMLの一番上に絶対書くとだけ覚えておきましょう
<!DOCTYPE html> ←一番始めにかくコード
<html lang="en">
</html>
次は<html>です
これも基本文になるので気にせず覚えればいいのですが少しだけ解説します
<html>はお話ししたとおりペアのタグですね
langの中の"en"を"ja"に変えておきましょう
っていうかlang="en"は何？
これはlanguageの略語となっています
languageは日本語で言葉という意味で、jaはJapan enはEnglish
そして"en"を"ja"に変えています
なのでそれを読むとlanguage Japanとなり言葉は日本語となります
Google検索ロボットがWebサイトを解析した時に
「このホームページに書いてある言葉は日本語」と判断してくれます
つまりはロボットのためのコードですね
ロボットのためのコードなんて意味あるの？ってなりますよね
これを入れることにより文章で日本語を使うと
ロボットはここのサイトはしっかりと日本語を書いているサイトと判断し、ホームページを検索した際に上位に表示してくれるようになります
ホームページが上位に表示ってわかりますか？
検索をかけた時に自分のホームページが上に来るので、アクセスをしてもらいやすくなります
これがよく言われるSEO対策
ということなんですね
検索を上位にあげる時の条件はたくさんありますが
ロボットにもわかるコードを書く事は、SEO対策の中の１つになるんです
SEO対策はまだまだたくさんあります
慣れてきたら、SEO対策も視野に入れていきましょう
ちなみにこちらのlangに関して、現段階ではSEO対策の基準にほぼならないそうです
基本文で皆様入れてるので仕方ないですよね
<!DOCTYPE html>
<html lang="en"> ←DOCTYPEの下には絶対これがきます
langはロボット用の日本語表記
</html> ←そのペアタグ
これも基本文なので忘れず入れてください、"ja"も忘れずに！
そして<html>はHTML内の最後につくタグです
ホームページは
ここより上にはコードは書かないよ！
<!DOCTYPE html> ←ここから始まり
<html lang="en">
中には色々書いてある
</html> ←ここで終わる
これ移行コードは書かないよ！
と、なるわけです
基本的にこの中にHTMLの全要素をコードで書き記していきます
本の表紙みたいなものです
本の表紙の外側に文章を書く人はいませんよね？
この２つのタグはそういった役割です
次はこの<head>と呼ばれる部分です
基本的にこのタグと、この中のタグはホームページ上に表記されません
この<head>の中にはリンク先のファイルを入れたりなどして
自分のホームページに反映させたりするものです
これから学ぶ１つのCSSもHTMLとは別ファイルで作成するのですが
それを反映させるためにこの<head>内にCSSファイルを取り込むことで
自分のホームページに適応させるものなんです
ファイルを関連付けるためのタグと覚えておいてください
今お話しした<head>の中を解説します、これは基本構成の一部です
<meta charset="UTF-8">
meta？
ブラウザや検索ロボットにホームページの情報を知らせるためのタグです
更にはそこにかかえれているものを反映させるという意味もあるタグです
※ブラウザはGooglechromeや Safariなどの検索エンジンです
SEO対策に似てますね、検索してきた時に情報を表示するためのタグです
単体では使わないので組み合わせ使っていくものです
charset="UTF-8"？
HTMLは使用する文字コードを指定する必要があります
厳密には指定しなくても大丈夫なんですが
文字化けを防ぐためにも通常は文字コードを使います
charsetは文字コードを指定するためのタグです
こちらは１つだけなので空タグですね
その中に入っているUTF-8が文字コードです
つまり
<charset="UTF-8">というのは
この文字コードを指定しています
という事です
文字コードこれ以外にも
Shift_Jis
EUC-JP
と呼ばれるものがありますが、現在の主流はUTF-8なので
気にしないでください
これにより検索ロボットはUTF-8を使用していると判断するわけなんですね
ただこれで文字の字体を変えるわけでは無いので
あくまでロボット用と覚えておいてください
<meta name="viewport" content="width=device-width, initial-scale=1.0">
次もmetaとなっているのでロボット用に情報を知らせて反映させているものです
これは複雑なものなので、今は１つ１つを覚える必要はありません
簡単にケータイ用にも適応させるためのタグ
と、覚えてください
今の時代パソコンよりもスマートフォンでの検索が主流だと思います
ホームページもそれに合わせて
スマートフォンでも読みやすいホームページ
というものが求められています
パソコンサイトの大きさのものがそのままケータイにうつされると
小さくなって読み辛くなりますよね
それを防ぐためのタグです
もちろんケータイ用の設定は必要になります
それは今後CSSの勉強時に
メディアクエリーと言われるものが出てきます
今は深く考えず、もっとHTMLに慣れてきてから学び直しましょう
<title>Document</title>
最後はここです
先ほど<head>内のタグは表示されないといいました
しかし、このtitleだけは別なんです
こちらは名前のとおりタイトルです
このタイトルは<head>内にあるにも関わらずホームページに表示されます
どこに表示されるか見ていきたいと思います
ただ、その前に
今入力されているコードはまだ保存されていないので
保存をしてから表示しましょう
VSCをの画面でoption(Alt) + B
index.htmlを右クリック→開く
どちらかを行なってみてください
index.htmlの後ろに●がついているのが見えますか？
これはファイルの内容を変更してからまだ保存してない時に表示させるものです
保存をかけないと変更した内容は反映されません
今現「！」を押してから保存ができていない状態だと思います
保存はとても簡単です
ファイル→保存を押すと保存ができます
ショートカットキーとしてcommand(Ctrl) + B
でも保存は可能です、好きな方法で保存しましょう
コードを入力の際、予期せぬトラブルでVSCが強制終了
パソコンが強制終了等、突然起こります
細かく保存を行なって打ち込んだコードが無駄にならないよう努めましょう
保存はできました？
それではホームページを表示してみましょう
index.htmlを右クリック→開く
（やははプログラムから開く→Google Chromeを選択を推奨します）
でホームページを表示してみましょう
真っ白で何も表示されてませんね
どこに表示されているかわかりますか？
ここに表示されています
つまりホームページのタイトルとは
ホームページのタグの部分名前という事ですね
ここは任意の名前を入れる事ができます
<title>内に「YAHALIFE」と入力してみます
ここの表示が変わりました
このように自分のホームページは好きなタイトルをつけていきましょう
ホームページは毎回開く必要はありません
先ほど表示されたホームページの上で
左上のグルグルマークをクリック
F5ボタンを押す
こうする事で変更した内容を更新していけます
簡単に更新できるので使っていきましょう
しかし、更新されるのは保存されている内容までなので
更新する前にはしっかり保存できているか確認を行なってください
最後はこの<body>です
文章や画像など、実際にブラウザの画面上に表示される内容を表示するタグです<body>内に書かれたテキストや画像などがブラウザの画面上に表示されます
そうです、やっとホームページに表示させる場所にたどり着きました
やっとです、長かったです
HTMLの内容はこのbodyのタグ内に記入していくことになります
ホームページに書かれている文字や画像はこのbody内で構成されていきます
今日のまとめ
- ホームページはDOCTYPEを始めとした基本構成からできている
一言でまとめるととても簡単な内容ですね
あくまで基本構成なので触るところはlangとtitleくらいだと思います
もちろん、今後はhead内にたくさんのタグが入ります
あくまで土台の部分として覚えておいてください
次回からはbody内にコードと文章を記入していきます
自分で作りたいホームページをイメージしておいてくださいね
今日もお疲れ様でした
やはでした！
よくわかるHTML5+CSS3の教科書【第3版】
Amazon（アマゾン）
3,080〜8,927円
私はこちらの参考書を使って勉強していきました。
テスト問題などもそうですが、知識０からでもわかりやすく勉強できたところが
一番のポイントかと思います。もし自分でもどんどん学習したいのであれば
数ある参考書の１つの目安として考えてもいいかもしれません。
