HTML5とCSS3って何かいてんの？
HTMLとCSS、もちろん未経験の初学者と呼ばれる私はさっぱりでした。
ざっくりと理解できた今、次の初学者へ向け簡単にイメージできる例えを使って説明できたらな～
と記録用に書いていきますね。
読み終わるころには、HTMLとCSSに書いてある内容が伝わりますように。
たとえ話でイメージしよう
とはいえ、詳細に語句の説明から・・となると私には無理だ！となってほしくないので
今回は「検索上位のwebサイト」を「住みたい部屋」に変えてみます。
では、想像してください・・・
あなたは新しく転居する部屋を探しています。
部屋の条件を見てみよう
家賃、駅近、軽量鉄骨、バス・トイレ別、キッチン広めの1LDK
・・・
よさそう。内覧してみようかな
落ち着いたカラーの壁紙に、かわいいタイルの洗面所、観葉植物が似合うリビング
なんか住んでいるイメージできるな～
ざっと、まとめてみると
部屋の条件で選んで、内覧で住みたい部屋だな～と思うってことかな。
部屋の条件が選ぶ基準となる様に、WebサイトもHTMLの構築が検索上位のきっかけとなります。
ただ、部屋選びと違うところは、決めるのがコンピュータであるというところ
なるほど～HTMLってブラウザに表示させるためだけじゃないのか。
条件がよくて内覧しても、汚い部屋はすぐ退室しませんか？
Webサイトも上位にヒットしても、文字だらけや色のコントラストが激しいなど人によっては不快に感じる場合別のサイトに移ると思います。
人がいいなと感じるイメージをCSSで行うのです。
ユーザビリティを考えターゲットに合わせたサイトにできるということ。
同じ内容だったら、見やすくて使いやすいがいい方がいいもんね。
まとめ
HTMLにはブラウザで表示するものはもちろん記載しますが、色んな要素はコンピュータに意味を伝えるために必要なんですね。
見た目上、余白が欲しいからといって、改行<br>を多用するのはNG
コンピュータには変な構築のサイトと伝わります。
CSSを使って余白（marginやpadding）を作りましょう。
コードについてはまた今度。
ざっくりですけどなんとなく伝わっていれば嬉しいです。
私が迷ったこと
余談ですが私が一番迷ったのは、画像です。
HTMLに<img>で入れるのか？
CSSでbackgroundで指定するのか？
結果として簡単な見分け方は、その画像は消えた場合テキストにしてでも伝えたいことなのか？
と考えることにしました。
HTML構造のチェックによく使うサイトリンクです。
アウトラインが上手くできたか調べるにはアウトライナーがおすすめです。
自分で書いたHTMLがサイトの目次のようになっていればコンピュータにも伝わっています。
W3Cが定めた規定にあっているか調べるときは、バリデーターをかけてみましょう。
では、また一緒に学びましょう。最後まで読んでいただきありがとうございました。
