モノスペース・ウェブ
(owickstrom.github.io)紹介
モノスペースフォントは多くの人に愛されている。可読性、一貫性、美的感覚に優れている。このページはモノスペースグリッドを使ってテキストとダイアグラムを整列する。シンプルなMarkdown文書から生成され、CSSと少しのJavaScriptでレンダリングされる。レスポンシブデザインを採用し、文字サイズの単位で縮小される。標準要素がきちんと動作することを目指している。70年代スタイルのセマンティックHTMLでレンダリングされる。
基本事項
- 文書にはいくつかの追加クラスが使われているが、ほとんどはマークアップである。
- 例として通常の段落と水平線がある。
<details>要素を使って内容を隠すことができる。
リスト
-
一般的な箇条書きリスト:
- バナナ
- 紙の舟
- キュウリ
- ロケット
-
順序付きリスト:
- 目標
- 動機
- 内発的
- 外発的
- 二次効果
-
ツリー可視化:
/dev/nvme0n1p2usrlocalsharelibexecincludesbinsrclib64lib
gamessolitairesnaketic-tac-toe
mediaruntmp
テーブル
- モノスペースグリッドに自動で合う通常のテーブルを使える。
- 例:
- 名前: Boboli Obelisk、サイズ: 1.41m × 1.41m × 4.87m、位置: 43°45’50.78”N 11°15’3.34”E
- 名前: Pyramid of Khafre、サイズ: 215.25m × 215.25m × 136.4m、位置: 29°58’34”N 31°07’51”E
フォーム
- ボタンと入力フィールドの例:
- ボタン: RESET, SAVE
- 入力フィールド: 名、姓、年齢
グリッド
- コンテナにグリッドクラスを追加すると、水平方向の空間を均等に分割できる。
- 特定のセルに
flex-grow: 1;を設定すると、残りの空間を埋めることができる。
ASCIIアート
-
<pre>タグを使ってボックス描画文字で図を描くことができる。 -
例:
╭─────────────────╮ │ MONOSPACE ROCKS │ ╰─────────────────╯ -
<figure>タグと<figcaption>を追加して強調できる。 -
メッセージ伝達の例:
┌───────┐ ┌───────┐ ┌───────┐ │Actor 1│ │Actor 2│ │Actor 3│ └───┬───┘ └───┬───┘ └───┬───┘ │ │ │ │ msg 1 │ │ └────────►│ │ │ msg 2 │ └────────►│ ┌───┴───┐ ┌───┴───┐ ┌───┴───┐ │Actor 1│ │Actor 2│ │Actor 3│ └───────┘ └───────┘ └───────┘ -
チャートの例:
Things I Have │ ████ Usable 15 │ ░░░░ Broken 12 │ ░ 9 │ ░ ░ 6 │ █ ░ ░ 3 │ █ █ █ 0 └───▀─────────▀─────────▀──────────▀───────────── Socks Jeans Shirts USB Drives
メディア
- 画像や動画のようなメディアオブジェクトをサポートする。
- 例:
- フランスの城の部屋 (2024)
- ウェブの中心 (1914), Wikimedia
議論
- CSSの技術を発展させ、デザインを楽しみながら制作された。
- 使ったりフィードバックをくれたりすると嬉しい。
- 全ソースコードはGitHubで確認できる: github.com/owickstrom/the-monospace-web
- U.S. Graphics Company に感謝を伝えている。
GN⁺のまとめ
- このプロジェクトは、モノスペースフォントを使ったウェブデザインの実験である。
- レスポンシブデザインとセマンティックHTMLを組み合わせ、70年代スタイルのウェブページを実現している。
- 開発者がCSSとデザインのスキルを向上させるのに役立つ可能性がある。
- 類似の機能を持つプロジェクトとしては「CSS Zen Garden」がある。
1件のコメント
Hacker Newsの意見
あるユーザーは monospace のページ一覧を維持しており、現在は約50件ある
あるユーザーは、数年前に monospace フォントで書かれたビデオゲーム攻略サイトを探している
あるユーザーは「インディーウェブ」の哲学に言及している
あるユーザーは、monospace フォント自体は悪くないが、強制改行が問題だと述べている
あるユーザーは個人サイトのフォントを monospace に変更しようかと考えている
あるユーザーは、monospace は見た目が良くレスポンシブだが、本文テキストには向いていないと述べている
あるユーザーは、有名な C64 リソースである「VIC article」が今でも monospace で提供されていると述べている
あるユーザーは、ウェブが再び本来の姿に戻りつつあると述べている
あるユーザーは、tree ul-list CSS クラスは HTML 標準の一部になるべきだと考えている
あるユーザーは、OpenBSD が数年前からコンソールフォントを「Spleen」に設定していると述べている