webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

header nav 制作

header制作

  • <header id="header">が1番外側でwidth: 100%; height: 72px; 色のついた帯のようなもの。画面をスクロールしても動かないように、position: fixed; z-index: 100;
  • その内側に、ロゴと、ナビゲーションを入れる箱を作る。width: 980px; height: 72px;。<div class="wrap01">。floatさせた要素を堰き止める堤防みたいなもの。
  • ロゴは、float: left。ナビゲーションは、float right: 。親の.wrap01にはoveflow: hidden;を追加しておく。

logoを追加する

  • logoは、png24bitで用意した。原寸は372px*100px。使いたいサイズの4倍の面積。
  • logoは、h1のbackgroundにする。h1は隠し文字。
  • logoの入れものになる、h1に幅高さを指定する。大きさはロゴの「使いたい」サイズ。186px*50px。
  • background-size: containにして、ロゴが見きれないようにする。coverでも結果は変わらないはずだけれども、念のため。
  • white-space: nowrap, text-indent: 300%, overflow: hidden; でh1の文字要素を追放する。

navigationを作る

  • 1番外側、サイズ指定しない、中身によってサイズを変えるアメーバのような、<nav>をfloat: rightしてしまう。
  • こうしておけばこの中にあるものはすべて右揃えになる。
  • ulの子供、liをfloat: leftする。
  • liのうち、homeだけ字数が少ないので、font awesomeでiconを探して使うことにした。

<div id="header">
<div class="wrap01">
<h1 class="logo">株式会社 clogo</h1>
<nav id="nav">
<ul>
<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i>&nbsp;Home</a><div class="cursor"></div></li>
<li><a href="#">Services</a><div class="cursor"></div></li>
<li><a href="#">Products</a><div class="cursor"></div></li>
<li><a href="#">Company</a><div class="cursor"></div></li>
<li><a href="#">Contact</a><div class="cursor"></div></li>
</ul>
</nav>
</div><!--wrap01-->
</div> 

#header{
width: 100%;
height: 72px;
background: #e3e3e3;
position: fixed;
}
#header .wrap01{
width: 980px;
height: 72px;
margin: 0 auto;
overflow: hidden;
}
#header .wrap01 h1.logo{
float: left;
width: 186px;
height: 50px;
background:url(../img/LOGO.png) no-repeat;
background-size:contain;
margin-top: 11px;
cursor:pointer;
white-space:nowrap;
text-indent: 300%;
overflow: hidden;
}
/*nav
------------------------------------------------------------------------------------*/
.wrap01>#nav{
float: right;
position: relative;
}
.wrap01>#nav>ul{
overflow: hidden;
margin-top: 24px;
}
.wrap01>#nav>ul>li{
float: left;
margin-right: 30px;
}
.wrap01>#nav>ul>li>a{
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-weight: 600;
font-size: 15px;
line-height: 1.6;
color: #777777;
}