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

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

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

東浩紀『訂正可能性の哲学』｜KIRA Takayuki

2023/09/08 14 users 哲学 東浩紀 ゲンロン ウィトゲンシュタイン アーレント

つい昨日に発売された、東浩紀『訂正可能性の哲学』（ゲンロン、2023年8月）と『観光客の哲学　増補版』（ゲンロン、2023年6月）を読んだ。 私はこの著者のよい読者ではない。『訂正可能性の哲学』もよい本だと思えなかった。ルソー、プラトン、ポパー、ウィトゲンシュタイン、アーレント……といった有名な哲学者の代表作... 続きを読む

プロ絵師が「iPad Pro 2022」をレビュー！　「ホバー以外に得るものがなく、ホバーのために得る価値がある」という境地に至った理由

2023/03/02 10 users 境地 ガジェット Apple プロ絵師 ハイエンドタブレット

プロ絵師が「iPad Pro 2022」をレビュー！　「ホバー以外に得るものがなく、ホバーのために得る価値がある」という境地に至った理由：ある日のペン・ボード・ガジェット（1/4 ページ） イラストレーター refeiaさんの連載第5弾は、Appleのハイエンドタブレット「12.9インチiPad Pro」です。ようやく実装されたホバー機能... 続きを読む

ホバーの分岐にはメディアクエリのwidthではなくhoverを使おう

2022/04/01 15 users landscape hover matchmedia 関数

メディアクエリにはhoverプロパティがあり、ユーザーがホバーに対応しているデバイスかどうかの判定が行えます。 これを使用することによって、画面幅での分岐が必要なくなるためタブレットのlandscape含めた対応も容易になります。 また、メディアクエリはJavaScriptからもmatchMediaという関数を使う事で使用すること... 続きを読む

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

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

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

Adobe XDステート機能を使いこなそう！ - ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 - ICS MEDIA

2020/03/05 11 users インタラクション カルーセル ICS MEDIA 従来 複数枚

Adobe XDステート機能を使いこなそう！ ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 AdobeXD2019年11月の大型アップデートで「ステート機能」が登場し、リッチなインタラクションを作成しやすくなりました。従来はアートボードを複数枚組み合わせて表現するしかなかったのですが、ステート機能の登場によ... 続きを読む

Adobe XDは確実に進化している！テキストには依存せず、アクセシブルなUIを構築するためのUIキット | コリス

2019/12/20 5 users コリス ステート ワークフロー コンポーネント ドキュメント

先月のAdobe MAXを経て、Adobe XDも大きく進化しましたね。 リアルタイムの共同編集、ドキュメントの履歴、共有モードといったワークフローに役立つものをはじめ、コンポーネントのステート、ホバーのアクショントリガー、プラグインマネージャー、Sketchファイルとの互換性強化などアプリ自体の機能も進化しています。 ... 続きを読む

macOS 10.15 Catalinaではウィンドウマネージャ機能が強化され、緑のフルスクリーンボタンのホバーでフルスクリーンやSplit View化が可能に。 | AAPL Ch.

2019/06/04 14 users Apple AAPL 長押し 現地時 以下

macOS 10.15 Catalinaではウィンドウマネージャ機能が強化され、緑のフルスクリーンボタンを長押しでフルスクリーンやSplit View化が可能になっているそうです。詳細は以下から。 　Appleは現地時 続きを読む

[CSS]実装がこれなら思っていたより簡単！グラデーションが変化する美しいエフェクトを実装するスタイルシート | コリス

2019/03/07 67 users コリス CSS グラデーション 実装 美しいエフェクト

最近ではグラデーションの使い方がいろいろ進化しています。中でも、ホバーやスクロールに合わせて、グラーデションが変化するエフェクトは非常に美しく、一度は試してみたい実装だと思います。 ホバーすると、マウスの動きに追従してグラデーションが変化するボタンを実装するスタイルシートのテクニックを紹介します。... 続きを読む

「検証も反証もできない命題は科学の対象外」とする「ポパーの反証主義」について - しいたげられたしいたけ

2018/10/21 46 users 反証 命題 しいたけ 検証 科学

なんでもやることが遅いのが悪い癖で、「松本零士『ミライザーバン』と「ニューカムのパラドックス」（後編：「自由意志は存在するのか？」という問題）」というエントリーを書いた直後から、「書かなくちゃ」と思っていたのに、3週間以上も経ってしまった。古来、西洋哲学で繰り返し論じられてきた「自由意志は存在する... 続きを読む

