ドットインストールでHTMLを学ぼう#10~#12
こんにちは！
だんだんブログのいじり方がわかってきたような気になっているぽんきちさんです。
（わかってきたとは言っていない）
今日も、元気にドットインストールで勉強したいと思います。
前回の学習はこちらです。
#10 h1-h6タグで見出しをつけよう
見出しのつけかたです。
一番大きな見出しがh1になります。
本文の中にたくさんセクションがあるときには、
たくさんh1が存在するということになります。
はてなブログでは、「見出し」をクリックすることで自動的に見出しになってくれますね。
なぜかh1からではなくh3からなのですが
それはきっと後からわかることでしょう（得意技の先延ばし）。
ヘッダーの「おいしいごはん」も大見出し（h1）になりました。
セクションの「今月のおいしいごはん」
アーティクルの「おいしいごはん」もh1になりました。
ほかのセクション、アーティクルもh1で囲み、
asideの「おすすめレシピ本」もh1になりました。
セクションごとに見出しがあるイメージですね。
確かにそうすると見やすくなりそうです。
#11 p、hr、pre、blockquote、divを使おう
「見出しをつける」のは視覚的に理解しやすかったのですが
#11になるといきなり難しそうな感じです。
がんばりましょう。
それぞれの解説はこのような感じ。
<p>ははてなブログをHTML編集モードにしたら一行ごとに書かれていますね。
<blockquote>は、引用をするときに「”」マークをクリックすると自動的に出てくるものです。
こう考えると、ただブログを書くだけで色々と自動的にやってくれるブログサービスは本当にすごいなあと思います。
<div>はprogateでHTMLを学んでいるときに、よく出てきました。cssを設定するときに使った記憶が！
あとはわからないので、見ていこうと思います。
pは、ひとつひとつの段落でつくのですね。
hrは、話題を区切るときに使うのですが、線が出てくるので便利ですね。
さっそくはてなブログにもしこんでみましょう。
できました。この線がhrです＾皿＾
楽しい！
preは、改行や字下げを保持するときに使うもの。
そのようなものが大事な詩を書くときに便利ですね。
ここでは、「poem」と少しずつ字下げしながら書かれています。
blockquoteは引用をするときに。
divは、とくに意味はないのですが見た目をいじるときに使います。
ここではdivで囲われているところの背景をスカイブルーにしていますね。
このように記述すると、見た目はこのようになるそうです。
おお！本当だ！
poemの字下げもそのままの形になっているし
背景はスカイブルーですね＾皿＾
なるほど。
タグの名前が難しそうなので一瞬警戒しましたが、視覚的にわかりやすいので楽しかったです。
#12 ol、ul、li、di、dt、ddでリストを作ろう
「…」
（難しそうだなあとまた警戒している）
progateで学んだときに、liとulは見た記憶があります。
でもほかのはなに？
ol？ まるい？ 見ていきましょう。
まず、
olはordered listで「順番のあるリスト」。
ulはunordered list で「順番のないリスト」。箇条書きのこと。
liはlist itemで、リストの中にある項目をマークアップするもの。
順番のあるリストもあったのですね！
これは視覚的にイメージしやすい気がします。
あとのは、定義リストだそうです。
現時点ではまるで意味がわかりませんが進みたいと思います。
さて、リストの具体的な使い方です。
材料を書くこととします。
「材料」は２番目に大きい見出し、h2。
そのあと、
箇条書きのリスト<ul>で囲った中に
実際の材料を書いていきます。
卵かけご飯という例が非常にわかりやすいです。じゅるじゅる。
ulの中に、具体的に必要なものを
<li>で囲っていきます。
このあたりはprogateでも学びました。
次に、手順です。
手順は、順番付きのリストになるので、olで囲みます。
次に、全然わからなかったdlとかのリストです。
ここでは、「TKGとはなんぞや」という説明をするために使われていました。
「定義」も２番目に大きい見出し、h2。
それをdlで囲い、
dtで「TKGとはなんぞ」と問い
ddで「たまごかけごはんのことであるぞ」と説明しています。
ふうむ。
たまごかけごはんのおかげで、かろうじて意味がわかるようなわからないような…？
これを実際の画面で見ると、このようになっています。
まずは、箇条書きの「材料」。
ulで囲った部分は黒い点がついていますね。
まさに箇条書き！なるほど！
次は、順番のあるリストの「手順」。
olで囲った順番のあるリストは
ちゃんと連番になっていますね！
そして、いまいちよくわからなかったdl。
見た目はこうです。
dtが「TKG」で、
ddが「たまごかけごはん」。
TKG＝たまごかけごはん
もしくは
TKG→たまごかけごはん
ということでしょうか。
すると、
dt=dd もしくはdt→dd
ということで、ファイナルアンサー？？
「ふうん…？」
（よくわかっていない）
しかし、このあたりの内容になると、
多分本で学んでいたらとっくに深い眠りに落ちているくらいだと思います。
動画で視覚的にわかりやすく教えてくれるドットインストールには感謝ですね！
まだまだ学習は続きます。
