CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSカーソルプロパティのガイド

カーソルは「 すべてのデモの母 」では、60年代後半にDouglasEnglebartがマウスとグラフィカルユーザーインターフェイスを世界に紹介しました。マウスカーソルを使用すると、コンピューター画面のどこにいるかを確認できます。ユーザーエクスペリエンスツールとして、画面上の任意の時点で何ができるか、またはコンピューターが何をしているかを示すことができるのは本当に素晴らしいことです。この記事では、Webページでマウスカーソルを使用してWebサイトのユーザーエクスペリエンスを向上させる方法のいくつかについて説明します。

構文

CSSセレクターでは、次の構文を使用して、カーソルをデフォルトの矢印以外のものに変更します。 

cursor: [ url(1.png), url(2.png) ], etc.,
        <mandatory keyword value>

角かっこの最初のセットの間に、コンマで区切られたURLのリストがあります。これはオプションの値です。カスタムカーソルを使用できます。インターネット上には、独自の何かを作成するのに役立つカスタムカーソルクリエーターがいくつもあります。

カンマ区切りのリストは、ブラウザが最初のリストを読み込もうとすることを示しています。最初のURLが見つからない場合、またはURLが正しくない場合は、機能するものが見つかるまでリストを下に移動するか、最後に必須キーワードに設定されます。

最初のパラメーター–URLはオプションです。 2番目はそうではありません。そこに表示したいカーソルタイプを指示する一連の指示を与えるキーワードを含める必要があります。使用可能な値の一部を次に示します。 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS custom cursor</title>
<style>      
    table {
     width:100%;
     text-align: center;
     border-collapse: collapse;
     font-family: 'Roboto', sans-serif;
   }
   thead {
     width: 100%;
     background: lightblue;
   }
 
   tr:nth-child(even) {
     background-color: lightgrey;
   }
 
   td {
     width: 32%;
     height: 50px;
     padding: 10px;
   }
 
   td.test {
     color: red;
     font-weight: bold;
   }
 
   td#auto {
     cursor: auto;
   }
 
   td#cell {
     cursor: cell;
   }
 
   td#crosshair {
     cursor: crosshair;
   }
 
   td#default {
     cursor: default;
   }
 
   td#none {
     cursor: none;
   }
 
   td#pointer {
     cursor: pointer;
   }
 
   td#help {
     cursor: help;
   }
 
   td#progress {
     cursor: progress;
   }
 
   td#wait {
     cursor: wait;
   }
 
   td#text {
     cursor: text;
   }
 
   td#vertical-text {
     cursor: vertical-text;
   }
 
   td#zoom-in {
     cursor: zoom-in;
   }
   td#zoom-out {
     cursor: zoom-out;
   }
</style>
</head>
<body>
  <table>
   <thead>
     <td>Cursor Type:</td>
     <td>Description:</td>
     <td>Test it Out: </td>
   </thead>
   <tr>
     <td>auto</td>
     <td>Automatically figures out which cursor to use based on context.</td>
     <td class="test" id="auto"> TEST </td>
   </tr>
   <tr>
     <td>default</td>
     <td>Typically an arrow, but depends on platform being used.</td>
     <td class="test" id="default"> TEST </td>
   </tr>
   <tr>
     <td>help</td>
     <td>Used to indicate help is available</td>
     <td class="test" id="help"> TEST </td>
   </tr>
   <tr>
     <td>none</td>
     <td>No cursor present</td>
     <td class="test" id="none"> TEST </td>
   </tr>
   <tr>
     <td>pointer</td>
     <td>Most often used when hovering over link or button to indicate it can be clicked.</td>
     <td class="test" id="pointer"> TEST </td>
   </tr>
   
    <tr>
     <td>progress</td>
     <td>A mashup of pointer and wait - indicates that the UI can still be interacted with while something else is happening...</td>
     <td class="test" id="progress"> TEST </td>
   </tr>
    <tr>
     <td>text</td>
     <td>Tells the user text can be highlighted.</td>
     <td class="test" id="text"> TEST </td>
   </tr>
    <tr>
   <tr>
     <td>wait</td>
     <td>Indicates that the computer is thinking and user CANNOT interact with UI...</td>
     <td class="test" id="wait"> TEST </td>
   </tr>
    <tr>
     <td>zoom-in</td>
     <td>Indicates to user that we can zoom in on something. </td>
     <td class="test" id="zoom-in"> TEST </td>
   </tr>
   <tr>
     <td>zoom-out</td>
     <td>Indicates to user that we can zoom out on something. </td>
     <td class="test" id="zoom-out"> TEST </td>
   </tr>
 </table>
</body>
</html>

上記のコードは、サイトで使用できるカーソルの一部のみを共有しています。他の人のためにMDNをチェックしてください。

結論

今日は、ユーザーエクスペリエンスの向上を支援するために、Webサイトにカーソルを追加するさまざまな方法について説明しました。カーソルを使用してページ上の任意のポイントで何ができるかを示すことにより、ユーザーはサイトをナビゲートするときに何を期待できるかを知ることができます。ここで言及されているもの以外にもたくさんあります。

ニーズに合わせてカーソルをカスタマイズできるさまざまな方法を確認することをお勧めします。そして覚えておいてください：カーソルはUXの半分にすぎません。残りの半分は、ユーザーがカーソルに期待することを実際に実装しています。それについてはまた別の機会に説明します。ハッピーハッキング！

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。


  1. CSSのoutline-widthプロパティ

    overlay-widthプロパティは、要素の境界の周りに特定の太さの線を描画するように定義できますが、borderプロパティとは異なり、アウトラインは要素の寸法の一部ではありません。 構文 CSSのoutline-widthプロパティの構文は次のとおりです- Selector {    outline-width: /*value*/ } 注- アウトラインスタイルプロパティは、アウトライン幅を宣言する前に定義する必要があります。 アウトライン幅プロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <hea

  2. CSSのborder-colorプロパティ

    CSSのborder-colorプロパティは、要素の境界線の色を指定するために使用されます。また、border-top-color、border-right-color、border-left-color、border-right-colorプロパティを使用して、個々の辺の色を設定することもできます。 構文 CSSborder-colorプロパティの構文は次のとおりです- Selector {    border-color: /*value*/ } 次の例は、CSSのborder-colorプロパティ-を示しています。 例 <!DOCTYPE html>