みなさん、こんばんは。
みなさまはブログのメニューバーってどうされているでしょうか？
メニューバーがあるとかっこいいですよねー
でも私のブログにはまだメニューバーというものが存在しません。
なぜかって？
作り方がわからないからです。
調べてみるとメニューバーを作るにはHTMLやCSSを使うみたいですし。
お恥ずかしながら、私HTMLもCSSも全くわかりません。
「CSS？どこかの企業の略ですか？」と言ってしまうレベルです。
こんな何もわかっていない私ですが、メニューバーのHTMLに挑戦してみました！
何事も挑戦あるのみ！
今回はHTML編です。
CSS編はこちらをご覧ください。
HTMLはド素人でもわかる！
結論から言いますと、意外と簡単でした。
一つ一つのコードを読み解いていくと理解しやすいかと思います。
そんなわけでド素人な私ですが、コードの一つ一つの意味を読み解きながら解説しようと思います。
本当にド素人なので間違っているところもあるかもしれませんがご了承ください。
メニューバーによく使われているHTML
調べてみるとメニューバーによく使われているHTMLはこんな感じでした。
HTML
<div class="menu">
<ul>
<li><a href="https://www.yahoo.co.jp/">yahoo</a></li>
<li><a href="https://www.google.co.jp/">google</a></li>
</ul>
</div>
表示画面
はい、意味不明な文字列がもれなくたくさん出てきましたね。
一つ一つゆっくりと読み解いていきます。
また、全然メニューバーの形してないじゃないか！と言われそうですが、形などデザインに関してはCSSの方で設定するようです。
CSSにも挑戦してみたのでよかったらご覧ください。
<li></li>と<ul></ul>
まずは<li></li>と<ul></ul>について読み解いていきます。
上から順番じゃないのかよと言われそうですが、このほうが理解しやすいので。
<li>はList itemの略です。
名前の通りリスト項目を記述する時に使用します。
<li>が始まりで</li>が終わりを意味しています。
なのでこれらの間に表示したいリストを書き込みます。
どんな時もこの"/"が終わりの時に使われるみたいです。
<li>を使用する際には<ul></ul>か<ol></ol>の間に記述します。
<ul>はUnordered listの略です。
リスト項目に順序を付けないときに使用します。
<ul>を使い順序をつけないと以下のような表示になります。
・ビアンカ
・フローラ
一方の<ol>はOrdered listの略です。
こちらはリスト項目に順序を付ける場合に使用します。
<ol>を使い順序をつけると以下のような表示になります。
1.ビアンカ
2.フローラ
これだけではわかりにくいと思うので実際の使用例を示します。
以下のHTMLを入力してみます。
<ul>
<li>ビアンカ</li>
<li>フローラ</li>
</ul>
すると以下のような表示になりました。
- ビアンカ
- フローラ
では<ol>も同様に以下のHTMLを入力してみます。
<ol>
<li>ビアンカ</li>
<li>フローラ</li>
</ol>
すると以下のような表示になりました。
- ビアンカ
- フローラ
こちらのサイトを参考にさせていただきました。
<a href=""></a>
次に<a href=""></a>についてです。
<a href=""></a>はリンクを作る場合に使用します。
""の間にリンク先のURL、<a href="">と</a>の間にリンク先を紹介する文を入れます。
例えば
<a href="http://arimurasaji.hatenadiary.jp/">トップページ</a>
とすると以下のようになりこのブログのトップページへのリンクになります。
こちらのサイトを参考にさせていただきました。
<div class></div>
あともう一息です。
最後に<div class></div>についてご説明します。
<div>はdivision (区分)の略です。
<div>はHTMLコードのある範囲を一つのグループ・かたまりにしたいときに使います。
例えば
<div>
<p>ハッサン</p>
<p>ヤンガス</p>
</div>
とするとハッサンとヤンガスは一つのグループ・かたまりになります。
*ここで出てきた<p></p>はparagraphの略で、囲まれた部分が一つの段落であることを示します。
ではclassとはなんでしょうか？
これは複数のdivを区別するためにつける名前みたいなものです。
例えば
<div class="イケメン">
<p>テリー</p>
<p>ククール</p>
</div>
<div class="ゴリラ">
<p>ハッサン</p>
<p>ヤンガス</p>
</div>
これでイケメングループとゴリラグループを区別することができるようになりました。
機械じゃイケメンかゴリラか区別できないからね、ちゃんとコードを書いて区別してあげないとね。
こちらのサイトを参考にさせていただきました。
HTMLのdiv classとは？５分でわかる事例付き解説｜Udemy メディア
まとめ
いかがでしたでしょうか？
HTMLも意外と簡単だったのではないでしょうか？
もしこのサイトで分からないのであれば私の文章が悪いだけです。
HTMLは悪くありません、難しいと決めつけないであげてください。
参考に上げているサイトを見ればわかりやすいので簡単に理解することが出来ると思います。
じゃあ、なんでお前が解説しているんだよと言われてしまいそうですが、下手でも解説していると覚えるかなと思って。
あと忘れた時に自分で書いた文章だとすぐに思い出せるかなと思って書いてみました。
まあいわゆる忘備録ですね。
ここまでお付き合いありがとうございました。
「こんな馬鹿でもHTMLを理解することができるんか！ならワシもできるわ！」と思っていただけたら幸いです。
少しでもHTML嫌いがいなくなりますように。
