生涯、学習していきたい

2018年はプログラミング学習に凝っています。

ドットインストールでHTMLを学ぼう#10~#12

こんにちは!

だんだんブログのいじり方がわかってきたような気になっているぽんきちさんです。

(わかってきたとは言っていない)

今日も、元気にドットインストールで勉強したいと思います。

f:id:ponnkichi:20171226222543p:plain

https://dotinstall.com/home

 

前回の学習はこちらです。

ponnkichi.hatenablog.com

 

 

 #10 h1-h6タグで見出しをつけよう

見出しのつけかたです。

一番大きな見出しがh1になります。

本文の中にたくさんセクションがあるときには、

たくさんh1が存在するということになります。

 

はてなブログでは、「見出し」をクリックすることで自動的に見出しになってくれますね。

なぜかh1からではなくh3からなのですが

それはきっと後からわかることでしょう(得意技の先延ばし)。

f:id:ponnkichi:20180113113610p:plain

ヘッダーの「おいしいごはん」も大見出し(h1)になりました。

f:id:ponnkichi:20180113113728p:plain

セクションの「今月のおいしいごはん」

アーティクルの「おいしいごはん」もh1になりました。

ほかのセクション、アーティクルもh1で囲み、

f:id:ponnkichi:20180113113907p:plain

asideの「おすすめレシピ本」もh1になりました。

 

セクションごとに見出しがあるイメージですね。

確かにそうすると見やすくなりそうです。

#11 p、hr、pre、blockquote、divを使おう

「見出しをつける」のは視覚的に理解しやすかったのですが

#11になるといきなり難しそうな感じです。

がんばりましょう。

f:id:ponnkichi:20180113114431p:plain

それぞれの解説はこのような感じ。

<p>ははてなブログをHTML編集モードにしたら一行ごとに書かれていますね。

<blockquote>は、引用をするときに「”」マークをクリックすると自動的に出てくるものです。

こう考えると、ただブログを書くだけで色々と自動的にやってくれるブログサービスは本当にすごいなあと思います。

 

<div>はprogateでHTMLを学んでいるときに、よく出てきました。cssを設定するときに使った記憶が!

あとはわからないので、見ていこうと思います。

f:id:ponnkichi:20180113115059p:plain

pは、ひとつひとつの段落でつくのですね。

hrは、話題を区切るときに使うのですが、線が出てくるので便利ですね。

さっそくはてなブログにもしこんでみましょう。


 できました。この線がhrです^皿^

 

楽しい!

 

preは、改行や字下げを保持するときに使うもの。

  そのようなものが大事な詩を書くときに便利ですね。

  ここでは、「poem」と少しずつ字下げしながら書かれています。

blockquoteは引用をするときに。

 

divは、とくに意味はないのですが見た目をいじるときに使います。

ここではdivで囲われているところの背景をスカイブルーにしていますね。

 

このように記述すると、見た目はこのようになるそうです。

f:id:ponnkichi:20180113115506p:plain

おお!本当だ!

poemの字下げもそのままの形になっているし

背景はスカイブルーですね^皿^

 

なるほど。

タグの名前が難しそうなので一瞬警戒しましたが、視覚的にわかりやすいので楽しかったです。

#12 ol、ul、li、di、dt、ddでリストを作ろう

f:id:ponnkichi:20171219214742p:plain「…」
(難しそうだなあとまた警戒している)

 

progateで学んだときに、liとulは見た記憶があります。

でもほかのはなに?

ol? まるい?  見ていきましょう。

f:id:ponnkichi:20180113115911p:plain

まず、

olはordered listで「順番のあるリスト」。

ulはunordered list で「順番のないリスト」。箇条書きのこと。

liはlist itemで、リストの中にある項目をマークアップするもの。

 

順番のあるリストもあったのですね!

これは視覚的にイメージしやすい気がします。

f:id:ponnkichi:20180113120341p:plain

あとのは、定義リストだそうです。

現時点ではまるで意味がわかりませんが進みたいと思います。

 

 

さて、リストの具体的な使い方です。

f:id:ponnkichi:20180113120520p:plain

材料を書くこととします。

「材料」は2番目に大きい見出し、h2。

そのあと、

箇条書きのリスト<ul>で囲った中に

実際の材料を書いていきます。

卵かけご飯という例が非常にわかりやすいです。じゅるじゅる。

 

ulの中に、具体的に必要なものを

<li>で囲っていきます。

このあたりはprogateでも学びました。

 

次に、手順です。

手順は、順番付きのリストになるので、olで囲みます。

f:id:ponnkichi:20180113120816p:plain

 

次に、全然わからなかったdlとかのリストです。

ここでは、「TKGとはなんぞや」という説明をするために使われていました。

f:id:ponnkichi:20180113120932p:plain

「定義」も2番目に大きい見出し、h2。

それをdlで囲い、

dtで「TKGとはなんぞ」と問い

ddで「たまごかけごはんのことであるぞ」と説明しています。

 

ふうむ。

たまごかけごはんのおかげで、かろうじて意味がわかるようなわからないような…?

 

これを実際の画面で見ると、このようになっています。

まずは、箇条書きの「材料」。

f:id:ponnkichi:20180113121246p:plain

ulで囲った部分は黒い点がついていますね。

まさに箇条書き!なるほど!

 

次は、順番のあるリストの「手順」。

 

f:id:ponnkichi:20180113121406p:plain

olで囲った順番のあるリストは

ちゃんと連番になっていますね!

 

そして、いまいちよくわからなかったdl。

見た目はこうです。

f:id:ponnkichi:20180113121512p:plain

dtが「TKG」で、

ddが「たまごかけごはん」。

TKG=たまごかけごはん 

もしくは

TKG→たまごかけごはん

ということでしょうか。

すると、

dt=dd もしくはdt→dd

ということで、ファイナルアンサー??

 

f:id:ponnkichi:20171219214742p:plain「ふうん…?」

(よくわかっていない)

 

しかし、このあたりの内容になると、

多分本で学んでいたらとっくに深い眠りに落ちているくらいだと思います。

動画で視覚的にわかりやすく教えてくれるドットインストールには感謝ですね!

 

まだまだ学習は続きます。