HTML/CSSにおける記号論の詳細な説明

この記事では、ソシュールの言語哲学などの理論に基づいて、CSS の class 属性は不要であると主張します。

CSS の利点は、クラス属性に頼ることなく、HTML 要素をさまざまなスタイルでスタイリングできることです。この記事では、クラス属性が時代遅れであり、レイアウトには適していないことを証明します。クラスを使用しないことで、より使いやすく再利用可能なコンテンツを作成するためのトレーニングになります。

同じタイプの 2 つの要素が同じコンテキストに出現した場合、類似しているとみなされるでしょうか?

ソシュールの言語をシステムとして理解する考え方は、パラダイムとセグメント（集合と構成）という 2 つの基本的な関係に基づいています。

パラダイム

パラダイムとは、機能的には類似しているが、意味には微妙な違いや根本的な違いがある単語のグループです。たとえば、「カニはロブスターの隣にあります」。「位置する」という語は、置換語のパラダイムに属し、「休んでいる」、「しゃがんでいる」、「立っている」など、置換関係を指すこともできます。

英語では置換に関して一定のルールがあり、動詞を名詞に置き換えることはできません。HTML の場合と同様、インライン要素 (inline のような動作動詞を表す) をブロックレベル要素 (名詞) に置き換えることもできません。

セグメント

段落は基本的に、パラダイム的な選択で構成される構造セグメントです。英語では、文、段落、章、本はすべてセグメントです。 HTML では、選択した要素で構成されるコード ブロックを段落と見なすことができます。

各セグメントには独自の意味体系があり、段落が章に属するのと同じように、小さなセグメントは大きなセグメント体系に属することができます。

有用性は？

ソシュールの言語モデルは、新しい単語を発明したり、古い単語を再定義したりすることなく、数テラバイトの小説、フィクション、エッセイ、演劇を認識したり、書き込んだりすることができます。このモデルが英語のような自然言語に十分適しているのであれば、HTML のような単純なメタ言語にも十分適しているはずです。もちろん、新しい要素が HTML 仕様にゆっくりと導入されるのと同じように、時間の経過とともに新しい単語が作られますが、これは慎重な審議と合意を通じて行われます。クラスにはそのような承認プロセスはありません。

ソシュールのモデルは、私たちに優雅さと創意工夫の余地を十分に与え、間違った選択をすることを禁じます。ドキュメントを構成する要素を、その内容と場所に基づいてスタイル設定することで、ユーザーを誤解させたり混乱させたりすることが極めて難しくなります。私たちが行ったのは、CSS を使用してページの固有の構造を表示することだけです。

文脈の重要性

記号論的観点から見ると、おそらく 2 つの類似した物事の間の唯一の本当の違いは、それらのコンテキスト、つまりそれらが存在する環境です。イギリス人とフランス人の原住民は遺伝的には似ていますが、文化的には異なります。彼らの国民的背景は、多くの注目すべき点で彼らを異なっています。

次の HTML/CSS:

<font><i>// HTML:</i></font><font>

<記事>
   <h1 <b>class</b>=</font><font>"main-title"</font><font>>記事のタイトル</h1>
   <余談>
      <h1 <b>class</b>=</font><font>"main-title"</font><font>>サイドタイトル</h1>
   </余談>
</記事>

</font><font><i>// CSS:</i></font><font>
.メインタイトル{
   フォントサイズ:30px;
}
</font>

.main-title クラスを作成して、すべてのトップレベルの見出しに簡単に同じスタイルを設定できるようにするトランスレータを作成しました。しかし、この例の 2 つの見出し h1 は似ていません。HTML5 パーサーを理解している人なら誰でも、1 つの見出し h1 が aside グループに属し、もう 1 つの見出し h1 が記事に直接属していることがわかります。これら 2 つの関係のうち、どちらが最も重要でしょうか。

直接記事に属する:

<記事>
   <h1 <b>class</b>=<font>"main-title"</font><font>>記事のタイトル</h1>
</font>

直接は aside に属し、aside は article に属します。

<記事>
   <h1 <b>class</b>=<font>"main-title"</font><font>>記事のタイトル</h1>
   <余談>
      <h1 <b>class</b>=</font><font>"main-title"</font><font>>サイドタイトル</h1>
</font>

パーサーは、aside h1 見出しを、最初の見出しの後に来る単なるサブ見出しとして扱います。

この例のクラスは冗長です。h1 スタイル属性を使用して、font-size: 30px のような要素のスタイルを設定することもできます。重要なのは、コンテキストに基づいて 2 つの要素を区別し、コンテキストを区別する方法として派生セレクター aside h1 を使用すると、CSS が HTML の構造にバインドされ (aside h1 は構造であり、h1 は小さい段落に属し、aside は大きい段落に属し、小さい段落 h1 は大きい段落 aside に含まれます)、要素の外観が計算された意味と一致することです。

モジュール性と移植性

Class 属性を使用する方法は、実際にはオブジェクト指向の方法です。オブジェクト指向の方法は、環境の背景に関わらず、要素をどこでも同じように見せることです。これは、イギリス人が他の国に移住して、現地の言語を話すことを拒否するようなものです。これは不適切です。

私は CSS をオブジェクト指向ではなく、インターフェース指向だと考えています。 CSS の目的は、個々のアイテムを希望どおりに見せることではなく、説得力があり読みやすい HTML ドキュメントをスタイル設定するためのインターフェイスを提供することです。インターフェースを最適に理解できるようにするには、すべてのコンポーネントが適切に連携し、コンポーネントの出所に関係なく全体的な視覚構造を尊重する必要があります。

つまり、私たちの目標は、スタイルとコンテンツを完全に分離し、コンテンツが異なるスタイルのインターフェース間で流れるようにしながら、スタイルのインターフェースは変更しないことです。整形式のドキュメントでは、属性はコンテンツのソースを表現する必要があります (要素属性としてのクラスはコンテンツのソースを表現するのではなく、コンテンツ ソースの種類を表現します)。

要約する

上記は、編集者による HTML/CSS の記号論の紹介です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。編集者がすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。