Webデザイン: タイトルが完全に表示できない場合

Webデザイン: タイトルが完全に表示できない場合
<br />今日、新しくなった ChinaUI.com の Web サイトを見たのですが、ますます美しくなっていると思います。この変化は確かにかなり大きいです。朝にちょっと見て閉じました。夕方にもう一度開けてみると、問題が見つかりました。つまり、デザインの幅の関係でタイトルが完全に表示されず、プログラムで文字を切り取っているようです。多くのサイトがこのような状況に遭遇したことがあると思います。視覚効果のために、ウェブサイト全体の視覚効果に合わせてテキストを切り詰める必要があります。通常、切り捨てには 2 つの方法を使用します。1 つは、バックグラウンドで出力するときに、事前に特定の文字数を設定する方法です。もう 1 つの方法は、CSS または JS を使用して、出力された完全なコンテンツを視覚的にクリップすることです。
Web ページの標準が登場する前は、基本的に最初の方法がこの問題を解決するために使用されており、現在でも広く使用されています。この方法の利点は、正確に単語数をカットできることですが、バックグラウンドでカット作業が完了しているため、出力される内容が不完全になるという欠点があります。 2 つ目は、CSS または JS を使用して作成された巧妙な手法です。一定の長さを超えるコンテンツを非表示にします。望ましい視覚効果を実現するために、完全なデータ コンテンツを保持できるという利点があります。欠点は、IE 以外のブラウザーでキャプチャされたテキストが完全ではない可能性があることです。たとえば、Firefox では単語の半分が切り取られるという厄介な現象がよく発生します。
私が聞きたい質問は、「タイトルの不完全さは、ユーザーのクリック意欲に影響しますか?」ということです。あえて言うなら、タイトルの不完全さは、ユーザーが情報をクリックする意欲に大きく影響します。ここでは、Youai.com のニュースの見出しを使用して分析します。ウェブサイトには「アメリカが衝撃を与える新しいユーザーインターフェース技術を発明」というニュースの見出しがありますが、これは機械的に切り取られた見出しです。このようなタイトルを見ると、好奇心が掻き立てられるでしょうか? もちろん、それは可能です。しかし、私たちの理解はこうかもしれません。「米国がユーザーインターフェースの新しい技術を発明し、それを自慢している...これはフェイクニュースです。おそらく2つの企業が自慢しているのでしょう。」もしそうなら、私はこの種のゴシップニュースには興味がありません。しかし、完全なタイトルは「米国は、息を吹きかけることでコンピューターを操作できる新しいユーザーインターフェース技術を発明した」であるべきです。私はそのようなタイトルのほうが興味深いです。なぜ息を吹きかけることでコンピューターを操作できるのかを知りたいのです。これは私が今まで考えたことのないことです。こうすれば、このニュースをクリックして見ることに非常に興味を持つようになります。比較してみると、実は「吹き飛ばし操作」が私たちの好奇心を最も掻き立てるものであることがわかります。これが新しい技術の核心です。これもこのニュースの核心的な内容です。
もちろん、切り捨てが必要な場合もあります。そうしないと、Web サイト全体が乱雑に見えてしまいます。現在一般的な解決策は、リンクに「title」属性を追加することです。意味が不明瞭なタイトルに遭遇した場合、私は通常、マウスを移動してプロンプト領域のテキストを表示し、より完全なタイトル情報を取得します。これは、ニュースをクリックするかどうかを決定するのに役立ちます。しかし残念なことに、Youai.com のタイトル リンクの title 属性はタイトル コンテンツと同じであるため、title 属性の重要性が大幅に低下します。
デザインする際には、もちろんタイトルをできるだけ完全に表示するように努めます。特別な理由によりタイトルを完全に表示できない場合は、title 属性をできるだけ完全にする必要があります。また、Firefox では CSS の切り捨てに欠陥がありますが、それでも切り捨ては CSS で行うべきだと私は考えています。少なくともこの方法では、完全な HTML 情報ドキュメントを取得できます。少なくとも、CSS がなくても完全な情報コンテンツを見ることができます。

<<:  MySQL 8.0 のメモリ消費の詳細な分析

>>:  私が遭遇したIE8の互換性に関する注意事項

推薦する

CSSボックスの表示/非表示とトップレイヤーの実装コード

.imgbox{ 幅: 1200ピクセル; 高さ: 612px; 右マージン: 自動; 左マージン...

Centos7 システムでの .NET Core 2.0 + Nginx + Supervisor 環境の構築

1. Linux .NET Core の紹介Microsoft は常に自社のプラットフォームに対して...

HTML+CSSを使用してTG-visionホームページを作成する方法

今回はHTML+CSSレイアウトを使用して、TG-vision Shuanghui Mediaのホー...

JSONデータをHTMLで表示する方法

背景:場合によっては、json データをページに直接表示する必要があります (たとえば、インターフェ...

Element-ui の組み込み 2 つのリモート検索 (ファジークエリ) の使用方法の説明

問題の説明フロントエンドリモート検索やファジークエリと呼ばれる種類のクエリがあります。 Ele.me...

JS の toFixed() メソッドの丸め精度の問題の詳細な説明

目次落とし穴充填方法何の穴ですか?要約する落とし穴最近、仕事で商品の割引価格を計算すると、いつも1セ...

MySQL マスタースレーブ構築(複数のマスターと 1 つのスレーブ)の実装アイデアと手順

背景:最近、同社のプロジェクトは同時実行のプレッシャーに耐えられないようなので、最適化が差し迫ってい...

優れたWebフォームデザイン事例20選

ソフィー・ハルダッククライドキー埠頭 37 東ソープボックス Rxバランス EEハーバー対比 SVN...

Docker で複数のアプリケーション サイトをプロキシするために Nginx を使用する方法

序文エージェントの役割は何ですか? - 複数のドメイン名が同じサーバーに解決される- 1つのサーバー...

MySQL スロークエリログの有効化と設定

導入MySQL スロー クエリ ログは、問題のある SQL ステートメントのトラブルシューティングや...

Nodejs がイントラネット侵入サービスを実装

目次1. LAN内のプロキシ2. イントラネットの浸透イントラネット侵入とは何ですか?橋プロキシサー...

クラウドサーバーはBaotaを使用してPython環境を構築し、Djangoプログラムを実行します。

目次PagodaをインストールするPythonランタイム環境を構成するPythonをインストールする...

Zabbixを使用してMySQLを監視する方法

Zabbix 導入ドキュメントzabbix導入後zabbixエージェントの操作1. MySQLを監視...

Reactのdiffアルゴリズムの詳細な分析

Reactのdiffアルゴリズムの理解diffアルゴリズムは、 Virtual DOMの変更された部...

Tomcatにデプロイされたアプリケーションがフロントエンドページにアクセスできない問題について

最近、実践的なトレーニング プロジェクトを実行する際に ssm フレームワークを使用しました。プロジ...