🥪 ℹ️ 👩🏻‍🤝‍👨🏽 5分で使いやすさが向上 ⛰️ 🧑🏿‍🤝‍🧑🏿 💆🏿

このブログ投稿では、サイトの使いやすさを向上させるためのこれらのヒントをいくつか紹介します。それぞれのヒントは実装が非常に簡単です。それらのすべてがクロスブラウザであるわけではありませんが、それでも「ケーキに氷がかかっている」のです。

1.ボタンのクリックとボタンのようなリンクを表示する

私のお気に入りのヒント。 CSSでボタンスタイルが指定されている場合、または画像が（背景または<img />要素として）珍しいボタンを表示するために使用されている場合、ボタンはすべてまたは一部のブラウザー（状況に応じて）をクリックしても応答しません。ここでは、クリックしたものを本当にクリックしたことを訪問者に知らせることができる簡単なトリックを示します。

.mybutton:active { position: relative; top: 1px; left: 1px; }

このコードでは、ボタンを押すと、ボタンが右に1ピクセル、下に1ピクセルシフトします。試してください：非常に説得力があります。

他の同様に迅速なオプションがあります：ボーダーにインセットプロパティを設定し、text-indentプロパティを1pxに設定し、グラデーション背景の方向を変更します（グラフィックエディタに頼る必要がない場合、つまりサイトの他の場所にある場合、既製の逆勾配が使用されます）、またはそれらのいくつかの組み合わせ。

2.スムーズな移行（CSS3移行）

このヒントはWebkitでのみ機能しますが、先ほど言ったように、これは単なる「ケーキのアイシング」です。もちろん、スムーズな移行がデザインにとって重要な場合は、スクリプトを作成するか、既製のライブラリを使用することをお勧めします。いずれにせよ、CSSに制限するつもりであれば、それはWebkitのユーザーの利便性の顕著な増加として役立ちます。

ページ上のリンクが通常青であると仮定しますが、それらにカーソルを合わせると赤に変わります。 Webkitユーザーが青から赤にスムーズに移行するには、CSSに2つの-webkit行を追加するだけです：

 a { color:blue; -webkit-transition-property: color; -webkit-transition-duration: 1s; } a:hover { color:red; }

最初の行（ -webkit-transition-property ）は、どのCSSプロパティをスムーズに変更するかをブラウザーに指示し、2行目（ -webkit-transition-duration ）は、この効果の望ましい期間を指示します。それらを通常のCSSプロパティに配置することが重要ですが、 ：hover pseudo- classの下には配置しないでください。そうしないと、ユーザーが要素からマウスを削除したときにスムーズに移行できません。

翻訳者によるメモ。 Lea Verouは2009年4月10日にこれらの行を書きました。それ以来、幸いなことに、CSSプロパティのスムーズな変更が多くの非Webブラウザー（Firefox 4、Opera 10.5、Opera Mobile 10、Internet Explorer 10以降）でサポートされるようになったため、このヒントははるかにクロスプラットフォームになりました。目的の目標を達成するには、必要なすべてのプレフィックスを使用してCSSプロパティを記述するだけです。
 a { color:blue; -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; -ms-transition-property: color; transition-property: color; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s; } a:hover { color:red; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
Lea Verouは、プロパティの数を5つ増やすことで違いが生じる可能性があることを認識して、スクリプト-prefix -free を作成しました。これは、Habrahabrで既に報告しました。

3.機能を示す特殊文字をボタンに装備する

ほとんどのブラウザは、特殊文字のみで構成されるフォントを好まないことを知っています。ただし、ほとんどのUnicodeフォントの一部であり、問題なく使用できる特殊文字があります。次の2つの例を比較します。

[例]

これらの文字の一部にはキーワード（HTMLエンティティという名前）がありますが、他の文字はUnicode番号（ ＆＃xABCD;など ）で呼び出す必要があります -それらはすべてフォントで非常に一般的ではないため、より厳しいテストが必要になります。

http://www.copypastecharacter.com/ およびhttp://www.alanwood.net/unicode/dingbats.htmlでこれらの特殊文字とUnicode 16進数の多くを見つけることができます。

もちろん、時間があれば、ボタンのグラフィックアイコンを使用してください。しかし、時間がなければ、特殊文字は便利な代替手段のように思えます。時々、実際のアイコンを描く時間ができるまで、下書きのアイコンの場所にもそれらを置きます。

4.ストライプテーブル

このヒントは、IE （IE9以降-caniuseを除く）およびFirefox 3では機能しません。テーブル（およびリスト）の読みやすさは、背景色を行ごとにわずかに変更することで改善できます。この効果はおそらく2回以上見たことがあるでしょう。通常は、テーブルを作成するときにJavaScriptまたはサーバー上で達成されます。ただし、IEや古いブラウザーでの作業を気にしない場合、または完全にクロスブラウザーのソリューションを作成する時間がない場合は、簡単なCSS3にすばやく配置することもできます。

 table.stats tr { background: white; } table.stats tr:nth-child(odd) { background: #f4f4f4; }

5.内部リンクのターゲット要素を強調表示します

このヒントは、IE （IE9以降-quirksmode.orgを除く）および古いバージョンのブラウザーでは機能しません。内部リンク（FAQなど）を介してアクセスできるページの1つに多くのコンテンツがある場合、CSS3疑似クラス「 ：target 」を使用して、読者がリンクをたどった場所を正確に表示できます。

 h3:target { background: #FFFBCC; }

h3要素は、参照によってリーダーがそれに着地したときにのみ#FFFBCCバックグラウンドを取得します。たとえば、要素IDが「foo」に設定されている場合、リーダーが #fooに移動すると、 ＃FFFBCCバックグラウンドが取得されます。

それだけです

まあ、それは5分以上続きましたか？

5分で使いやすさが向上