2018年7月

CSS

CSSでもっと魅力的に!動きのある下線をグラデーションで作ってみよう

今回作りたいもの テキストにグラデーションで下線を引き、マウスオーバーでグラデーションが縦方向に伸びる動きをつけたいと思います。 HTMLの準備 表示したいテキストを自由に書きます。 今回は、h1タグとpタグでそれぞれ書きました。 タグは自由です。divでもh2でも。

下線を引きたいテキスト部分にクラス名をつけます。 ここでは class=”underline” としました。 クラス名も自由です。 テキストにCSSで下線を引く テキストにグラデーションの下線を引くには background を利用します。

1. 背景色はlinear-gradientを使用し、中身は(角度, 開始色 開始位置, 終了色 終了位置)となっています。 今回は120度の角度で、テキストの頭(0%の位置)を水色に、テキストの最後(100%の位置)を紫にしています。 2. background-repeatは、今回は繰り返さないのでなしにしています。 ここまでの2つで、テキストに対し、高さいっぱいのグラデーションができました。↓↓↓ 3. 下線っぽくするには、background-sizeで高さを調整します。 background-sizeは(横のサイズ 縦のサイズ)となっているので、 今回は(横100% 高さ0.4em)としています。 ここでは単位は%, emのほか、pxも使用できます。 ここまでの1〜3で、上から下線ができました。↓↓↓ 4. 最後に、テキストの下に下線を引きたいので、background-positionで位置を調整します。 background-positionは(左からの開始位置 上からの開始位置)となっており、 今回は(左から開始 上は90%の位置から開始)としています。 これも単位は%やpxなどを使用できます。 動きをつけよう せっかくなので、下線部分のテキストにマウスオーバーしたら、下線が広がる動きをつけます。

ホバー時に、background-sizeの高さの方を90%にします。(100%でもいいですよ。) するとこんな感じ↓↓↓ カクカクした感じになるので、これをスムーズにするにはtransitionを使用します。 transitionは動きをスムーズにできる underlineにcssでtransitionを設定追加します。

ここではbackground-sizeに0.25秒かけて高さを90%まで広げる命令です。 *0秒だと、さっきのカクカクした動作。 そして完成。 […]

お知らせ

当社のCSR活動に対し、(一財)マルチメディア振興センター様より感謝状をいただきました

当社代表川島が、一般財団法人マルチメディア振興センターから感謝状をいただきました。 2017年度において、インターネットの安心・安全教室活動に取り組み、都内の学校・団体等の児童生徒、保護者、教員に向けた講演活動に評価をいただき、今回の表彰となりました。 この活動は、総務省、文部科学省ご支援のもと、「e-ネットキャラバン」として、インターネットやスマートフォンによるいじめ、ネット依存、個人情報漏洩、誘い出し、なりすまし、著作権の問題を未然に防ぐことを目的とする啓蒙活動です。