noclass

src/index.html

@@ -34,6 +34,8 @@
 	<dd>2023-03-14 (陰暦02月23日)</dd>
 <dt><a href="./sns.html">分散SNSとの附き合ひ方</a></dt>
 	<dd>2023-04-10 (陰暦閏02月20日)</dd>
+<dt><a href="./noclass.html">CLASSの無いCSS</a></dt>
+	<dd>2023-06-22 (陰暦05月05日)</dd>
 </dl>
 
 <h3>2. GNU/Linux、BSD</h3>

src/noclass.html

@@ -0,0 +1,53 @@
+<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>
+</ol>

src/webdesign.html

@@ -38,3 +38,10 @@
 <h2>以上</h2>
 
 <p>たまに自分のサイトのデザインの方針を書く人が居て、わたしはそれを読むのが好きだから、この記事を書きました。全くの無価値ではない筈……</p>
+
+<h2>關聯</h2>
+
+<ol>
+	<li>ウェブサイトの設計方針</li>
+	<li><a href="./noclass.html">CLASS無しのCSS</a></li>
+</ol>