HTML&CSSを学ぶ その1 - 勝手に HTML & CSS 初級編 1章 解説
どーも。さいんです。
先日HTMLについて知るっていうNoteを書きましたが、グッとよりみなさんの立場にたって、みなさんが独学で学習する中で疑問に思ったり、思わなかったりしたものを図をおおめに使って解説していきたいと思います。
HTMLについてのNoteはこちらから
どうやって、グッとみなさんにすり寄っていこうかと考えたときに、やはり独学でみなさんが使うProgateに勝手に補助的なNoteを作ってみようと考えちゃったわけです。
カリキュラムは完全にProgateさんにのっかり、
知っておいた方がいいなー とか
実践だとこう使うなー みたいなことを
Noteでご紹介できればと思っています。
HTML & CSS 初級編
まずみなさんがプログラムを勉強するときに、出会うであろう講座がこの
HTML & CSS 初級編
まずはこの講座を図を用いて解説して、みなさんの反応をいただけたらなと思っています！
もし、よかった！やこの図がわかりにくいっていうのがあれば、Twitter(@1000sideincome)にどしどしご意見ください。
それでは、すでにプログラミングの学習を始めているからも、これからの方もProgateのHTML & CSS 初級編を開いて、このNoteを横目に勉強していきましょう！
1 章：HTMLに触れてみよう！
1. HTMLに触れてみよう！
ー index.html
index.html ってなんぞや？
さらっと見逃した方も、いらっしゃるかもしれませんが、ここにあれ？っと思わった方は、なかなかするどいです！
まずは、基本の構成ですが、ファイル名と拡張子という2つのブロックに分けられ、それを.(ドット)でつないでファイルの名前が構成されます。
ーー ファイル名
ファイル名とは基本的に自由につけることができますが、ファイル名だけ読んでどんなものなのか、ざっくり中身が想像できるものをつけるのがいいです。
そして、indexというファイル名だけはとても重要な意味を持ちます。
indexについては後ほど詳しく解説します。
NGなファイル名の例
× page1.html
× page2.html
× page3.html
Goodなファイル名の例
☑︎ index.html
☑︎ profile.html
☑︎ contact.html
ーー 拡張子
拡張子は、ファイルのタイプを表します。
.htmlだとホームページのファイルになりますし、.mp3だと音楽ファイルになります。.mp4だと動画だよねと拡張子を見るとどんな種類のファイルなのかがわかるようになっています
拡張子の例
☑︎ html - ホームページ
☑︎ jpg - 画像
☑︎ png - 画像
☑︎ gif - 画像
☑︎ mp3 - 音楽
☑︎ mp4 - 映像
☑︎ flv - 映像
☑︎ css - CSSが書かれたファイル
☑︎ js - JavaScriptのプログラムが書かれたファイル
☑︎ rb - Rubyのプログラムが書かれたファイル
☑︎ py - Pythonのプログラムが書かれたファイル
ズラーっと書いてみましたが、まだまだまだまだ種類があります。頻繁に目にする拡張子があれば、調べておくといいです。
その際の調べ方は
○○ 拡張子
で検索すると、ほとんどのものはすぐに説明が出てきます。
もし、test.csv というファイルに出会ったら
csv 拡張子
でググればOKです。
ーー index.html
そして、今回の講座で作成しているindex.htmlですが、indexという名前のhtml(ホームページ用)ファイルとなります。
このindexにはとても重要な意味があり、index.htmlとindex.phpだけは作る際に意味を意識する必要があります。
このindex.htmlはホームページにアクセスした際に、勝手に呼ばれるページになります。
もし、このルールがない場合、受付のないキャンプ場やホテルのようにホームページにアクセスしたときに、どのページを出していいかわからなくなってしまいます。
しかし、Web全体でindex.htmlがあれば、それを表示するというルールを決めることで、アドレスにアクセスした際にindex.htmlが受付のような役割をしてくれます。
そのため、index.htmlにはこの次にどのページに行けばいいかのコンテンツとなるようなトップページやランディングページのようなコンテンツが必要となります。
2. 見出しと段落
いよいよホームページの作成の2つ目のステップに進んだ、みなさんですが次に学ぶのは
<h1></h1>といった見出しタグや段落となります。
これって文字のサイズ変わるだけよね？と思いがちですが、
実は超大切です！
どう大切かというと、これは本の見出しの役割をもつタグだからです。
みなさんは、ブログやホームページにどうやってアクセスしますか？
TwitterなどのSNS経由もありますが、調べ物などの多くの場合Googleを利用するのではないでしょうか？
このGoogleも<h1>タグなどをチェックして、Googleの検索結果に載せます。
綺麗な本はどうなっていますか？
NGな例
× 中見出し
× 大見出し
× 大見出し
× 大見出し
× 小見出し
× 小見出し
× 大見出し
× 大見出し
× 小見出し
× 中見出し
× 中見出し
OKな例
☑︎ 大見出し
☑︎ 中見出し
☑︎ 小見出し
☑︎ 中見出し
☑︎ 小見出し
☑︎ 小見出し
☑︎ 大見出し
☑︎ 中見出し
☑︎ 小見出し
☑︎ 小見出し
☑︎ 中見出し
☑︎ 小見出し
☑︎ 大見出し
☑︎ 中見出し
☑︎ 小見出し
いかがでしょうか？見出しの順番が綺麗になっていたり、数のバランスが整っていると一覧にしたときもとても綺麗に感じますよね？
Googleはコンテンツがちゃんとまとまっているか、整理されて読みやすいものかということもチェックするようにかしこくなっています。
以前はh1タグはページに1回までや、h1タグに重要なキーワードを詰め込めなどいろんなノウハウがありましたが、今ではそこまで重要視されていないようです。
しかし、hタグをみやすく配備することはユーザにとって読みやすいコンテンツになることは間違いありません。
ユーザが読みやすいコンテンツはGoogleの検索結果に評価されることになります。
そのため、hタグがただ文字のサイズを大きくするだけではなくGoogleにとっても重要なタグということは覚えておきましょう。
3. リンク
リンクです。リンクはサンプルではProgateやGoogleのURLになっていましたが、
今開いているページから移動する場合は基本的に全てリンクとなります。
将来的に<a>以外の方法でページを移動する手段を知るかもしれませんが、ほとんどの場合<a>を使用してページから移動することになります。
いろんなページをみて回るときに、ページを移動したな！っと思ったらそれは<a>タグをクリックしていると思ってもらえるとOKです。
リンクといってもいろんなリンクがあることをさらっと触れておきます。
☑︎ 同じウィンドウで別のページにリンク
☑︎ 別のウィンドウで別のページにリンク
☑︎ 同じページの別の場所にリンク
同じ<a>タグでも属性やリンクの貼り方で、リンクの動きを変えることができます。
☑︎ 同じウィンドウで別のページにリンク
1つ目の同じウィンドウで違うページにリンクは、通常のページやブログで記事を見たり、トップページに戻ったりするときに使ってますよね？
同じブログやサイト内でのリンクでは効果的に使えるのがこの同じウィンドウで別のページにリンクになります
☑︎ 別のウィンドウで別のページにリンク
先ほどの同じウィンドウで別のページにリンクの場合、今まで見ていたページが別のページに切り替わってしまいます。
もし自分のブログから、別の人のブログにリンクを貼る場合、まだ自分のブログを残してもらいながら、別の人のブログの記事も紹介したい！なんてこともありますよね？そのときに別のウィンドウやタブでリンクを開くこともできます。
リンクを貼るときはこっちの方がいい！と思う方もいらっしゃるかもしれませんが、このリンクの貼り方にはセキュリティやパフォーマンスの点で問題視されることもあり（解決方法もあります）、安易に多用するのは注意です。
☑︎ 同じページの別の場所にリンク
今まで紹介したものはあくまで別のサイト、ページにリンクしていましたが、実は同じページ内にリンクを貼ることも可能です。
コンテンツの量が多い場合は、ページの上部に目次があり、そこをクリックするとページの下の方のコンテンツに飛ぶリンクです。
Noteでも目次があり、それをクリックすると見たいコンテンツまで飛べるのは<a>タグを使用しているからなんです。
<a>タグといっても様々なリンクを貼ることができ、そのリンクの貼り方もいろいろあることをご紹介しました。
上の3つの動作は、具体的な例は宿題として、今後Noteのサークルなどで答え合わせなんかできたらいいなと思っています。
4. 画像
Progateでは画像は
https://prog-8.com/images/html/beginner/wanko.jpg
https://prog-8.com/images/html/beginner/school.jpgこの二つを使用するようなサンプルになっています。
画像の貼り付けもとても重要なタグで、今後何回も使用していくことになると思いますが、注意点があります。
☑︎ 著作権
☑︎ 直リンク
ー 著作権
imgタグを使えば、簡単にネット上にある画像をあなたのページのコンテンツのように埋め込むことができてしまいます。
可能だからといってやっていいかというとそれは別の話です。
画像には基本的には全て著作権が存在し、作成した人のものであるという認識がとても重要となります。
あなたが苦労して作った図が、他の人があたかも自分が作ったかのように載せていたら悲しいですよね？
そのため、画像を掲載する際は、画像を作った人、撮影した人が掲載していいかの許可を出しているかを確認する必要があります。
最近のSNSでは無断で画像を使うことが一般になっていますが、ブログさサイトでは実際に訴えられるケースもありますので、画像を使用する際は、基本的には掲載OKとなっているものを使用しましょう。
無料で掲載していい画像・写真として有名なのが
いらすとや - https://www.irasutoya.com/
ぱくたそ - https://www.pakutaso.com/
photo AC - https://www.photo-ac.com/
pixabay - https://pixabay.com/
それぞれ利用のルールなどがHPに記載されていますのでチェックしましょう。
ー 直リンク
上で紹介したサイトでもほとんどのサイトでのルールとして、直リンクを禁止しています。
直リンクとは相手のホームページの画像を直接imgタグで指定をして、掲載する方式で、直リンクされる側はもちろん、直リンクする側にも大きなリスクがあるので注意が必要です。
imgタグに他の人のサイトのURLをそのまま使用することを直リンクと言います。
直リンク禁止とは、そのまま使用せずに、一度ダウンロードし、画像をあなたのサーバにアップロードして使用するということになります。
ー 直リンクがNG・危険な理由
では、なぜ直リンクがNGなんでしょうか？
1つ目は、サーバへの負荷の危険性があります。
もし直リンクを行うと、あなたのページにアクセスがあると画像が呼び出されるたびに、直リンク元である他の人のサーバに画像を取りに行きます。
もし、あなたのサイトがSNSでバズり、100万人分のアクセスがきたらどうなるでしょうか？他の人のサーバに100万人分の画像を取得しに、大量のアクセスが他の人のサーバにも発生してしまいます。
もし、それが原因で他の人のサーバが故障してしまったら・・・それで他の人のサービスが止まってしまい損害が出てしまったら・・・と、とっても危険な行為となります。
2つ目は、画像の差し替えの危険性です。
あなたのサイトから、他の人のサイトの画像へリンクを貼るという行為は、他の人のサイトを無条件に信頼し、自分のコンテンツとして貼っていることになります。
もし、他の人のサイトの画像が、同じ名前で別の画像に差し替えられた場合、あなたのサイトも差し替えられた画像が表示されます。
あなたが想定している画像
勝手に差し替えられた場合
もし、画像が性的なコンテンツや犯罪に関わる内容の画像に差し変えられたらあなたのサイトにその画像が表示されることになります。
上記2つの危険性がありますので、基本的には画像の直リンクはやめましょう。
一部広告などを直リンクにすることで、あなたが更新することなく、最新のキャンペーンにリンク元が更新してくれるといった使い方もされているので、あなた自身で直リンクすべきかどうかを判断する必要があります。
5. リスト
リストで注目すべきはulのタグの中にliタグがはさまれている状態の入れ子になっている点です。
<ul>
<li>HTML</li>
<li>PHP</li>
<li>Ruby</li>
</ul>タグでタグを挟むというのは今後も多く出てきます。
そして、どこタグが、どのタグの入れ子になっているかをわかりやすくするのがインデントという説明もあったと思います。
ダメな例
<ul>
<li>HTML</li>
<li>PHP</li>
<li>Ruby</li>
</ul>どのタグがどのタグの入れ子になっているかわからないですよね？
その重要なインデントですが、プロジェクトによってインデントのルールが違うケースがあります。
Progateではタブと紹介されていましたが、インデントは大きく3つのタイプがあります
☑︎ タブ1つ
☑︎ スペース2つ
☑︎ スペース4つ
どれがいいとか悪いとかいうことはありませんが、基本的にはすでにプロジェクトなどでプログラムが存在する場合は、そのルールに合わせましょう。
周りがスペース2つなのに、あなただけスペース4つでプログラムを作ってしまうと、混乱しますので基本的にはチームやプロジェクトのルールに合わせるのは必須です。
最近ではVS codeやAtomなどのエディタにはインデントを設定することができ、タブキーを押すとスペース4つ自動的に入力するといった機能がついています。
もしプロジェクトでインデントのルールを知ったら、まずエディタの設定を変更しておきましょう。
まとめ & 宿題
HTML & CSS 初級編 1章のHTMLに触れてみよう！をちょっと深掘りした解説をしてみました。
いかがだったでしょうか？ただサイトをこなすより、少しだけなぜこういったことをやっているのかだったり、注意点だったりを知ることができたと思います。
私からの宿題をこれから章ごとに出させていただければと思います。
さいんからの宿題
☑︎ いらすとやで好きな画像を3つ選んでホームページに載せる
☑︎ <a>タグで新しいウィンドウと同じウィンドウのリンクを作る
☑︎ <ol>タグを使ったリストで好きなものランキングを作る
☑︎ サーバを借りて上記で作ったホームページの公開
サーバについては私のブログで少し解説しているので是非読んでくださいね。
2章は今絶賛作成中ですので、もう少しお待ちくださいね。
長文になりましたが、最後まで読んでいただきありがとうございました。
感想や不明点はどんどんTwitter(@1000sideincome)で教えてくださいね。
この記事が気に入ったらサポートをしてみませんか？