ド素人がブログのメニューバーで使うCSSに挑戦した!一つ一つ読み解くと意外と簡単だぞ!

みなさん、こんばんは。

突然ですがみなさまはブログのメニューバーってどうしているでしょうか?

私のブログにはメニューバーがありません。

理由は簡単、作り方がわからないから。

では作り方を調べてみよう!と思って軽く調べたらHTMLやらCSSというプログラムみたいなものを書かないといけないようです。

プログラムとか一回も書いたことないから無理ばい。

f:id:arimurasaji:20170824221153p:plain

「あきらめたらそこで試合終了ですよ」

安西先生のありがたいお言葉を思い出したので、HTMLとCSSによるメニューバー作りに挑戦してみることにしました。

 

今回はCSS編です。

HTML編はこちらをご覧ください。

arimurasaji.hatenadiary.jp

 

 

こちらが今回例で使うHTMLと表示画面です。

HTML

<ul class="menu">
<li><a href="http://arimurasaji.hatenadiary.jp/">top1</a></li>
<li><a href="http://arimurasaji.hatenadiary.jp/">top2</a></li>
</ul>

 

表示画面f:id:arimurasaji:20170823210936p:plain

このHTMLにCSSでデザインを付けていきます。

CSSを書く場所は"デザイン>カスタマイズ(レンチマークのボタン)>デザインCSS"にあります。

f:id:arimurasaji:20170823211647p:plain

f:id:arimurasaji:20170823211849p:plain

 

ではまずデザインCSSに以下のように文字を打ち込んでみましょう。

CSS

.menu {
list-style: none;
}

 

表示画面

f:id:arimurasaji:20170823211451p:plain

これで"・top1"が前についている・が消えて"top1"になりました。

.menuは「menuというグループに対して何か変更するよ」という意味です。

変更する内容については{ }の間に書きます。

list-styleは「リストの先頭に表示するマーカーについて変更するよ」という意味です。

noneは「なし」という意味です。

この書く順番は英語のSVOのように決まっています。

「なにに、どのように、どのくらい」という語順です。

また、".menu"の"."、"list-style: none;"の":"と";"は絶対に入れてください。

どんなCSSを書く際も絶対に必要なみたいです。

あとわざと3段にしていますが、見やすくするためです。

".menu {list-style: none;}"

このように1段に書いても何の問題もありません。

CSSの基礎はこちらのサイトがわかりやすかったです。

スタイルシート(CSS)の基本的な書き方【初心者向け】 | TechAcademyマガジン

 

 

次に下線を消そうと思います。

CSS

.menu {
list-style: none;
}

 

.menu li a {
text-decoration: none;
}

 

表示画面

f:id:arimurasaji:20170823214305p:plain

これで下線を消すことが出来ました。

".menu li a" で「menuというグループの中のリスト(list item)の中のリンク(a href)に対して何か変更するよ」と指令を出しています。

"text-decoration"で「テキストに対して下線や上線などを変更するよ」という指令を出しています。

"none"は先ほどと同じく「なし」という意味です。
 

 

次にこれらテキストを画面の真ん中に持ってこようと思います。

CSS

.menu {
list-style: none;
}

 

.menu li {
text-align: center;
}

 

.menu li a {
text-decoration: none;
}

 

表示画面

f:id:arimurasaji:20170823215603p:plain

 これで真ん中に持ってくることができました。

".menu li"で「menuというグループ内のli(list item)に対して変更するよ」と指令を出します。

"text-align"で「左寄せや中央寄せなどの変更をするよ」と指令を出し、"center"で「真ん中」に指定しています。

 

 

次にわかりやすくするため色を付けておきます。

CSS

.menu {
list-style: none;
}

 

.menu li {
text-align: center;
background-color: #333;

}

 

.menu li a {
text-decoration: none;
}

 

表示画面

f:id:arimurasaji:20170823220630p:plain

このようにtopボタンの背景がグレーになりました。

"background-color"で「背景の色を変更するよ」と指令を出し、"#333"でグレー色に指定しています。

 

 

次にボタンの幅が広すぎるので狭くします。

CSS

.menu {
list-style: none;
}

 

.menu li {
text-align:center ;
background-color: #333;
width: 400px;
}

 

.menu li a {
text-decoration: none;
}

 

 表示画面

f:id:arimurasaji:20170823221650p:plain

 これでボタンの幅が狭くなりました。

"width"で「幅を変更するよ」と指令をだし、"400px"で400pxに指定しています。

 

 

次にこれらのボタンを横並びにします。

CSS

.menu {
list-style: none;
}

 

.menu li {
text-align:center ;
background-color: #333;
width: 400px;
float: left;
}

 

.menu li a {
text-decoration: none;
}

 

表示画面 f:id:arimurasaji:20170823222200p:plain

このようにtopボタンが横並びになりました。

"float"で「左か右に寄せて配置します」と指令を出して、"left"で左に寄せて配置すると指定します。

すると左寄せで後に続く内容は右に並んでいくそうです。

 

はい、不格好ですが、基本的なメニューバーの形ができました。

案外簡単だったと思いませんか?

今回紹介した方法はこちらのサイトを参考にさせていただきました。

uxmilk.jp

めちゃめちゃわかりやすかったです。

私の下手糞な解説じゃわからなかったという方はそちらをお勧めします。