#ヘッダートップ画面を作ろう
今回はワイヤーフレームの１枚目を作成していきたいと思います！
index.html
<body>
<header>
<div class="header-logo">
<a href="/index.html"><img src="image/logo.jpg" height="50px" width="50px"></a>
</div>
<div class="header-list">
<nav>
<ul>
<li><a href="#profile"><i class="fas fa-user-alt"></i>PROFILE</a></li>
<li><a href="#works"><i class="fas fa-book-open"></i>WORKS</a></li>
<li><a href="#skill"><i class="fas fa-pencil-alt"></i>SKILLS</a></li>
<li><a href="#contact"><i class="far fa-envelope"></i>CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<div class="main-visual">
<h1>PAPAPAPE's PORTFOLIO</h1>
<img src="image/mein-visual.jpg" width="100%">
</div>
</body>
style.css
/* 共通 */
body, h1, h2, h3, p, ul{
margin: 0;
font-size: 20px;
}
a{
text-decoration: none;
color: black;
}
/* ヘッダー、トップ */
header{
height: 70px;
width: 100%;
background-color:rgb(255, 255, 255);
opacity: 0.7;
position: fixed;
top: 0px;
z-index: 10;
}
.header-logo{
float: left;
margin: 10px 400px 10px 30px;
}
.header-list li{
font-size: 18px;
list-style: none;
float: left;
line-height: 70px;
padding-right: 50px;
}
.main-visual h1{
font-size: 5rem;
position: absolute;
top: 50%;
left: 250px;
}
###工夫したこと、苦労したこと
#####html
①ヘッダーのロゴとリストにa hrefを付けたことで任意の場所に飛べるようにした
②ヘッダーのリストにfont awesomeを使いポップな見た目に
#####css
①ヘッダーの上に隙間ができてしまう問題
→検証ツールをデフォルトでmarginが設定されていることが判明。そのため一番上にbody,h1,h2,h3,p,ulにmargin0を設定した。検証ツール便利すぎ、神!!!
②シンプルなサイトなので少しでもおしゃれにするためにヘッダーを上に固定して少し透けさせた
main-visualのh1が中々真ん中に来なくて大変だった
→position:absoluteからtop:50%,left:50%だと少し右寄りになるのでpadding-leftを少しずつやるしかなくてだるかった、ほかに楽なやり方はあるんだろうか⁇
#そして完成したものがこちら！
シンプルだけどワイヤーフレームの時よりおしゃれに見えるううううう
やはり天才かもしれん(すぐ調子乗る)
フォントをもうちょいシャレオツにしたいけどそれは余裕があったらやります。
おしゃれなフォントってなにがあるんだろ
#おわりに
いやーー4分の1完成しただけでこのうれしさだとすると完成したらうれしさで爆発するんじゃないかって恐怖で怯えています
ちなみにトップ画像はパワポのデザインというところで自動生成された画像です、パワポすごい
では、それでは～