プログラミング

Write模写の解説(ソースコード付き)〜ヘッダーCSS編②

⏰この記事を読むのにかかる時間⏰: 約525

 

どうもトモヤです、この記事は初学者の模写サイトとしておすすめされている、”Write”の模写コーディングの解説記事になります。

前回の記事ではヘッダーのHTMLについて記載していますので、まだ前回の記事を読んでいない方は前回の記事から読んでみることをおすすめしています。

 

今回の記事を読むことで、Writeのヘッダー部分を完成させることができます。

なお、検索機能については別記事で解説していきます。

 

それでは早速やっていきましょう。

 

Write模写の解説(ソースコード付き)〜ヘッダーCSS編②

 

 

今回書いていくCSSは以下の通り

 

a{
text-decoration: none;
}
header{
height: 152px;
margin-top: 50px;
width: 100%;
}
.container{
width: 1040px;
margin: 0 auto;
}
ul{
list-style: none;
}
.header-left{
float: left;
}
.header-right{
padding-top: 82px;
float: right;
}
.gnav{
padding-right: 200px;
}
.gnav li{
float: left;
font-size: 17px;
padding: 0 15px;
position: relative;
}
.gnav li:hover ul li{
visibility: visible;
opacity: 1;
transition: 0.3s;
}
.gnav li a{
display: block;
padding-bottom: 15px;
}
.gnav li a:hover{
color: #c49029;
}
.gnav li ul{
position: absolute;
top: 45px;
left: -5px;
height: 0;
visibility: hidden;
}
.gnav li li{
width: 200px;
border:solid 1px #e6e6e6;
padding: 10px 20px 0 20px;
box-shadow: 0.5px 0.5px #f0f0f0;
opacity: 0;
}
.fas{
margin-left: 15px;
}
.header-left h1{
font-size: 36px;
line-height: 48px;
}
.header-left p{
font-size: 18px;
margin-top: -10px;
}

 

では解説していきます。

 

a{
text-decoration: none;
}
aタグにはデフォルトでリンクの下線が入るので消すための記述です。
header{
height: 152px;
margin-top: 50px;
width: 100%;
}
header部分の外側の高さを152pxに指定、上からの外側余白を50pxに指定、幅は100%に指定しています。
.container{
width: 1040px;
margin: 0 auto;
}
headerの中に作ったcontainerの幅を指定しました。
合わせて中央に寄せるためにmargin :0 auto;を指定。この記述はよく使うので覚えておきましょう。
ul{
list-style: none;
}
リストタグには『・』がついてしまうので消すために書きます。これはよく使う記述です。
.header-left{
float: left;
}
headerの左側を左に寄せるために記述。こうすることで、縦並びになってしまったものを横並びに変えることができます。
.header-right{
padding-top: 82px;
float: right;
}
headerの右側部分を右側に寄せるための記述です、合わせて右側の余白を82px確保しました。
.gnav{
padding-right: 200px;
}
ナビゲーションメニュー全体がみぎに寄りすぎなので右側距離を確保するための記述です。
.gnav li{
float: left;
font-size: 17px;
padding: 0 15px;
position: relative;
}
4つ並んだナビゲーションを横並びに。
文字サイズを17
4つの距離を確保
プルダウンメニューになっているのでposition:relative;を追加
.gnav li:hover ul li{
visibility: visible;
opacity: 1;
transition: 0.3s;
}
ちょっと複雑ですね。
ナビゲーションメニューにカーソルを乗せた時に、表示されるリストに対してのCSS
visibility: visible;と書くことで、カーソルを乗せた時に見えるようにする。
opacity: 1;これは文字の濃さの指定です
transition: 0.3s;表示速度の指定です、フワッと表示されるようになります。
.gnav li ul{
position: absolute;
top: 45px;
left: -5px;
height: 0;
visibility: hidden;
}
absoluteを指定することで、relativeを基準に位置を決定できます。
ここでは.gnav liを基準にtop45 left-5 とすることでプルダウンメニューを実現しています。
visibility: hidden;とすることで、デフォルトでは何も表示されない状態にしています。
何も表示されない => マウス乗せると見えるを実現するための記述です。
.gnav li a{
display: block;
padding-bottom: 15px;
}
リンクタグ(aタグ)の範囲を広げるためにblock要素を指定しました。合わせて内側の下の余白を広げるための記述です。
.gnav li a:hover{
color: #c49029;
}
リンクにカーソルを乗せた時に、色が変わるようにしましょう。
.gnav li li{
width: 200px;
border:solid 1px #e6e6e6;
padding: 10px 20px 0 20px;
box-shadow: 0.5px 0.5px #f0f0f0;
opacity: 0;
}
この四角部分の幅と実線の色を指定。
内側の余白指定
少しだけ影をつけてます。
.fas{
margin-left: 15px;
}
リストタグの横のちっちゃい 『›』 の距離
.header-left h1{
font-size: 36px;
line-height: 48px;
}
文字サイズと高さ
.header-left p{
font-size: 18px;
margin-top: -10px;
}
文字サイズと余白の設定

完成品

 

 

 

ざっくりですが、ここまで完成していれば大丈夫です。

プルダウンが少し難しいですが、次回は検索窓の実装になります。

 

 

ABOUT ME
ともや
人口2万人の北海道の町出身( ͡° ͜ʖ ͡°) WEBライター/プログラミング/フリーランスWebライターです。 新卒公務員→体調崩し退職→転職のため上京→緊急事態宣言→貯金0円→ブログ収益6桁とWEBライターで生活してます💻 都内のシェアハウスでブログ書いてます。 取材やWEBライターのお仕事の依頼はお問い合わせフォームからお願いします🙇‍♂️

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です