Rokiのチラ裏

学生による学習のログ

なんとなくブログタイトルの下にメニューバーを書いた

たまたまはてなブログのカスタマイズを見てみたらHTMLが書けるようだったので、ブログのタイトル下部に特に意味もない簡単なメニューバーを自前で書いて置いてみた。(PCのみ)

<style>
ul,li{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}


.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.headermenu_ul{
    padding-bottom:35px;
}

.headermenu{
    text-align:center;
    list-style:none;
    float:left;
    border-left:solid #aaa 1px;
    
    height:30px;
    line-height:30px;
    width:20%;
    box-sizing:border-box;
}

.headermenu a{
    display:block;
    text-decoration:none;
    color:#aaa
}

.headermenu a:hover{
    color:#eee;
}

.last_border{
    border-right:solid #aaa 1px;
}
</style>

<div class="clearfix">
<ul class="headermenu_ul">
    <li class="headermenu"><a href="#">HOME</a></li>
    <li class="headermenu"><a href="http://roki.hateblo.jp/about">About</a></li>
    <li class="headermenu"><a href="http://roki.hateblo.jp/archive">Recent Entries</a></li>
    <li class="headermenu"><a href="http://roki.hateblo.jp/archive">Archive</a></li>
    <li class="headermenu last_border"><a href="https://github.com/falgon">Github</a></li>
</ul>
</div>

最初にulでリストを書いた時にどうもmargin-leftが入っているかのような挙動をしたため、Reset CSSのulとliのみを適用させた。 Hatena Blogがどのような仕組でどのようなコードでどのようにmarginを取っていてどこで固定しているのかなどは一切見ていないので分からないが、タイトル下の少なくともbottomへのmarginが、取れないようだったのでしょうがなくpaddingで高さを取った。
やらなければならない事が他にある時こそこういう無意味な作業が捗ってしまうのは何でなんだろうなあ。