【第１１回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

Ariです。きのこ派です。

前回からリアルホームページ作成をしているので、「なんかええ感じ」を目指して使えそうなCSSを勉強していこうと思う。

今回は、カーソルを合わせた時に変化する仕組みを作る。
画像が透けたり、背景の色が変わったりするアレ。

とはいえ、セレクタにちょっと書き足せば簡単にできるので、まずはそもそも画像を透けさせたり背景色を変えたりするプロパティから紹介する。

透過

透過させる時に使うプロパティは「opacity」で、値は0〜1で指定する。0が透明で、1が不透明になるので、たとえば半分透かしたい時は「0.5」とすれば良い。

上から1、0.5、0.1

文字色グレーにしても同じような気がするが、黒以外の文字や画像でも使えるので、覚えておきたい。

背景色

文字色の変更はCSSの初回で紹介したが、背景の色も変えられる。

p{background-color: #DD04AA}

適当な色を指定してみた。今回使うプロパティは「background-color」で、値は文字色と同じくカラーコードや色の名前で指定する。

結果はこちら↓

長い。

背景色以外はデフォルトなので、横いっぱいに広がってしまった。pタグはblockの要素なので何もしないとこうなる。幅を変えたいときはwidthを指定する。

角を丸くする

前回のナビゲーションで背景を設定した時、角を丸めた。

背景設定しただけでは四角。

プロパティは「border-radius」、値はピクセルか%で指定する。ただ、幅をすでに%で設定したからか、どうもうまくいかなかったので、明らかに大きい「50px」で指定している。多分オーバーした分は反映されないようになっているんだと思うけど、ここはちゃんとしたブログを参考にしてくださいごめんなさい、、

nav li{background-color: #b921ff9c;
    border-radius: 50px;}

一応これで表示はできている。

カーソルを合わせた時に反映させる

このような装飾を、カーソルを合わせたときにだけ見えるようにするには、セレクタに「:hover」を追加する。

とはいえスクショを撮るとカーソルが消えてしまうし、動画は載せられないので、ご自身のパソコンでお試しいただければ。。

いつかゲーム作りたいと思っているのでPLAYボタンだけ作ってみた。ボタンの作り方はまた別で記事を書く予定なのでお楽しみに。

↓

opacityは0.8にしてみた。

今回書いたコードは下のような感じ。

<style>
.link_button{display:inline-block;
color: #343434;
background-color: #bb9cff;
font-size: 300%;
font-family: Impact, 'Arial Narrow Bold', sans-serif;
text-align: center;
text-decoration: none;
padding: 10px 20px;
margin: 0 auto;
border-radius: 20px;
transition: .2s;}
.link_button:hover{opacity: 0.8;}
</style>
<a class="link_button" href="https://note.com/make_more">PLAY!</a>

こんなにCSS書いてたんか、、って今なってるとこ。絶対必要ないやつとかあるよなあ。
詳しくは別記事にしようと思うので、今回は「transition」についてだけ紹介して終わりにしようかな。

変化の速度を変える

見出しの通り「transition」はカーソルを合わせた時の変化の速度を調整するプロパティである。.2sに設定すると、0.2秒かけてゆっくり薄くなる。
なんとなく「間」があると楽しいホームページになるかな〜ってことで使っている。

値は秒数で指定するが、0.n秒の時は小数点以下だけ書けばOK。遅すぎるとイライラするかなと思って試しに1秒とかにもしてみたけど、意外といい感じだった。

こういう「変化」は実際のホームページで見てみないとうまく伝わらないと思うので、ぜひ同じようにやってみていただけたら。