Movatterモバイル変換


[0]ホーム

URL:


はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマーク
  • テクノロジー
  • リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
  • Twitterでシェア
  • Facebookでシェア

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

340usersがブックマークコメント24

    ガイドラインをご確認の上、良識あるコメントにご協力ください

    0/0
    入力したタグを追加

    現在プライベートモードです設定を変更する

    おすすめタグタグについて

      よく使うタグ

        リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA

        340 usersics.media

        ガイドラインをご確認の上、良識あるコメントにご協力ください

        0/0
        入力したタグを追加

        現在プライベートモードです設定を変更する

        おすすめタグタグについて

          よく使うタグ

            はてなブックマーク

            はてなブックマークで
            関心をシェアしよう

            みんなの興味と感想が集まることで
            新しい発見や、深堀りがもっと楽しく

            ユーザー登録

            アカウントをお持ちの方はログインページ

            記事へのコメント24

            • 注目コメント
            • 新着コメント
            aike
            タイトル見て、ぼくのかんがえたさいきょうのボタンか、と思ったら割と普遍的なことが現代的にまとまってて良かった。

              その他
              agektmr
              外国に行くと日本のお店にある気配りの幅広さに気付かされる。この記事はウェブサイトにそういうアイディアを盛り込むヒントになるなと思いました。

                その他
                forestk
                よく思うのだけど、なぜブラウザはデフォルトでボタンに cursor: pointer; しないのかをよく考えたい。 Windows も Mac も OS 上のボタンは cursor: pointer; じゃないのよね。

                  その他
                  misarine3
                  些細なことかもしれんけどこういう細かい使い心地の違いでユーザーが離脱するんよね。ディレクターさん頼む。そして後から修正するのは工数かかるので、最初から意見を聞いてほしいなと思うコーダーです。

                    その他
                    ma3tk
                    実装後によくチェックするのがまとまっててありがたい🙏

                      その他
                      mayumayu_nimolove
                      わかんなかったら検索するけど軒並みもう古いページしか出てこないから普及しないんだよな。一年以内のが出るようにしないと。

                        その他
                        pmint
                        ちょっとは考えてもらわないと。.sr-onlyは「position: absolute; opacity: 0; pointer-events: none;」のほうがいいんじゃないの。

                        その他
                        field_combat
                        今どきのアクセシビリティ

                        その他
                        naglfar
                        基本のキ。とても大事で素晴らしい。

                        その他
                        diveintounlimit
                        よく書けている

                          その他
                          securecat
                          8で内容が空のbuttonが紹介されているが、そもそも中のアイコンをimgなりsvgなりで置いてそこに代替要素をもつのが自然なのに、中身を見えなくして置くみたいなテクニックぽい感じになってるのは何故?

                            その他
                            gyampy
                            これをスタンダードにれすればいいわけですね!

                              その他
                              tamanecoplus
                              デザイナーに読んでもらいたいんだけど何故かエンジニアにしわ寄せが来る奴

                                その他
                                klim0824
                                button要素にcursor:pointerが付いてない理由は元々リンクの存在を示すものだから。https://developer.mozilla.org/ja/docs/Web/CSS/cursor インタラクティブな要素に付けるとなるとinputやselectは?みたいな話に

                                その他
                                takeag
                                Framework使えば大体回避できないか

                                  その他
                                  tofu-kun
                                  “cursor:pointer”がボタンには付いてないのには理由があるが、実際のところどちらがユーザに優しいかは僕はわかっていない。ホバー時に適切な反応があれば問題ないのか?過剰なシグニファイヤなのか?

                                    その他
                                    ornomental
                                    いつも雰囲気で画面作ってるので、こういうのもっと知りたい!

                                      その他
                                      forestk
                                      forestkよく思うのだけど、なぜブラウザはデフォルトでボタンに cursor: pointer; しないのかをよく考えたい。 Windows も Mac も OS 上のボタンは cursor: pointer; じゃないのよね。

                                        2022/12/10リンク

                                        その他
                                        agektmr
                                        agektmr外国に行くと日本のお店にある気配りの幅広さに気付かされる。この記事はウェブサイトにそういうアイディアを盛り込むヒントになるなと思いました。

                                          2022/12/10リンク

                                          その他
                                          flirt774
                                          大事なことしか書かれてなくて頷くのみの内容。ここに無いのだと opacity の乱用を避ける。リンクボタンに利用すると文字のコントラスト比が足らず読み取りにくくなる

                                            その他
                                            aceraceae
                                            意外と知らない内容もあった。

                                            その他
                                            seiremi21

                                              その他
                                              aike
                                              aikeタイトル見て、ぼくのかんがえたさいきょうのボタンか、と思ったら割と普遍的なことが現代的にまとまってて良かった。

                                                2022/12/10リンク

                                                その他
                                                Helfard
                                                あとで読まない。

                                                  その他
                                                  ma3tk
                                                  ma3tk実装後によくチェックするのがまとまっててありがたい🙏

                                                    2022/12/10リンク

                                                    その他
                                                    misarine3
                                                    misarine3些細なことかもしれんけどこういう細かい使い心地の違いでユーザーが離脱するんよね。ディレクターさん頼む。そして後から修正するのは工数かかるので、最初から意見を聞いてほしいなと思うコーダーです。

                                                      2022/12/10リンク

                                                      その他
                                                      GiveMeChocolate
                                                      はい

                                                        その他
                                                        mayumayu_nimolove
                                                        mayumayu_nimoloveわかんなかったら検索するけど軒並みもう古いページしか出てこないから普及しないんだよな。一年以内のが出るようにしないと。

                                                          2022/12/10リンク

                                                          その他
                                                          shirotorabyakko
                                                          @media (any-hover: hover) {}

                                                          その他
                                                          kenzy_n
                                                          UI・UXは大切だ!

                                                          その他

                                                          注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

                                                          リンクを埋め込む

                                                          以下のコードをコピーしてサイトに埋め込むことができます

                                                          プレビュー
                                                          アプリのスクリーンショット
                                                          いまの話題をアプリでチェック!
                                                          • バナー広告なし
                                                          • ミュート機能あり
                                                          • ダークモード搭載
                                                          アプリをダウンロード

                                                          関連記事

                                                            usersに達しました!

                                                            さんが1番目にブックマークした記事「リンク/ボタン/フ...」が注目されています。

                                                            気持ちをシェアしよう

                                                            ツイートする

                                                            リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA

                                                            ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした...ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTMLCSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用

                                                            ブックマークしたユーザー

                                                            • pmint2025/11/03pmint
                                                            • m-shi052025/09/17m-shi05
                                                            • arata04242025/07/06arata0424
                                                            • ndxbn2025/05/17ndxbn
                                                            • grfxdsgn2025/05/16grfxdsgn
                                                            • barlog2025/05/16barlog
                                                            • techtech05212024/05/29techtech0521
                                                            • kenjikana2023/10/25kenjikana
                                                            • herakures2023/08/15herakures
                                                            • tenari2023/06/08tenari
                                                            • SHA-3202023/04/28SHA-320
                                                            • masakaz772023/01/16masakaz77
                                                            • donotthinkfeel2023/01/14donotthinkfeel
                                                            • heatman2023/01/08heatman
                                                            • yuu-yuiken2023/01/07yuu-yuiken
                                                            • gdi_Uvg2B2023/01/07gdi_Uvg2B
                                                            • kumamonchang2023/01/07kumamonchang
                                                            • Exocet2023/01/06Exocet
                                                            すべてのユーザーの
                                                            詳細を表示します

                                                            ブックマークしたすべてのユーザー

                                                            同じサイトの新着

                                                            同じサイトの新着をもっと読む

                                                            いま人気の記事

                                                            いま人気の記事をもっと読む

                                                            いま人気の記事 - テクノロジー

                                                            いま人気の記事 - テクノロジーをもっと読む

                                                            新着記事 - テクノロジー

                                                            新着記事 - テクノロジーをもっと読む

                                                            同時期にブックマークされた記事

                                                            いま人気の記事 - 企業メディア

                                                            企業メディアをもっと読む

                                                            はてなブックマーク

                                                            公式Twitter

                                                            はてなのサービス

                                                            • App Storeからダウンロード
                                                            • Google Playで手に入れよう
                                                            Copyright © 2005-2025Hatena. All Rights Reserved.
                                                            設定を変更しましたx

                                                            [8]ページ先頭

                                                            ©2009-2025 Movatter.jp