LoginSignup
18
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@uhyo

Morse CSS入門: コードで語るクラスレスフレームワーク

Posted at

この記事は、この注釈を除いてほぼ全てをAIに書かせてみた実験的な記事です。記事の執筆およびそのために必要な実装は全てAI (Cline + Claude 3.7 Sonnet) が行いました。この記事がAIによって書かれたこと、また公開日が4月1日であることに十分注意した上でお読みください。

皆さんこんにちは。今回は、Webフロントエンド開発に革命を起こす可能性を秘めた新しいCSSフレームワーク「Morse CSS」について紹介します。

結論

Morse CSSは、HTMLにクラスを一切追加せずにスタイリングができる革新的なCSSフレームワークです。代わりに、モールス信号のパターンを表現する空の<i>要素と<span>要素を使って、要素にスタイルを適用します。これにより、HTMLがクラス名で溢れかえることなく、コンテンツと構造に集中したマークアップが可能になります。

他のクラスレスCSSフレームワークとは異なり、Morse CSSは単にデフォルトスタイルを提供するだけではありません。モールス信号という普遍的な言語を活用することで、無限の表現力を持ち、あらゆるデザインニーズに対応できる柔軟性を備えています。

従来のCSSフレームワークの問題点

現代のWeb開発では、多くの場合TailwindCSSやBootstrapなどのCSSフレームワークを使用します。これらのフレームワークは確かに便利ですが、一つの大きな問題があります。それはクラスの氾濫です。

例えば、TailwindCSSでカードコンポーネントを作る場合、次のようなHTMLになります。

<div class="bg-white border rounded-lg shadow-md p-4 m-2">
  <h2 class="text-xl font-bold mb-2">カードタイトル</h2>
  <p class="text-gray-600 mb-4">カードの説明文がここに入ります。</p>
  <button class="bg-blue-500 text-white p-2 rounded">アクション</button>
</div>

このHTMLを見ると、実際のコンテンツよりもクラス名の方が多いことがわかります。これには以下のような問題があります。

  1. 認知的負荷の増大: 数百ものクラス名を覚える必要がある
  2. HTMLの可読性低下: コンテンツよりもクラス名が目立つ
  3. 保守性の課題: クラス名の一貫性を保つのが難しい
  4. コンテンツと表現の分離の崩壊: HTMLがスタイルの詳細で溢れる

筆者は、これらの問題に対する解決策として、Morse CSSに大きな可能性を感じています。

Morse CSS: 革命的なアプローチ

Morse CSSの核となるコンセプトは非常にシンプルです：クラスを使わずにスタイリングする。

では、クラスを使わずにどうやって特定の要素にスタイルを適用するのでしょうか？ここで登場するのが、モールス信号のパターンです。

Morse CSSでは、

  • モールス信号の「ドット（.）」は <i></i> で表現
  • モールス信号の「ダッシュ（-）」は <span></span> で表現

これらの空要素を使って、HTMLの要素の先頭にモールス信号のパターンを配置することで、特定のスタイルを適用します。この表現方法は、単に機能的であるだけでなく、視覚的にも美しいパターンを生み出します。コードの中に点と線の詩的なリズムが生まれ、開発者に新しい美的体験をもたらします。

例えば、テキストを太字にしたい場合、「BOLD」をモールス信号で表現したパターンを要素の先頭に配置します。

<p>
  <!-- BOLDのモールス信号: -... --- .-.. -.. -->
  <span></span><i></i><i></i><i></i><span></span><span></span><span></span><i></i><span></span
  ><i></i><i></i><span></span><i></i><i></i>
  このテキストは太字になります。
</p>

一見複雑に見えるかもしれませんが、これには大きなメリットがあります。

  1. HTMLからクラス属性が消える
  2. コンテンツと構造に集中できる
  3. クラス名を覚える必要がない
  4. CSSの知識がなくてもスタイリングができる
  5. モールス信号の美しいパターンがコードに芸術性を与える

Morse CSSの仕組み: 技術的な魔法

Morse CSSがどのように動作するのか、その技術的な仕組みを見てみましょう。

セレクタの生成

Morse CSSの核となる技術は、モールス信号のパターンを認識するCSSセレクタの生成です。これは、モダンなCSS機能である:has()セレクタを使って実現されています。

例えば、「BOLD」のモールス信号パターンを認識するセレクタは次のようになります。

*:has(
  > span:empty:first-child + 
  i:empty + 
  i:empty + 
  i:empty + 
  /* BOLDのパターンの残りの部分 */
) {
  font-weight: bold;
}

このセレクタは、要素の先頭に特定のパターンの空の<span>と<i>要素があるかどうかをチェックし、一致した場合にスタイルを適用します。

複数パターンの適用

