ちょっと差をつけよう!?【HTML】オッシャレーな便利機能【CSS】

ちょっと差をつけよう!?【HTML】オッシャレーな便利機能【CSS】

こんにちは!bibiです。

今回は、テキスト選択時のハイライトのカラーを変更する小技をこっそりお教えします!

工程は超カンタン!

cssにこちらを記述します。今回はハイライトに鮮やかな赤色を指定。

これでOK!どうでしょう!この1ステップのみのお手軽さ!!!

ここに例えば、文字色自体をこのように変えたり

P要素のみに限定してハイライトをつけたり

意外と自由度高く行うことができます!

これであなたもハイライト・マスター!!!!

初心者でも安心!マウスホバーエフェクトが100種類も!?超絶使えるhover.cssのご紹介!

こんにちは!bibiです。

今回は、ホバーするだけでいろいろと動きを出し、
リニューアルなどに超絶使えるhover.cssの使い方です。
今回は、ボタンを作って、動かしてみましょう。

行程はわずかにこの4つだけ。

1.をダウンロードして所定の場所に設置
こちらのサイトで、一括ダウンロードから直接ダウンロードします。
使用するのはhover.cssだけで大丈夫です。
ダウンロードしたら、cssフォルダに置けばOK!

2.hover.cssのリンクをhtmlに記述
続いてこの記述を、htmlの所定の位置に記述します。簡単ですね!

3.hover.css用のタグを設置
次に、ボタンを作るコードを、所定のcssに記述します。

4.htmlに、ボタンを設置する
最後に、このコードをボタンに記述します。

これで準備はOK!あとはclassの部分に動きのクラスを付与するだけで、簡単に動かすことができます。

hover時に”震える”ボタン

hover時に”左から右に色がつく”ボタン

このクラスは複数記述することもできます。ちなみに最後のコードは、ボタンではなくてもimgやh1、pタグなどにもつけることはできるので、簡単に動きを出すことができます!

こんな感じですね。

いかがでしょうか?JavaScriptを使わないので、シンプルにできますよ。
動的なWeb作成ライフを満喫しましょう!