0から学ぶIT技術

ローカルのドキュメント載せたり、IT関連の催し物の参加報告

ホームページ制作しています！（35日目）

HTML

f:id:naro3:20161225035732p:plain
こんにちは。

最近忙しく、サーバー関連やIT関係ない企画のことで精一杯でホームページ制作についての進捗がなかったのですが、納期が近くなってきたことと、冬休みに入り、少し時間に余裕ができたので久しぶりの執筆です。

思ったことは進捗が一定でない以上は週間の記事は無理だと言うことです（本当に申し訳ないです）。

サンタさんからの「MacBook」を待ちつつ、書いていきます。

進捗

ほとんどなし。

今回やったこと

一旦デザインから離れて書き方を覚えようと思い。
最近の主流の書き方も少し勉強しました。

その上で某大手会社っぽいヘッダーを作りました。

今回は綺麗に書くことだけを考えました。
疑似要素、擬似クラスも使って動きも1個だけ入れました。
＊あくまで、私なりの書き方ですので本家とは全く違います。

本題

某会社っぽいヘッダー



今回は主流の書き方も少し勉強したのでソース載せます。
コメントアウトで少しだけ解説。

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title>みかん</title>
    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
    <link rel="stylesheet"  href="mikan.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <header class="header">
        <div class="inner">
            <nav class="nav">
                <ul class="cf">
                    <li><a class="icon lemon" href=""></a></li>
                    <li><a href="">Mican</a></li>
                    <li><a href="">mPad</a></li>
                    <li><a href="">mPhone</a></li>
                    <li><a href="">Watch</a></li>
                    <li><a href="">TV</a></li>
                    <li><a href="">Mikan</a></li>
                    <li><a href="">ダンボール</a></li>
                    <li><a class="icon serch" href=""></a></li>
                    <li><a class="icon bag" href=""></a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>
</html>

@charset "UTF-8";

* {
    box-sizing: border-box; 　/*最近主流らしい　paddingとborderをcontentに含められてレイアウトが簡単になる*/
} 

body{
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
}
.cf::after { 　　　/*疑似要素 要素の一部に対して作用する afterは閉じタグの直前に挿入される*/
    content: "";　　/*ここでfloatの浮動化を防いでいる*/
    display: block;
    clear: both;　　　
} 

.header{
    background-color: black;
    color:#fff;   
    height: 44px;
    line-height:44px;　 /*この2行でテキストを中央揃えにしている*/
}

.inner{
    width: 1000px;
    margin: 0 auto;　/*ここにinner要素によりnav要素を中央揃えにしている*/
}

a {
    text-decoration: none;
    display: block;
    color: inherit;
}

a:hover{
    opacity: .7;
}

.nav li{
    float: left;
    width: 10%;
    text-align: center;
}
.icon::before{
    font-family: FontAwesome;　/*このFont-Awesomeというのがアイコンをテキストとして扱える優れもの*/
}

.lemon::before{
    content: "\f094";
}

.serch::before{
    content: "\f002";
}

.bag::before{
    content: "\f290";
}
感想

だいぶ以前よりうまく書けるようにはなったと思います。
特にCSSにおいては圧倒的に重複行がなくなりました。
FontAwesomeもとても便利であるし、いい発見でした。CSSのリセットもレイアウトが組みやすくなりおすすめです。
そろそろデザイン決めないと納期に間に合わないので、エンジンかけていきます！
では、また次の記事でよろしくお願いいたします。
コードなどの質問はコメント欄を活用してください。