はじめに
CSSのhoverを上手く用いることでHPに部分的にこなれ感をプラスできる方法を書きます。
コーディングを学習している際、「どうにかしてこのチープ感を脱したい!」という思いでhoverを使って動きを出すというところにたどり着きました。もし同様の悩みをお持ちの方の一助になれば幸いです。
想定読者
プログラミング初学者でHtmlとCSSで簡単なHP作成に挑戦したけど、「なんだかな〜」というできになってしまった方。
参考サイト
こちらの記事を参考にhoverを導入させていただきました!
https://owl-view.com/css/998/
hover導入前の見た目とコード
まず、見た目はこんな感じです。
次にヘッダー以降、ファーストビューにあたるセクションのコード。
index.html
〜〜 ヘッダー部分を省略 〜〜
<section class="main">
<div class="firstview">
<div class="firstview_contents">
<div class="firstview_docment">Who are U?</div>
<div class="profile_pic">
<img src="img/penguin.jpg" alt="ペンギンの画像" class="mypicture">
</div>
</div>
</div>
</section>
Who are U?と画像部分のCSS
文字はtext-shadowでひと工夫しています。
style.css
.firstview_docment{
color: #ffffff;
text-shadow: 5px 5px 5px blue, -5px -5px 5px orange;
}
.profile_pic{
padding-left: 5rem;
}
hover導入後
先程のコードにhoverの効果を加えます。
index.htmlは変えず、style.cssに:hoverとtransformを追加。
style.css
.firstview_docment{
color: #ffffff;
text-shadow: 5px 5px 5px blue, -5px -5px 5px orange;
transition: .4s;
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
.firstview_docment:hover {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.profile_pic{
padding-left: 5rem;
transition: .4s;
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
このように簡単に動きを出すことができました!
最後に
いかがだったでしょうか?
かなり初歩的な内容ですが、自分のHPに動きがでると嬉しいですよね^ ^
コードもまだまだ未熟かと思いますが、もし決定的な間違いなどございましたらご指摘いただければ幸いですm(_ _)m
ありがとうございました!
↧