前回(あのサイトでさりげなく使われていたCSS小技集)の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりとCSSのみで実現できる方法を書いておきます。Linkもくじインタラクティブ1.マウスオーバーで自動スクロールさせる2.背景を固定し、ゴーストボタンを天地中央に配置ボックス3.ボックスを左右中央に配置し、中を等幅にする4.ページネーション:中を等間隔にする5.自動計算させるUI6.ナビゲーション:下線を中心から開く7.カテゴリリスト:CSSで円と矢印を同時に作る8.タグクラウド:CSSで三角形と円を同時に作るマウスオーバーとキャプション9.グラデーションのキャプションを出す10.一旦モノクロに変更し、マウスオーバー時に色をつける11.テキストと下線を中心から開くインタラクティブ1.マウスオーバーで自動スクロールさせる最近、マウスオーバーで縦長のページを部分的に見せるWordPressテーマが少しづつ出てきました。こちらは簡易的ながらマウスオーバーにて縦長の画像を見せるコードです。hidden;で隠しながらtransitionで遅延させ擬似的にスクロールしているように見せます。画像を背景いっぱいまで広げ固定させ、天地中央に配置したゴーストボタンを配置する見せ方が近年では多くなってきました。cover;で背景をピッタリ配置します。table;を使います。ボタンの視認性を高めるために画像の上に透過色をのせています。20px;}上を利用して、WordPressのアイキャッチ画像を記事ごとに取得し背景に使うことも出来ます。background:url()は記事ごとに変更する必要があるので直接ソース内に記述してもいいですね。0.9;">ボックス3.ボックスを左右中央に配置し、中を等幅にするfloatを使わず横並びと均等配置させたいのでフレキシブルボックスレイアウトを使います。center;で中央に詰めて配置、後はwidthで横幅を指定すれば等幅になります。block;などで解除します。space-around;を使い等間隔にしています。justify-contentは詰め方を指定するプロパティです。break-word;}5.自動計算させる割り切れないような中途半端な数字に対してはcalcで自動計算するという方法もあります。3);といった感じで、残りの98%を3分割します。両端にマージンを入れたくない時や、ボーダー分の幅を引きたい時に。0;}UI6.ナビゲーション:下線を中心から開くtransformプロパティは拡大・縮小・回転などの変形処理を行うことができます。こちらはマウスオーバー時に中心からアンダーラインが広がっていくように見える方法です。scale();を使って開閉させます。rotate(45deg)で矢印をつくり円の上に乗せます。矢印はborder-radiusで滑らかにします。同じスピードで戻るようにtransitionをhover以外にも指定します。linear;}8.タグクラウド:CSSで三角形と円を同時に作る擬似要素を使いbeforeで三角形、afterで円をつくりタグクラウドを作ります。-30px;}マウスオーバーとキャプション9.グラデーションのキャプションを出すマウスキャプションの種類の中でもグラデーションをオーバーレイするのは、まだ少ないかなと思ったので。translateY()でY軸方向に移動させます。通常時はtranslateY(100%)で外に出し、マウスオーバー時に元の位置に戻しています。0;}10.一旦モノクロに変更し、マウスオーバー時に色をつける横並びを実現するdisplay:boxを使い横に並べます。grayscale()の値をマウスオーバー時に0%に変更しグレーを解除させます。scale();を使って開閉させます。10px;}以上、近い将来使う頻度が高くなるかもしれないCSS小技集でした。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2017/08/28CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダーCSSだけで動く「ズームインとズームアウトをフェードしながら交互に繰り返すCSSスライダー」です。作成したデモはこちら。交互にズームインとズームアウトを繰り返し表示して2016/11/28CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。画像や動画の上に動きのある文2014/09/1Web制作で使えた!jQueryプラグインまとめ+起業しました報告が遅れましたが、5月に退社し6月に起業(株式会社コムテ)しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブ2013/09/30まず知っておきたい!初心者でも「アフィリエイト」で稼ぐまとめ28なぜあの人は残業しないのか、帰宅後なにをやっているのか。ブログを継続して書いている理由ってなんだろうか。コメントデータの処理方法の詳細はこちらをご覧ください。