55 行
3.2 KiB
HTML
55 行
3.2 KiB
HTML
<title>CLASSの無いCSS - 美々蝶々</title>
|
|
|
|
<h1>CLASSの無いCSS</h1>
|
|
|
|
<ul>
|
|
<li>2023-06-22 (陰暦05月05日) たかし</li>
|
|
</ul>
|
|
|
|
<h2>序</h2>
|
|
|
|
<p>筆者は、CSS で CLASS セレクターを使用しなければ、ソースが小さく簡潔になり、サイトの保守性も高まると考へてゐます。</p>
|
|
|
|
<p>HTML/CSS でサイトを作る時は、DIV 要素などに CLASS 屬性を附けて、CLASS セレクターでスタイルを定義する事が多いです。ところが當サイトでは CLASS 屬性を全く使用せず、P や UL-LI などの要素タイプに直接スタイルを定義してゐます。この方式をしばらく續けて、幾つかの利點が見えてきました。</p>
|
|
|
|
<h2>1</h2>
|
|
|
|
<p>CLASS を使用しない最大の利點は、CLASS のための DIV や SPAN などが消えて、HTML が小さくなる事です。小さな HTML は書くのが簡單で、保存や轉送にかかる資源も少ないです。</p>
|
|
|
|
<p>他の利點は HTML と CSS とが互ひに獨立する事です。外観を変更する時は CSS だけを修正すればよく、HTML を書く時は外観の事を忘れ、文章に集中できます。HTML と CSS とを繋ぐ CLASS が無くなり、兩者が疎結合になるわけです。</p>
|
|
|
|
<h2>2</h2>
|
|
|
|
<p>HTML と CSS とが互ひに獨立してゐれば、デザインの再利用も容易です。例へば任意の HTML に對して當サイトの CSS を使用すれば、當サイトと同じデザインにできます。これは WordPress のテーマに似てゐますが、仕組みはより簡單です。</p>
|
|
|
|
<p>これは初心者がサイト作りを學ぶ時にも役立つはずです。もし、CLASS の 無い CSS の素材が沢山あれば、初心者は先づ HTML の書き方だけを學び、書いた HTML に好きな CSS 素材を適用すればサイトを完成できます。世間のデザインテンプレートは、HTML と CSS がセットになつてゐて、これを初心者が使ふと HTML をよく分らないまま、HTML をコピーしてタイトルや本文を書き換へて終りになり易いと感じます。</p>
|
|
|
|
<h2>3</h2>
|
|
|
|
<p>とはいへ、CLASS を全く使用しなければ、サイトの外観には制約ができます。</p>
|
|
|
|
<ul>
|
|
<li>ヘッダー/メニュー/フッターなどのレイアウトが困難になる</li>
|
|
<li>局所的なスタイルを定義できない</li>
|
|
</ul>
|
|
|
|
<p>それでも制約の中で個性的なサイトを作る事はできると考へます。CSS にはたくさんのセレクターやプロパティがあり、意外と様々な表現ができるからです。CSS3 以降を使用すれば尚更です。</p>
|
|
|
|
<ul>
|
|
<li>(筆者のセンス不足・拘りから、當サイトの CSS は初歩的な物に留まります。)</li>
|
|
</ul>
|
|
|
|
<h2>參考</h2>
|
|
|
|
<ul>
|
|
<li><a href="https://kasaitoushi.nagano.jp/simpla-retejo.php">私のサイトがシンプルな──そしてあなたのサイトもそうすべき──理由</a> - HTML を小さくする事の重要性</li>
|
|
</ul>
|
|
|
|
<h2>關聯</h2>
|
|
|
|
<ol>
|
|
<li><a href="./webdesign.html">ウェブサイトの設計方針</a></li>
|
|
<li>CLASSの無いCSS</li>
|
|
<li><a href="./pattern.html">HTMLのパターン集</a></li>
|
|
</ol>
|