独学公務員)Takatora 電車運転士や古民家などなど

高卒で電車運転士しながら独学で県庁のキャリアへ転職。築100年の古民家に住む。現在無職…どうするTakatora

【HTML基礎】地味だけど大切な見出し、段落、ナビゲーションを覚えた

おはようございます。

Takatoraです。

 

  

前回までのおさらい

 

f:id:Takatora:20181216102440j:plain

 

プログラミングをやろうと思い立つ

言語はなんとなくJavaScriptに決める

JavaScriptの本を買い、HTMLとCSSの知識が必要だと分かる

HTML、CSSの本を買い、初めてHTMLを書く

f:id:Takatora:20181216220941j:image

↑これを書いて

f:id:Takatora:20181216220928j:image

↑ここまでできた(まだ全然だわ)

↓前回の記事です。

www.dokugaku-komuin.com

 

 

見出しを書くか

 

f:id:Takatora:20181216102627j:plain


 「さて、実際に画面に現れてくる部分をやってみよう!」

 

ということで次のページを開けると、

 

「<h1>タグ?<h2>タグ?」

 

「む、また見慣れない記号が」

 

<h1>タグ

<body>〜</body>の中に入れる、見出しを意味するタグです。

 

見出しは6レベル(<h1>〜<h6>)あり、hに続く数字が大きくなるにつれて重要度が下がります。

 

「なんだ大したことない。意味が理解できればもう簡単だ」

 

調子のりが止まりません。

 

そして思いました。

 

「うーん、ブラウザを毎回確認するけど、その手間がめんどくさいなー」

 

そしたらあるじゃないですか、ショートカットキーが!

 

Windowsでは「F5」だそうです。F5F5、、、覚えておこう。

 

見出しが完成しました↓

f:id:Takatora:20181216221113j:image

ブラウザ画面↓

f:id:Takatora:20181216221134j:image

 

テキストの段落を書くぞ

 

f:id:Takatora:20181216102754j:plain

 

<p>タグの登場です。

 

「アルファベット1文字だし、機能もシンプルそう」

 

その通りでした。

 

<p>タグは、1つの段落を意味するみたいです。

 

<p>

<p>〜</p>に囲まれたテキストを1つの段落にする。

 

一点気にすることがある。

 

それは、<p>〜</p>の間にかけるコンテンツの内容に制限があること。

 

代表的なタグとその意味

 

<div>特に意味を持たず、ほかの要素をまとめてグループ化する。

<p>段落

<ol>番号付きリスト

<ul>番号なしリスト

<table>表

 

まだ意味は分かんなくてもいーや!

 

テキストの写真↓

f:id:Takatora:20181216221242j:image

ブラウザの写真↓

f:id:Takatora:20181216221253j:image

 

 

ナビゲーションを設置 

f:id:Takatora:20181216102818j:plain

 

「ナビゲーション?カーナビしか分からんぞ」

 

<nav>タグってなんだろう?なにかを案内するのかな?

 

と思って読み進めました。

 

<nav>

<nav>〜</nav>に含まれるコンテンツが、そのページの主要なナビゲーションであることを示すタグ。

 

ナビゲーションにはそのサイトの主なページを行き来できるように、複数のリンクを設置する。

 

「???よく分からん」

 

まあ、<nav>〜</nav>の中身は次節で作成しるらしいので、その時覚えればいいかな?

 

ということで、<nav>タグだけ設置して、次の節へ。

 

番号なしリストまで書いたら少しだけワクワクしてきたぞ!

 

f:id:Takatora:20181216102929j:plain 

 

番号なしリスト(非序列リスト)とは、いわゆる箇条書きのことです。

 

ナビゲーションに追加する主要ページへのリンクテキストは、<nav>〜</nav>の中に番号なしリストで記述するのが一般的。

 

「ナビゲーションの意味がやっと分かった!」

 

どうやらナビゲーションの中にテキストを書くと、リンク先に飛べるようになるらしいです。(たぶん)

 

<nav>〜</nav>の中に<ul>〜</ul>。その中に<li>〜</li>を入力。

 

そしてさらにその中に、本書で用意されたテキストを貼り付けました。

 

<ul>

番号なしリスト。正式名称は非序列リスト。

 

<li>

<li>〜</li>で書かれたリスト項目を、先頭に「・」が付いた箇条書きにして表示する。

 

<ul>と<li>の関係

<ul>〜</ul>の直接の子要素は、必ず<li>タグにする。<li>タグ以外のタグ・テキストを、<ul>の直接の子要素にすることはない。

 

また、<li>タグを単独で使うこともない。

 

正直、「へー」(あんまりピンときてない)という感じです。

 

そうゆうルールって事で覚えときましょう!

 

そして、今回完全したテキストはこちら↓

f:id:Takatora:20181216221509j:image

 

ブラウザはこちら↓

f:id:Takatora:20181216221533j:image

 

次回は、リンクと画像の挿入いきます!