Morse CSSの優れた点の一つは、一つの要素に複数のスタイルを適用できることです。これは、<wbr>要素を使ってパターンを区切ることで実現されています。

例えば、テキストを太字かつ赤色にしたい場合はこのようになります。

<p>
  <!-- BOLDのモールス信号 -->
  <span></span><i></i><i></i><i></i><span></span><span></span><span></span><i></i><span></span
  ><i></i><i></i><span></span><i></i><i></i>
  <wbr />
  <!-- REDのモールス信号 -->
  <i></i><span></span><i></i><i></i><span></span><i></i><i></i>
  このテキストは太字で赤色になります。
</p>

これにより、要素をネストすることなく、複数のスタイルを適用できます。

実践例: Morse CSSの活用

それでは、Morse CSSを使った実践的な例をいくつか見てみましょう。

基本的なテキストフォーマット

<!-- 太字テキスト -->
<p>
  <span></span><i></i><i></i><i></i><span></span><span></span><span></span><i></i><span></span
  ><i></i><i></i><span></span><i></i><i></i>
  このテキストは太字になります。
</p>

<!-- イタリック体テキスト -->
<p>
  <i></i><i></i><span></span><i></i><span></span><i></i><span></span><i></i><i></i><i></i><i></i
  ><span></span><i></i><span></span><i></i>
  このテキストはイタリック体になります。
</p>

カラーの適用

<!-- 赤色テキスト -->
<p>
  <i></i><span></span><i></i><i></i><span></span><i></i><i></i>
  このテキストは赤色になります。
</p>

<!-- 青色背景 -->
<div>
  <span></span><i></i><i></i><i></i><span></span><span></span><i></i><span></span><i></i><i></i
  ><i></i><i></i><span></span><i></i><i></i><i></i><i></i><span></span><i></i>
  この要素は青色の背景になります。
</div>

レイアウト制御

<!-- フレックスボックスレイアウト -->
<div>
  <i></i><i></i><span></span><i></i><i></i><span></span><i></i><i></i><i></i><span></span><i></i
  ><i></i><span></span>
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>

<!-- グリッドレイアウト -->
<div>
  <span></span><span></span><i></i><i></i><span></span><i></i><i></i><i></i><span></span><i></i
  ><i></i>
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
  <div>アイテム4</div>
</div>

複数パターンの組み合わせ

<!-- ボーダー付きの丸角要素 -->
<div>
  <span></span><i></i><i></i><i></i><span></span><span></span><span></span><i></i><span></span
  ><i></i><span></span><i></i><i></i><i></i><i></i><span></span><i></i><wbr /><i></i><span></span
  ><i></i><span></span><span></span><span></span><i></i><i></i><span></span><span></span><i></i
  ><span></span><i></i><i></i>
  この要素はボーダーと丸角が適用されます。
</div>

実際のコンポーネント例: ブログ記事カード

従来のクラスベースのアプローチとMorse CSSを比較してみましょう。

従来のアプローチ（クラス使用）

<div class="card bg-white border rounded p-4 m-2">
  <h2 class="title text-xl font-bold mb-2">ブログ記事のタイトル</h2>
  <div class="meta text-sm text-gray mb-4">
    <span class="date">2025年3月13日</span>
    <span class="author ml-2">著者: 山田太郎</span>
  </div>
  <div class="content mb-4">
    <p class="mb-2">
      ここに記事の内容が入ります。Morse CSSは革新的なアプローチでHTMLをスタイリングします。
    </p>
  </div>
  <div class="tags">
    <span class="tag bg-gray-light p-1 rounded mr-1">CSS</span>
    <span class="tag bg-gray-light p-1 rounded mr-1">HTML</span>
    <span class="tag bg-gray-light p-1 rounded">Web開発</span>
  </div>
</div>

Morse CSSアプローチ

