モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ

2024/02/08 128 users table 四隅 モダンCSS テーブル アウトライン

モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記... 続きを読む

CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト | コリス

2020/12/14 119 users ホバーエフェクト コリス アニメーション エフェクト CSS

先日、当ブログで紹介したThe State of CSS 2020（紹介記事）に使用されているホバーエフェクトが話題になっていたので、紹介します。 テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションです...記事の続きを読む 続きを読む

[CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック | コリス

2018/07/27 194 users コリス クリックイベント pointer-events 要素

CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、 クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義でき... 続きを読む

これはかっこいい！要素がふわりと浮かんでいるような美しいシャドウを与えるスタイルシート -Box-shadows.css | コリス

2018/07/17 143 users コリス class コンテナ HTML ナビゲーション

Webページやスマホアプリのコンテンツ、カードやナビゲーションや画像などのコンテナに美しいシャドウを簡単に与えることができるスタイルシートを紹介します。 htmlの要素にclassを加えるだけの簡単仕様。ホバーなどの操作...記事の続きを読む 続きを読む

Windows95のごみ箱を実際に作ってみたら何かよくわからないものが出来た | オモコロ

2015/06/10 257 users ゴミ箱 オモコロ マインスイーパー ソリティア hover

こんにちは、最近シドニアの騎士にハマっているマンスーンです。     みなさんの初めてのパソコン体験はいつだったでしょうか？ 僕は小学生の時に父親が仕事で使ってるWindows95のパソコンを触らせてもらったのが初体験でした。 インターネットのイの字すらわからなかったので、マインスイーパーやソリティア、そしてHover!というホバーに乗って旗を集めるゲームをめちゃくちゃプレイしていたのを覚えていま... 続きを読む

2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ | コリス

2015/04/22 323 users コリス グリッド フレームワーク フレンドリー CSS

制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material De... 続きを読む

[CSS]画像やボタンなどのクリック・ホバー時にCSS3アニメーションを簡単に与えることができる -All Animation | コリス

2014/03/03 119 users コリス jQuery Animation class CSS

画像やボタンなどの要素にclassを与えるだけで、さまざまな面白いCSS3アニメーションを利用できるスタイルシートを紹介します。 トリガーにjQueryを使うことで、クリックやホバーなどのアクションでも簡単に利用できます。 All Animation All Animation -GitHub All Animationのデモ All Animationの使い方 All Animationのデモ ... 続きを読む

[CSS]動きがカワイイ！扇形にふわりと広がるツールチップ -Circular Tooltip | コリス

2013/05/07 266 users 扇形 コリス CSS かわいい ツールチップ

マウスのホバーやクリックで、ふわりとアニメーションで扇形にツールチップが表示されるスタイルシートのデモを紹介します。 デモは、2種類あります。 まずは、一つ目のデモ。 Creating a Radial Menu in CSS マウスのホバーで、「扇形のツールチップ」がアニメーションで表示されます。 続いて、二つ目のデモ。上記にインスパイアされたもので、動きが絶妙ですごいです！ Circular ... 続きを読む

[CSS]ユーザーを楽しませる気持ちいいエフェクトがたくさんあるCSS3のデモサイト -CSS3 Playground | コリス

2012/09/25 298 users コリス エフェクト CSS タップ操作 CSS3

ホバーやクリック、タップ操作などで、ユーザーが楽しめる気持ちいいインタラクションを与えるエフェクトをCSS3で実装したデモサイト「CSS3 Playground」を紹介します。 続きを読む

CSS3ビギナーでも分かりやすく解説された、ユーザーが使いやすいボタンを実装するチュートリアル | コリス

2012/02/05 337 users コリス Step チュートリアル アニメーション 実装

CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイル オプション:テキストの選択を不可に まとめ:全スタイルシート Step 1:ボタンの実装 ボタンの実装には、シンプルなテキストリンクを... 続きを読む

[CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ | コリス

2011/11/10 363 users コリス span要素 img要素 CSS アニメーション

ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装し... 続きを読む