ウェブサイトを向上させる簡単な方法-CSSチュートリアル-php.cn

ウェブサイトを向上させる簡単な方法

Mary-Kate Olsen

リリース： 2024-12-28 16:33:10

オリジナル

691 人が閲覧しました

1. オーバーフロー時のレイアウトのずれを防ぐ

overflow: auto を持つ要素がある場合、要素がオーバーフローしているときにのみスクロールバーが表示されます。問題は、要素がオーバーフローしてスクロールバーが表示されると、スクロールバーの幅に合わせてコンテンツが縮小されてしまうことです。

asy ways to elevate your website
不必要なレイアウトの変更を避けるために、以下を追加します:
スクロールバー-ガター: 安定

スクロールバーが表示されない場合でも、スクロールバー用のスペースが確保されます。

asy ways to elevate your website

これを書いている時点では、この機能を持っているユーザーは 74% だけです。しかし、これは素晴らしい進歩的な機能強化です。つまり、新しいブラウザを使用しているユーザーはより良いユーザーエクスペリエンスを享受できますが、古いブラウザを使用しているユーザーは影響を受けません。

2. デバイスのダークモード設定を尊重します。

Web サイトにダークモードを既に実装している場合は、デバイスのライトモードまたはダークモードの設定を確認することで、ユーザーがダークモードを手動で選択する手間を省くことができます

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

ログイン後にコピー

ユーザーが設定で既にダークモードを選択している場合は、Web サイトでもデフォルト値をダークモードにすることができます。

Web サイトによっては、ダークモードの切り替えをまったく行わず、デバイスの設定のみに依存することを選択している場合もあります。

3. リンクは実際のリンクである必要があります

Web サイトの別の部分にリダイレクトするボタンがある場合、それを行うための明白な方法は、クリック用のイベントリスナーを用意し、JavaScript を使用してユーザーをリダイレクトすることです。
これは間違いです。ブラウザのプリミティブ (例: リンク、フォーム) を使用できる場合は、ほとんどの場合、代わりにそれを使用する必要があります。

を使用タグには代わりに多くの利点があります。

Ctrl キーを押しながらクリック (またはモバイルでは長押し) してリンクを別のタブで開くことができる
リンクの上にマウスを置くと、リダイレクト先が表示されます
スクリーンリーダーや検索エンジンクローラーなどの他のプログラムは、はるかにうまく機能します

react-router または Next.js を使用している場合は、ページ全体のリロードを防ぐためにそのフレームワークの Link コンポーネントを使用する必要があります。

4. リンクプレビュー

ユーザーが Web サイトへのリンクを共有すると、すべてのチャットアプリとソーシャルメディアアプリには、ユーザーがクリックする前にその Web サイトのコンテンツの一部を表示するプレビュー機能があります。にいくつかのメタタグを追加するだけです。オブジェクトを使用すると、他のアプリがウェブサイトにプレビューを表示できるようになります。

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

ログイン後にコピー

React 19 では、の編集がこれまでより簡単になりました。物体。以前は、react-helmet などのサードパーティライブラリを使用する必要がありましたが、現在は、react 用に組み込まれています。

<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>

ログイン後にコピー

これは Open Graph プロトコルと呼ばれます。
非常に便利なツールは、ソーシャル共有プレビューです。これを使用すると、さまざまな Web サイトでプレビューがどのように表示されるかをテストし、改善する方法についてのアドバイスを得ることができます。

5. 入力にラベルを使用する

チェックボックスをよく見かけますが、チェックボックスのラベルをクリックしようとしても何も起こりません。アクセシビリティが低いだけでなく、これはユーザーが小さなチェックボックスをクリックして選択する必要があることを意味します。

これを解決するには、を使用します。タグ。

function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>

      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.image} />
      <meta property="og:url" content={post.url} />
      <meta property="og:type" content="article" />

    </article>
  );
}

ログイン後にコピー

これはすべての入力タイプに機能します。たとえば、テキスト入力のラベルをクリックすると、テキストボックスにフォーカスが移動します。

以上がウェブサイトを向上させる簡単な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。