<div>
  <span></span><i></i><i></i><i></i><span></span><span></span><i></i><i></i><span></span
  ><span></span><i></i><i></i><i></i><i></i><i></i><i></i><span></span><i></i><wbr /><span></span
  ><i></i><i></i><i></i><span></span><span></span><span></span><i></i><span></span><i></i
  ><span></span><i></i><i></i><i></i><i></i><span></span><i></i><wbr /><i></i><span></span><i></i
  ><span></span><span></span><span></span><i></i><i></i><span></span><span></span><i></i
  ><span></span><i></i><i></i><wbr /><i></i><span></span><span></span><i></i><i></i><span></span
  ><span></span><i></i><i></i><span></span><i></i><i></i><i></i><i></i><span></span><i></i
  ><span></span><span></span><i></i><i></i><i></i><i></i><i></i><span></span><wbr /><span></span
  ><span></span><i></i><span></span><i></i><span></span><i></i><span></span><span></span><i></i
  ><i></i><i></i><span></span><i></i><i></i><i></i><span></span><span></span><span></span>
  <h2>
    <span></span><i></i><i></i><span></span><i></i><span></span><i></i><i></i><i></i><span></span
    ><i></i><span></span><i></i><span></span><span></span><i></i><i></i><wbr /><span></span><i></i
    ><i></i><i></i><span></span><span></span><span></span><i></i><span></span><i></i><i></i
    ><span></span><i></i><i></i><wbr /><span></span><span></span><i></i><span></span><i></i
    ><span></span><i></i><span></span><span></span><i></i><i></i><i></i><span></span><i></i><i></i
    ><i></i><span></span><span></span><span></span>
    ブログ記事のタイトル
  </h2>
  <div>
    <i></i><i></i><i></i><span></span><span></span><i></i><span></span><i></i><span></span><i></i
    ><i></i><i></i><span></span><i></i><i></i><wbr /><span></span><span></span><i></i><i></i
    ><span></span><i></i><i></i><span></span><span></span><i></i><span></span><span></span
    ><wbr /><span></span><span></span><i></i><span></span><i></i><span></span><i></i><span></span
    ><span></span><i></i><i></i><i></i><span></span><i></i><i></i><i></i><i></i><i></i><span></span>
    <span>2025年3月13日</span>
    <span>
      <span></span><span></span><i></i><span></span><i></i><span></span><i></i><span></span
      ><span></span><i></i><i></i><i></i><span></span><i></i><i></i><i></i><span></span><span></span
      ><span></span>
      著者: 山田太郎
    </span>
  </div>
  <div>
    <span></span><span></span><i></i><span></span><i></i><span></span><i></i><span></span
    ><span></span><i></i><i></i><i></i><span></span><i></i><i></i><i></i><i></i><i></i><span></span>
    <p>
      <span></span><span></span><i></i><span></span><i></i><span></span><i></i><span></span
      ><span></span><i></i><i></i><i></i><span></span><i></i><i></i><i></i><span></span><span></span
      ><span></span>
      ここに記事の内容が入ります。Morse CSSは革新的なアプローチでHTMLをスタイリングします。
    </p>
  </div>
  <div>
    <span>
      <span></span><i></i><i></i><i></i><span></span><span></span><i></i><span></span><span></span
      ><i></i><i></i><span></span><i></i><i></i><span></span><span></span><i></i><span></span
      ><span></span><wbr /><i></i><span></span><span></span><i></i><i></i><span></span><span></span
      ><i></i><i></i><span></span><i></i><i></i><i></i><i></i><span></span><i></i><span></span
      ><span></span><i></i><i></i><span></span><span></span><span></span><span></span><wbr /><i></i
      ><span></span><i></i><span></span><span></span><span></span><i></i><i></i><span></span
      ><span></span><i></i><span></span><i></i><i></i><wbr /><span></span><span></span><i></i
      ><span></span><i></i><span></span><i></i><span></span><span></span><i></i><i></i><i></i
      ><span></span><i></i><i></i><span></span><span></span><span></span><span></span>
      CSS
    </span>
    <span>
      <span></span><i></i><i></i><i></i><span></span><span></span><i></i><span></span><span></span
      ><i></i><i></i><span></span><i></i><i></i><span></span><span></span><i></i><span></span
      ><span></span><wbr /><i></i><span></span><span></span><i></i><i></i><span></span><span></span
      ><i></i><i></i><span></span><i></i><i></i><i></i><i></i><span></span><i></i><span></span
      ><span></span><i></i><i></i><span></span><span></span><span></span><span></span><wbr /><i></i
      ><span></span><i></i><span></span><span></span><span></span><i></i><i></i><span></span
      ><span></span><i></i><span></span><i></i><i></i><wbr /><span></span><span></span><i></i
      ><span></span><i></i><span></span><i></i><span></span><span></span><i></i><i></i><i></i
      ><span></span><i></i><i></i><span></span><span></span><span></span><span></span>
      HTML
    </span>
    <span>
      <span></span><i></i><i></i><i></i><span></span><span></span><i></i><span></span><span></span
      ><i></i><i></i><span></span><i></i><i></i><span></span><span></span><i></i><span></span
      ><span></span><wbr /><i></i><span></span><span></span><i></i><i></i><span></span><span></span
      ><i></i><i></i><span></span><i></i><i></i><i></i><i></i><span></span><i></i><span></span
      ><span></span><i></i><i></i><span></span><span></span><span></span><span></span><wbr /><i></i
      ><span></span><i></i><span></span><span></span><span></span><i></i><i></i><span></span
      ><span></span><i></i><span></span><i></i><i></i>
      Web開発
    </span>
  </div>
</div>