[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を加えるだけの簡単仕様。ホバーなどの操作...記事の続きを読む 続きを読む

[JS]0.6kBの超軽量！基本的なDOM操作を実行するためだけに開発されたシンプルなライブラリ -nanoJS | コリス

2018/05/31 75 users Git コリス before After class

要素にclassを加えたり、変更したり、要素を削除したり、::beforeや::afterを加えたり、要素の表示位置を取得したり、変更したり、クリックやホバーのイベントを設定したり、基本的なDOM操作を実行するためだけに開発された超軽量ライブラリを紹介します。 jQueryは使うけど、$関数や上記の挙動しか利用しないという人には、特にぴったりなスクリプトです。 nanoJS nanoJS -Git... 続きを読む

CodePenで公開されている、CSSでエフェクトやアニメーションを付けたいときに参考になるデモ 15 | NxWorld

2017/04/05 29 users CodePen NxWorld エフェクト CSS デモ

ホバーやクリックした際の動きを中心に、CodePenで公開されているCSSを使ってちょっとしたエフェクトやアニメーションを付けたいときに参考になりそうなデモを紹介します。いずれも目新しい感じのものではないのですが、ひと通りの動きがまとめられているデモが多めなので、エフェクトをどんな感じにするか悩むことが多い人はこういったものをメモしておくのがおすすめです。 ※スマートフォンやタブレットでも確認がで... 続きを読む

デスクワークをしながらカロリーを消費できる「HOVR（ホバー）」、日本に上陸 - CNET Japan

2017/03/15 32 users デスクワーク 上陸 カロリー CNET Japan 日本

座ったままの姿勢でPCに向かうことが多いデスクワーカーは、運動不足になりがちだ。最近では、立って仕事をするスタンディングデスクを導入する企業もあるが、対応する机が必要になるなどまだハードルも高い。 米国ではデスクワーク中に自転車漕ぎ運動ができるフィットネスバイク「 Cycli 」といったものも登場しているが、もっと簡単にこれまでどおりデスクで仕事をしながら運動ができる──。そんなありそうでなかった... 続きを読む

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... 続きを読む

[JS]簡単な実装でパネルを天地左右からアニメーションで表示するスクリプト -notifyMe | コリス

2014/10/31 50 users jQuery コリス head jquery.js link

表示ページの天地左右からアニメーションでスライド表示するパネルを実装するjQueryのプラグインを紹介します。 デモページ デモではボタンのクリックがトリガーになっていますが、画像やテキスト、ホバーなどに変更することも可能です。 notifyMeの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link... 続きを読む

小鳥のように電線の上にとまって電力を補給するドローン（無人機）が可能に – Techcrunch

2014/06/25 94 users TechCrunch クァドコプター 電線 ドローン 小鳥

ドローンが飛んでるとき、電池の寿命が尽きたらどうなるだろう？　今のクァドコプターなら、頑張って基地に戻って充電してもらうか、または落下する。でも、第三の方法として、“空中給電”が議論されている。ドローンが電線の上に停泊して電気を盗み、飛行を続けるのだ。 問題は、ドローンを電線の上にとまらせる方法だ。そう、鳥の真似をする。小鳥が木の枝や電線にとまるように、ドローンをとまらせるのだ。 回転翼機はホバー... 続きを読む

[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]アニメーションで細かい動きを加えたカード状のドロップダウンのデモがかなりかっこいい | コリス

2013/07/23 96 users コリス CSS アニメーションgif アニメーション デモ

上記はデモをアニメーションgifにしたもので、初期はアイテムがカード状に重なっており、クリックすると中身がするすると表示されます。 最初にぱかっと開くの面白いですね、各アイテムはホバーでハイライトもします。 実際の動きは、下記ページでご覧ください。 CSS3 Card Deck Drop Down HTML 各アイテムはリスト要素でシンプルな実装です。 <div class="card-drop"... 続きを読む

[JS]お気に入りのカラースウォッチをアウトプットするためのスクリプト -Swatches | コリス

2013/05/21 50 users コリス rel jQuery head CSS

たった一つのdiv要素を使うだけで、お気に入りのカラースウォッチのコレクションページを作成できるjQueryのプラグインを紹介します。 ホバーでコード表示 Swatchesの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル スタイルシートはhead内に、スクリプトを</body>の上に配置します。 <head> <link href="css/swatches.css" rel="s... 続きを読む

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

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

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

[CSS]メール用のちょっとかわいいアニメーションを実装するスタイルシートのデモ | コリス

2013/04/16 48 users コリス 便箋 Safari CSS スクリプト

ホバーで封筒を開き、便箋を出し入れし、また封筒を閉じるアニメーションをスタイルシートで実装するデモを紹介します。 画像もスクリプトも一切無しです。 Animated letter ※デモはChrome, Safariがベストです。 封筒や手紙のイラストに画像は一切使用されてなく、封筒は変形やボックスシャドウ、便箋は疑似要素などで描かれています。 他にもいろいろとアレンジが出来そうですね。 HTML... 続きを読む

スマフォやタブレットなどのタッチデバイスでちょっと面白いサムネイルプレビューを与える -Kort | コリス

2012/10/29 25 users iPhone コリス Webkit系 Safari スワイプ

デスクトップのホバーだけでなく、タッチデバイスのタッチとスワイプでもかっこいいアニメーションを伴ったサムネイル画像のプレビューコンセプトを紹介します。 Kort デモはiPhone, iPadなどのタッチデバイス、デスクトップだったらWebkit系のChrome, Safariでご覧ください。 オススメはタッチデバイスです。 各デモは、サムネイル画像をタッチすると複数の画像がアニメーションで広がる... 続きを読む