テーブルの行リンクは意外と面倒くさい

2024/06/08 18 users テーブル セル 愚痴 結論 Next.js

はじめに Next.js にて下記のようなテーブルを作成する際に、テーブルの各行をリンク化させつつ特定のセルをクリッカブル（例だと編集モードにして編集作業を行うイメージ）にするのが面倒くさかったので愚痴っていきたいと思います。 結論 テーブルにて行リンクが本当に必要か再検討すべし。 どうしても必要なら 色々と... 続きを読む

リンクの入れ子は subgrid が最適解かもしれない

2024/03/27 87 users subgrid 最適解 入れ子 リンク https

はじめに リンクの入れ子とは何かというと、以下のようなデザインです。 カード全体がリンクでクリッカブルになっていて、中のタグやカテゴリーもそれぞれがリンクになっています。ニュースやブログの投稿などでよく見るデザインだと思います。 しかし、以下のようにマークアップすることはできません。 <a href="https:... 続きを読む

リンクとボタンを｢押せる｣だけでデザインしない

2022/02/23 11 users ボタン リンク 優劣 押下 共通点

リンクとボタンのビジュアルが似たものもしくは同じものになる理由のひとつに「押せる」（もしくはクリッカブル、押下可能と言い換えてもいい）という共通点があるからだと思っている。 ビジュアルを似たもの・同じものにするかどうかは状況により判断されるので、そこに画一的な優劣は存在しない。しかしリンクとボタン... 続きを読む

material - マテリアルデザインを行うベースにどうぞ MOONGIFT

2015/03/26 66 users MOONGIFT MATERIAL materia ベース

Googleの提唱するマテリアルデザインはAndroidだけに止まらず広がりを見せています。特にWebデザインは相性が良いようで、フラットにしたけれどクリッカブルな場所が分からなかったり、あまりに簡素化されたデザインでかえってユーザを混乱させてしまうことがあります。 そんな時にマテリアルデザインを使うことでユーザビリティの高いサイトを構築できるでしょう。そこでベースに使ってみたいのがmateria... 続きを読む

クリッカブルな日本地図を実装するjQueryプラグイン・「Japan Map」 - かちびと.net

2014/05/30 77 users jQueryプラグイン net Japan Map 日本地図

Web制作の話題を中心に、便利なWebサービスやリソースなどを紹介 Kudos for About This Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。 Kachibito.net is a community-based ... 続きを読む

[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map | コリス

2014/05/16 282 users はいら jQuery canvas コリス スクリプト

日本の都道府県の地図をクリッカブルマップで表示する純国産のjQueryのプラグインを紹介します。 地図自体はCanvasで描かれているので、画像を用意する必要はありません。 Japan Map Japan Map -GitHub Japan Mapのデモ Japan Mapの使い方 Japan Mapのデモ デモはCanvas対応ブラウザでご覧ください。 デモページ 各都道府県をホバーするとハイラ... 続きを読む

『RailsによるアジャイルWebアプリケーション開発 第4版』のPDF版が発売 - オーム社開発部

2011/12/01 11 users Rails 鹿野 アジャイルWebアプリケーション開発 発売

鹿野です。『RailsによるアジャイルWebアプリケーション開発』のPDF版が発売になりました。すでにたくさんの方に購入いただいているようです。ありがとうございます。 このPDF版では、本文中に出てくるURLや相互参照がクリッカブルになっています。さらに本文中でパスが併記されているソースコードについては、クリックしてオーム社のWebサイトにあるソースコードをWebブラウザで閲覧できます。Acrob... 続きを読む

Twitter風にエラーや通知をページ上部に表示させるjQueryプラグイン:phpspot開発日誌

2011/10/28 40 users Twitter風 jQueryプラグイン エラー ページ上部

Jquery Notification Plugin. Twitter風にエラーや通知をページ上部に表示させるjQueryプラグイン。 次のようなバーを通知としてページ上部にスライドさせつつ表示するプラグインです。 閉じるボタンなんかもついています WarningやInformationとしてバーの色を変えて出し分けることも出来ます 関連エントリ div全体をクリッカブルにするjQueryプラグイ... 続きを読む

div全体をクリッカブルにするjQueryプラグイン「DIV LINKER」:phpspot開発日誌

2011/10/06 120 users height width jQuery Plugins 部分

Div Linker | jQuery Plugins div全体をクリッカブルにするjQueryプラグイン「DIV LINKER」。 次のようなマークアップがあったとして、この場合は「Link text」部分にしかリンクされません。 <div class="divlinker"> <img src="image.jpg" width="151" height="130" /> <br /> <a... 続きを読む

[JS]a要素を内包するdiv要素全体をクリッカブルにするスクリプト -Div Linker | コリス

2011/10/05 67 users Libs Ajax jQuery コリス jquery.js

テキストリンクなどのa要素を内包するdiv要素の全部をクリック可能にするjQueryのプラグインを紹介します。 Div Linkerの実装 実装は非常にシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min... 続きを読む

Google+の便利集まとめ(初日勉強分)- 勝間和代公式ブログ: 私的なことがらを記録しよう!!

2011/07/11 40 users ことがら 勝間和代公式ブログ Google+ サークル 投稿

マモノさん - Google+さんから教えてもらった、Google+の便利集、まとめておきます。 クリッカブルになっていないので、適当にコピペして試してみてください。 -便利なショートカットと黙っていれとくべき機能拡張- #便利なショートカット ・自分がコメントした投稿を表示 https://plus.google.com/notifications/otherposts ・自分をサークルに入れて... 続きを読む

少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする - かちびと.net

2011/06/09 351 users jQueryコード HTMLテーブル net jQuery

シンプルでいいアイデアだったのでメモ。 HTMLテーブルの列そのものにリンクを 指定できるようにする、というもの。jQuery でサクッと出来るようですね。ちょっと思 いつきませんでしたけど・・テーブルまわり は使いやすさを向上したいところです。 HTMLのテーブルの列をjQueryでクリッカブルにする事で、ユーザーの利便性を上げられそうです。 動作サンプル 地名 読み方 En 詳細 その他 東京... 続きを読む

ページにクリッカブルなメールアドレスを載せつつスパム対策もする方法「Email Riddler」:phpspot開発日誌

2007/02/13 168 users phpspot開発日誌 スパム対策 メールアドレス 方法

Dynamic Drive Email Riddler- email encryption script and tool Updated to version 2.0! Jan 28th, 07. Improved interface, output now XHTML valid, plus added ability to simply output encrypted email as a... 続きを読む