実践編として、実際によくある感じのトップビューを作ってみようじゃないか、というページです。ブロック単位でまとめてあるので、他のサンプルと組み合わせて素材を入れ替えることでそのままサイトに使うことも可能です。
成果物
今回作るのはこんな感じのトップビューです。
Extend Yourself.
背景画像の上に文字、アイコン、ボタンを配置し、その下にメニューが並んでいます。ホバーでそれぞれ少し動きをつけてあります。
素材を用意する
画像は下記を使用します。
アイコンはfont awesomeのアイコンを使います。
font-awesomeについてはこちらの記事をご参照ください。→cssライブラリでwebサイトにアイコンを埋め込む方法
ボタンは先に作っちゃいましょう。まずはaタグで文字を閉じます（リンクは仮にトップに飛ばしてます）。
お試し無料体験
これをCSSで装飾していきます。
paddingとmarginで余白を作り、border-radiusで角に丸みをつけ、background-colorで背景色を指定し、colorで文字色を変え、cont-sizeで文字の大きさを修正、text-decorationでリンクの下線を消しています。opacityで透明度（1が最高）、変化にかかる時間はtransitionで指定。
マウスホバー時の挙動としては背景を白、枠線をオレンジ色にしたいので、最初からborderを指定しておかないとボタンがホバー時だけ大きくなってしまいます。
.conversion-button{
padding:10px 15px;
border:1px chocolate solid;
border-radius:5px;
background-color:chocolate;
font-size:30px;
color:white;
text-decoration:none;
transition:.5s;
opacity:0.7;
}
.conversion-button:hover{
background-color:white;
color:chocolate;
opacity:1;
}背景画像を設定する
divタグで枠を設定し、この背景に画像をセットします。
画像だけを半透明にしたいので、ここでは画像の上にrgba指定（背景以外を透明にしない）で一枚レイヤーをかけて、その中にテキストを表示するようにしています。
<！-- html -->
<div class = "back-image">
<div class = "white-cover">Text</div>
</div>
/*CSS*/
.back-image{
background-image:url("../streetwear.jpg");
background-size:cover;
}
.white-cover{
background:rgba(255,255,255,0.5);
width:100%;
height:350px;
}要素を配置する
背景画像の上に要素を置き、この位置を調節していきます。
文章は見出し扱いとし、フォントは45pxの太字、それ以外の余計な装飾は削除します。アイコンも小さすぎるのでフォントサイズを20pxにし、ついでに色とhover時のアニメ（font-awesomeにもともと用意されている）を指定しておきます。
Extend Yourself.
<！-- html(アイコン部分) -->
<i class="fab fa-facebook-square faa-pulse animated-hover icon"></i>
<i class="fab fa-twitter-square faa-shake animated-hover icon"></i>
/*CSS*/
.topview-text{
font-size:45px;
font-weight:bold;
}
.icon{
font-size:40px;
color:dodgerblue;
margin:20px 5px;
opacity:0.7;
}
.icon:hover{
color:darkblue;
opacity:1;
}
要素はどれもinlineなので、親要素のdivにtext-alignをかけて中央に寄せることができます。縦方向はmarginで調節します。
Extend Yourself.
メニュー追加
最後にメニューを追加しますが、これはposition:absoluteのメニューを下にくっつけてflex-boxにします。position:absoluteを動かすためには親要素がrelativeである必要があります。
.relat{
position:relative;
}
.menu-box{
display:flex;
position:absolute;
bottom:0;
left:0;
width:100%;
}
.menu-item{
opacity:0.5;
transition:0.5s;
border:grey dotted 1px;
flex:2 0 20%;
cursor:pointer;
}
.menu-item:hover{
opacity:1;
}Extend Yourself.
これで完成ですが、機能を別々にしていたdivを合併させて、コードとしては下記のようになります。
<！-- html -->
<div class = "back-image">
<div class = "white-cover">
<p class = "topview-text">Extend Yourself.</p>
<a class = "conversion-button" href = "#top">お試し無料体験</a><br>
<i class="fab fa-facebook-square faa-pulse animated-hover icon"></i>
<i class="fab fa-twitter-square faa-shake animated-hover icon"></i>
<div class = "menu-box">
<div class = "menu-item">Main Menu</div>
<div class = "menu-item">curriculum</div>
<div class = "menu-item">Map</div>
</div>
</div></div>
/*CSS*/
.conversion-button{
font-size:30px;
padding:10px 15px;
border:1px chocolate solid;
border-radius:5px;
background-color:chocolate;
color:white;
text-decoration:none;
transition:.5s;
opacity:0.7;
}
.conversion-button:hover{
background-color:white;
color:chocolate;
opacity:1;
}
.back-image{
background-image:url("https://sunagitsune.com/wp-content/uploads/2019/04/streetwear-3749344_1280-650x433.jpg");
background-size:cover;
position:relative;
text-align:center;
}
.white-cover{
background:rgba(255,255,255,0.5);
width:100%;
height:350px;
}
.topview-text{
font-size:45px;
font-weight:bold;
margin:60px 0 0 0;
display:inline-block;
}
.icon{
font-size:40px;
color:dodgerblue;
margin:20px 5px;
opacity:0.7;
}
.icon:hover{
color:darkblue;
opacity:1;
}
.menu-box{
display:flex;
position:absolute;
bottom:0;
left:0;
width:100%;
}
.menu-item{
opacity:0.5;
transition:0.5s;
border:grey dotted 1px;
flex:2 0 20%;
cursor:pointer;
}
.menu-item:hover{
opacity:1;
}
コメント