ドットインストールでHTMLを学ぼう#07〜#09
こんにちは、ちょっとだけhtmlの意味がわかってきたような気になっているぽんきちさんです。
今日は、ドットインストールでhtmlの続きを学んでいきたいと思います。
前回の記事では、htmlの#06までを学んだのでした。
今回は、#07からです。
#07 id class style属性を使ってみよう
最初にこのような説明から始まります。
タグに付けられる属性なのですが、そのタグ特有のものもあれば、すべてのタグに付けられる属性もあって、それらのことをグローバル属性と呼ぶので用語として覚えておいてください。
「たぐ？ぞくせい？」
はいでた！わからない言葉出た！
タグは<class>とか<style>などを見たことがあるけれど
そういえば「属性」ってなんだろう。
なんとなく聞き流していたけれど、実は内容はよくわからないのでした。
調べてみました。
こちらのサイトを参考にさせていただきました。ありがとうございます！
属性とは、要素になにかしらの設定をつけるようなものだそうです。
この部分がとてもわかりやすかったです。
属性のサンプル
<html lang="ja">こんな感じです。
これで、「html内の言語は日本語です。」という設定にできました。このように、要素名のところは「◯◯の」、属性のところは「◯◯は」、属性値は「◯◯です」と置き換えて読めばどんな設定かわかりやすくなります。
なので、
<◯◯の ◯◯は="◯◯です">という感じで覚えましょう。
これを踏まえてドットインストールに戻りましょう。
上記のサイトのとおりに考えると、
「pのid は massage です。」
ということになりますね。
id はまだよくわかりませんが、class やstyle は今までに見たことがあるのでなんとなくわかります。
15行目は、
「p の class は "massage" と "active" だよ」
16行目は
「p の class は massage で、style は background が skyblue だよ」
ということです。
わかりやすいのはstyleですね。
16行目で囲った「こんにちは」は背景がスカイブルーになりましたよ、ということです。
←14行目（id属性がついてる）align="left" />
←15行目（class属性がついてる）
←16行目（class属性とstyle属性がついていて、背景は水色）
図と矢印はちょっとずれていますが💦ご愛嬌ということで…。
今はあんまりわからないけれど、きっと後から理解できるようになる部分なんだろうな、と思います＾＾；
先ほどご紹介したQlioさんのサイトも非常にわかりやすかったので、平行して調べながら学んでいきたいと思います。
#08 セクションについて理解しよう
次は、<body>の中のセクションについてです。
見えている部分をこのように分けるよ、ということです。
HTML5では、文章を構造化するために
セクションを区切るタグがあります。
9行目のheader、10行目のfooterはprogateで学んだときにも扱いました。
その他のセクションは見たことがないですね！
- nav はナビゲーション。サイドメニューやグローバルメニュー、パンくずリストなどがあたります。
- articleはメインのコンテンツです。 ニュース記事やブログのエントリなど。
- asideは副次的なコンテンツ。補足説明や広告など。
- sectionはそれ以外の情報のかたまりです。
- h1~h6は、見出しです。h1が一番大きい見出しでh6が一番小さい見出しです。
「あれ、はてなブログでは一番大きい見出しがh3になっているけれど、なんでだろう」
/* 見出し1 */
.entry-content h3 {
padding: 4px 10px;
color: #ffffff;
background-color: #DB7599;
}
はてなの仕様？なのかな？
h1とh2は別のところで使われているのかな？？
今はよくわからないですが、
おそらく、学習を続けていけば意味がわかるようになるでしょう。
#09 アウトラインを意識してみよう
次は、#08のセクションを使って、実際に文を区切っていきます。
こんな文をわかりやすく区切っていくんですって！
美味しいご飯のサイトです。
「なにこれすっごく楽しそう！！」
「おいしいごはんのサイトを作る」とわかり、にわかにやる気を出すぽんきちさんです。
至高のTKG！はもしゃぶ！スリランカカレー！気になる…！
まずは、ヘッダータグで19行目から22行目までを囲みます。
この部分がヘッダーね、なるほど。
さらに、20行目から22行目まではメニューなので<nav>で囲みます。わかりやすい。
次にわかりやすいのはフッター。
一番下の部分を<footer>で囲みます。
また、「おいしいごはん」のサイトなので（じゅるじゅる）
おすすめのレシピ本は副次的な情報ということで、<aside>で囲みます。
asideってこんな風に使うのか！
そして、大きな区切りごとに<section>で区切ります。
「今月の」と、「新着の」に分けた形ですね。
メインのコンテンツは
「おいしいごはん #12 至高のTKG」
「おいしいごはん #32 はもしゃぶ」などですね。
なので、その部分を<articlie>で囲みます。
ほかのごはんも同じように<article>で囲みます。
「なるほど！」
他のところはわからないけれど、セクションで区切るというところはよくわかりました。
おいしいごはん効果ですね（笑）
まずは先に、表示したいものを文字で書いて、
そのあとにセクションタグをつけていくとわかりやすいんだなあと思いました。
次回は、見出しをつけるそうなのです。
おいしいごはんに見出しがつきます。
とっても楽しみです♪
