CSSとHTMLだけでできる、問い合わせ情報のデザインをご紹介します。Javascriptを使わないシンプルなコードなので、簡単で読み込みスピードも早いデザインですよ。
レスポンシブ対応HTMLとCSSで作るお問合せボタン【webデザイン】
今回は例としてメールアドレス、電話番号、所在地の3つのボタンを作ります。フッターや会社概要ページに実装すると良いかもしれません。
最初に全てのコードをお見せして、後から細かく説明しますので、コードだけ知りたい方はコピーしてすぐに使ってみてください！
HTML↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
<div class="contact-info">
<div class="card">
<i class="icon fas fa-envelope"></i>
<div class="card-content">
<h3>Email</h3>
<span>email@sddress.com</span>
</div>
</div>
<div class="card">
<i class="icon fas fa-phone"></i>
<div class="card-content">
<h3>Phone Number</h3>
<span>000-0000-0000</span>
</div>
</div>
<div class="card">
<i class="icon fas fa-map-marker-alt"></i>
<div class="card-content">
<h3>Location</h3>
<span>Tokyo Japan</span>
</div>
</div>
</div>
</body>
</html>CSS↓
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans",sans-serif;
}
body{
height: 100vh;
background: url(bg.jpg) no-repeat center;
background-size: cover;
display: flex;
align-items: center;
}
.contact-info{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card{
position: relative;
flex: 1;
max-width: 300px;
height: 140px;
background-color: #DE345C;
margin: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.icon{
font-size: 32px;
color: #FFE57A;
transition: .3s linear;
}
.card:hover .icon{
transform: scale(4);
opacity: 0;
}
.card-content h3,
.card-content span{
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
opacity: 0;
}
.card-content h3{
top: 20px;
text-transform: uppercase;
color: #FFE57A;
}
.card-content span{
bottom: 20px;
color: #ffffff;
font-weight: 500;
}
.card:hover h3{
opacity: 1;
top: 46px;
transition: .3s linear .3s;
}
.card:hover span{
opacity: 1;
bottom: 46px;
transition: .3s linear .3s;
}
@media screen and (max-width:900px){
.card{
flex: 100%;
max-width:500px;
}
}CSSの解説
その1 Fontawesomeのアイコンを使う
フォントオウサムのページに行きCSSのリンクを取得します。今回使ったCSSはココの
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css
です。これをコピーしてタイトルタグの下にlinkタグで紐付けます。
その2 動き方の順番
構造を説明すると、cardのボックス（ピンクの背景）にホバーする（マウスが乗る）と、3つの要素が動き出します。<i>タグと<h3>タグと<span>タグです。一緒に動き出しますが、<h3>と<span>タグの動き出すタイミングを0.3秒遅らせることで、後からヌルッと出てくるように見えています。まずは<i>タグについて解説します。
その3 <i>タグ（アイコン）の動き
.icon{
font-size: 32px;
color: #FFE57A;
transition: .3s linear;
}ここではデフォルトのアイコンの大きさから、font-size:32pxで色は#ffe57aになるまで、一定のスピードで0.3秒かけて変化する設定をしています。最初のアイコンの大きさを変えたい、もしくはもっと早く変化させたい時はここをいじりましょう。
.card:hover .icon{
transform: scale(4);
opacity: 0;
}transform:scale()はカッコの中の数値分倍にするcssです。opacityは透明度を意味し値が0なので透明（非表示）になります。ですので、cardにオンマウスすると、アイコンの大きさが4倍になって消えるという動きになります。
その4 <h3><span>タグの動き
初期位置の設定
.card-content h3,
.card-content span{
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
opacity: 0;
}
.card-content h3{
top: 20px;
text-transform: uppercase;
color: #FFE57A;
}
.card-content span{
bottom: 20px;
color: #ffffff;
font-weight: 500;
}まずこの３つで初期の位置を設定しています。共通するcssは一番上に、それぞれ固有の要素はそれぞれで記述しています。共通部分からみていきましょう。
position:absolute;でcardのボックスを基準に配置する設定をします。left:50%;でcardボックスの左から半分、つまり真ん中から要素が始まるように設定します。そしてtransform:translateX()で<h3>、<span>それぞれの要素の50%（半分）の大きさ分、水平方向に左（X軸でいうマイナス）に動かします。あとはフォントサイズを指定して非表示にしておきます。
<h3><span>固有のcssは説明不要かと思いますが、text-transform:uppercase;は全ての文字を大文字に変換するというcssです。
ホバーしたときの動き
.card:hover h3{
opacity: 1;
top: 46px;
transition: .3s linear .3s;
}
.card:hover span{
opacity: 1;
bottom: 46px;
transition: .3s linear .3s;
}ホバーした時にh3は上から46px、spanは下から46pxのところに移動します。移動の開始時間と移動時間をtransitionで設定しています。transition: .3s linear .3s; 最初の.3sはduratinと言って変化する時間を設定しています。あとの.3sはdelayと言って動き始めるまでの時間を設定します。ですので、この場合、cardにホバーした0.3秒後に動き始めて、0.3秒間一定のスピードで各々の位置までだんだんと表示されていく。ということになります。
その5 レスポンシブにする
@media screen and (max-width:900px){
.card{
flex: 100%;
max-width:500px;
}
}最後に指定のメディアクエリでスマホサイズの設定をしたら完成です。flex:100%にすることで自動的に縦並びになります。
まとめ
いかがでしたでしょうか？HTMLとCSSだけでここまで動くデザインが表現できるなんてすごいと思いませんか？最後に今回のキーポイントをまとめて終わります。
transition: .3s linear .3s;transitionのcssはtransition: dutation(変化時間) function(変化度合い) delay(開始時間);
の順で設定すること！
以上皆さんの良きコーディングライフを！
