おはようございます。
Takatoraです。
前回までのおさらい
プログラミングをやろうと思い立つ
↓
言語はなんとなくJavaScriptに決める
↓
JavaScriptの本を買い、HTMLとCSSの知識が必要だと分かる
↓
HTML、CSSの本を買い、初めてHTMLを書く
↑これを書いて
↑ここまでできた(まだ全然だわ)
↓前回の記事です。
見出しを書くか
「さて、実際に画面に現れてくる部分をやってみよう!」
ということで次のページを開けると、
「<h1>タグ?<h2>タグ?」
「む、また見慣れない記号が」
<h1>タグ
<body>〜</body>の中に入れる、見出しを意味するタグです。
見出しは6レベル(<h1>〜<h6>)あり、hに続く数字が大きくなるにつれて重要度が下がります。
「なんだ大したことない。意味が理解できればもう簡単だ」
調子のりが止まりません。
そして思いました。
「うーん、ブラウザを毎回確認するけど、その手間がめんどくさいなー」
そしたらあるじゃないですか、ショートカットキーが!
Windowsでは「F5」だそうです。F5F5、、、覚えておこう。
見出しが完成しました↓
ブラウザ画面↓
テキストの段落を書くぞ
<p>タグの登場です。
「アルファベット1文字だし、機能もシンプルそう」
その通りでした。
<p>タグは、1つの段落を意味するみたいです。
<p>
<p>〜</p>に囲まれたテキストを1つの段落にする。
一点気にすることがある。
それは、<p>〜</p>の間にかけるコンテンツの内容に制限があること。
代表的なタグとその意味
<div>特に意味を持たず、ほかの要素をまとめてグループ化する。
<p>段落
<ol>番号付きリスト
<ul>番号なしリスト
<table>表
まだ意味は分かんなくてもいーや!
テキストの写真↓
ブラウザの写真↓
ナビゲーションを設置
「ナビゲーション?カーナビしか分からんぞ」
<nav>タグってなんだろう?なにかを案内するのかな?
と思って読み進めました。
<nav>
<nav>〜</nav>に含まれるコンテンツが、そのページの主要なナビゲーションであることを示すタグ。
ナビゲーションにはそのサイトの主なページを行き来できるように、複数のリンクを設置する。
「???よく分からん」
まあ、<nav>〜</nav>の中身は次節で作成しるらしいので、その時覚えればいいかな?
ということで、<nav>タグだけ設置して、次の節へ。
番号なしリストまで書いたら少しだけワクワクしてきたぞ!
番号なしリスト(非序列リスト)とは、いわゆる箇条書きのことです。
ナビゲーションに追加する主要ページへのリンクテキストは、<nav>〜</nav>の中に番号なしリストで記述するのが一般的。
「ナビゲーションの意味がやっと分かった!」
どうやらナビゲーションの中にテキストを書くと、リンク先に飛べるようになるらしいです。(たぶん)
<nav>〜</nav>の中に<ul>〜</ul>。その中に<li>〜</li>を入力。
そしてさらにその中に、本書で用意されたテキストを貼り付けました。
<ul>
番号なしリスト。正式名称は非序列リスト。
<li>
<li>〜</li>で書かれたリスト項目を、先頭に「・」が付いた箇条書きにして表示する。
<ul>と<li>の関係
<ul>〜</ul>の直接の子要素は、必ず<li>タグにする。<li>タグ以外のタグ・テキストを、<ul>の直接の子要素にすることはない。
また、<li>タグを単独で使うこともない。
正直、「へー」(あんまりピンときてない)という感じです。
そうゆうルールって事で覚えときましょう!
そして、今回完全したテキストはこちら↓
ブラウザはこちら↓
次回は、リンクと画像の挿入いきます!