【CSS】まだホバー時のスタイルを :hover だけで指定してるの？

2023/08/07 267 users hover enabled Summary where CSS

はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マ... 続きを読む

divはボタンではない、ボタンの実装について知っておくべきすべてのこと

2023/02/09 160 users div 実装 buttonタグ divタグ HTML

クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したも... 続きを読む

React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita

2022/05/30 202 users Qiita const Prev div ＡＤＤ

const Counter = () => { const [count, setCount] = createSignal(0) createEffect(() => { console.log(`Count: ${count()}`) }) //第２引数はありません。SolidJSが勝手に依存している状態を感知してくれます。 return ( <div> <div>{count()}</div> <button onClick={() => setCount(prev => prev + 1)}>Add</button... 続きを読む

エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA

2020/07/16 355 users ICS MEDIA Vue.js エラー Props CLI

Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @cli... 続きを読む

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

2020/03/19 152 users コリス モーダル インタラクション button要素 CSS

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ... 続きを読む

当たり判定が狭い広告の判定を検証してみた - Qiita

2018/12/24 185 users Qiita 判定 当たり判定 ネットサーフィン 日々

はじめまして。とょしんです。 Qiitaへの記事の投稿は初めてなのですが、 今日はAdvent Calendar15日目の記事として投稿させていただきます。 いや絶対押してんじゃん さて、ネットサーフィンをいていると時折遭遇するのが✗の小さすぎる広告。あの当たり判定の小さすぎるButtonにとって私は日々苦しめられています。あの... 続きを読む

HTML5のさまざまなform要素があなたのブラウザでどのように見えるかのまとめ -Native form elements | コリス

2013/04/16 101 users コリス textarea Disable Option 装飾

HTML5のform要素、input, textarea, select, option, fieldset, legend, label, buttonの各要素とさまざまなタイプをまとめたサイトを紹介します Native form elements 各要素は余計な装飾がない状態で、上がデフォルト、下が入力不可のdisableです。 下記は、Chrome26 for OS XでのHTML5の各フォ... 続きを読む

js で利用する DOM の名前をどうやってつけたらよいのか - willnet.in

2013/03/03 238 users DOM update value class 名前

js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('clic... 続きを読む

面倒なシャドウもグラデも簡単に作成できるCSS3のボタンを作成するジェネレーター -CSS Button Generator | コリス

2013/01/15 206 users コリス ジェネレーター グラデ Shadow ブラー

ボタンのカラー、グラデーション、角丸、ブラー、テキストシャドウ、ボックスシャドウなど、さまざまなスタイルを簡単に適用できるCSS3のボタンを作成できるオンラインツールを紹介します。 CSS Button Generator 使い方は簡単です。 ボタンのColor, Size, Shadow(text), Shadow(button)のスライダーを変更すると、リアルタイムにボタンにデザインが反映され... 続きを読む

[CSS]さまざまなバリエーションを簡単に利用できる美しいデザインのボタンを実装するチュートリアル | コリス

2012/09/19 115 users コリス チュートリアル CSS class button要素

画像は使用せずに、繊細なパターンとグラデーションで美しいボタンをスタイルし、サイズやカラーなどさまざまなバリエーションを簡単に利用できるように実装するスタイルシートのチュートリアルを紹介します。 ベースとなるボタン HTML マークアップは非常にシンプルです。 <a href="" class="button">Button</a> または、button要素でも構いません。 <button cla... 続きを読む

[JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション | コリス

2012/04/05 152 users NAV セマンティック コリス チュートリアル ナビゲーション

デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li>... 続きを読む

Google +1 Button

2011/03/30 129 users Google

続きを読む

クールなUIを実現可能なAjaxフレームワーク「vegUI」:phpspot開発日誌

2007/05/07 106 users checkbox Ajaxフレームワーク MENU クラス

vegUI Demonstration クールなUIを実現可能なAjaxフレームワーク「vegUI」 このライブラリを使うことで次のようなクールなブラウザ内ウィンドウＵＩを実現できるようです。 ライブラリには、Button, ContentBox, CheckBox, Menu, ScrollBarのようなUIに関わるようなクラスから、Ajax BridgeのようなAjax用クラスなどが提供される... 続きを読む

GIGAZINE - よく見かけるあの小さなボタンバナーを作る「Button Maker Online」

2006/05/16 266 users GIGAZINE 見覚え http 通り 以下

上記画像のような小さなボタンバナー画像に見覚えはないでしょうか？これを簡単にオンライン上で作成できるのが無料サービス「Button Maker Online」です。80×15か88×31サイズの画像が簡単に作成できます。 Dynamic Drive online tools: Button Maker http://tools.dynamicdrive.com/button/ 使い方は以下の通り。... 続きを読む