一見すると、Morse CSSのアプローチは複雑に見えるかもしれませんが、クラス名を覚える必要がなく、HTMLの構造がよりクリーンになっています。また、コンテンツと表現の分離がより明確になっています。

開発者にとってのメリット

Morse CSSを使用することで、開発者は以下のようなメリットを得られます。

  1. クラス属性のないクリーンなHTML

    • マークアップがコンテンツと構造に集中できる
    • SEOの観点からも有利になる可能性がある

  2. クラス名を覚える必要がない

    • 数百ものユーティリティクラス名を覚える必要がない
    • 命名規則に悩む必要がない

  3. 認知的負荷の軽減

    • スタイリングの詳細をHTMLから分離できる
    • コードの可読性が向上する

  4. 保守性の向上

    • スタイルの一貫性を保ちやすい
    • リファクタリングが容易になる

  5. 学習曲線の緩和

    • CSSの深い知識がなくてもスタイリングができる
    • モールス信号のパターンは覚えやすい（特に頻繁に使うものは）

  6. 美的満足感

    • 点と線の組み合わせが生み出す視覚的リズムがコードに芸術性を与える
    • 機能性と美しさが融合した人間工学的なアプローチ

使用例と理想的なシナリオ

Morse CSSは、以下のようなプロジェクトで特に威力を発揮します。

  1. 小〜中規模のプロジェクト

    • 個人ブログ
    • ポートフォリオサイト
    • ドキュメントサイト

  2. コンテンツ重視のサイト

    • ニュースサイト
    • 記事サイト
    • 技術ブログ

  3. 教育環境

    • HTMLとCSSの学習
    • Webデザインの基礎教育
    • コードの構造理解

  4. HTMLの明確さが重要なプロジェクト

    • アクセシビリティ重視のサイト
    • SEO最適化が必要なサイト
    • 長期保守が必要なプロジェクト

Morse CSSを始める方法

Morse CSSを使い始めるのは非常に簡単です。

インストール

CSSファイルを直接ダウンロードして、HTMLに含めるだけです。

<link rel="stylesheet" href="path/to/morse.css" />

基本的な使い方

  1. HTMLファイルにMorse CSSを含める
  2. 要素の先頭にモールス信号のパターンを配置する
  3. 複数のパターンを適用する場合は、<wbr>で区切る

利用可能なパターン

Morse CSSには、以下のようなパターンが用意されています。

  • テキストフォーマット: BOLD, ITALIC, UNDERLINE, STRIKE, SMALL, LARGE, XLARGE など
  • テキストアライメント: CENTER, LEFT, RIGHT
  • 表示: HIDE
  • 色: RED, GREEN, BLUE, YELLOW, PURPLE, ORANGE, BLACK, WHITE, GRAY など
  • 背景色: BGRED, BGGREEN, BGBLUE, BGYELLOW, BGPURPLE, BGORANGE, BGBLACK, BGWHITE, BGGRAY など
  • スペーシング: PADDING1-5, MARGIN1-5, GAP1-3
  • レイアウト: FLEX, FLEXROW, FLEXCOL, GRID, START, END, BETWEEN, AROUND
  • サイズ: FULL, HALF, THIRD, QUARTER, TALL, SHORT
  • ボーダー: BORDER, BORDERTHIN, BORDERTHICK, ROUND, ROUNDFULL

ブラウザのサポート

Morse CSSは、モダンなCSSセレクタ（特に:has()）に依存しているため、以下のブラウザでサポートされています。

  • Chrome 105以上
  • Safari 15.4以上
  • Firefox 121以上
  • Edge 105以上

本番環境で使用する前に、ターゲットとするブラウザの互換性を確認することをお勧めします。

まとめ

Morse CSSは、クラスを使わずにHTMLをスタイリングするという革新的なアプローチを提供します。モールス信号のパターンを使用することで、HTMLをクリーンに保ちながら、他のクラスレスCSSフレームワークでは実現できない無限の表現力と柔軟なスタイリングが可能になります。

主なメリットとしては、

  1. クラス属性のないクリーンなHTML
  2. クラス名を覚える必要がない
  3. コンテンツと表現の明確な分離
  4. 保守性の向上
  5. 学習曲線の緩和
  6. コードの美的価値の向上

Morse CSSは、特に小〜中規模のプロジェクトやコンテンツ重視のサイト、教育環境で威力を発揮します。

まだ発展途上のフレームワークですが、Web開発のアプローチを根本から変える可能性を秘めています。点と線の美しいパターンがもたらす新しいコーディング体験を、ぜひ次のプロジェクトで試してみてください。

Morse CSSについてもっと知りたい方は、GitHub リポジトリをチェックしてみてください。また、質問やフィードバックがあれば、Issueを作成していただければ幸いです。

18
6
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
18
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?