- magick.cssは、単一ファイルで提供されるほぼ classless なCSSフレームワークで、読みやすく情報が伝わりやすい「魔法使いのノート」のようなWeb文書スタイルを目指している
- あらゆる画面サイズで動作し、JavaScriptなしで使えるため、静的ドキュメントや軽量なHTMLページにすぐ適用しやすい
- CDN、ファイルの直接読み込み、npm import 方式でインストールでき、
normalize.cssと併用する構成を案内している
- 基本構造は
と を中心にした読みやすいカラムで、``と sidenote により本文横に補足説明を付けられる
- HTMLの基本要素の大半をスタイリングする一方、sidenoteやコード行番号のように構造が必要な機能は別クラスとして提供する
magick.cssの目的と性格
- magick.cssは、ミニマルで大部分が classless なCSSフレームワーク
- 単一ファイルに収められており、CSS内のコメントで選択理由を追える
- 視覚的には優雅でありながら遊び心のある魔法的な雰囲気を作り、読みやすさと情報伝達力を優先する
- すべてのデバイスと画面サイズで見た目と機能を維持し、JavaScriptなしで動作する
- LaTeX、古いTTRPGルールブック、concrete.css、Tufte CSS、ブルータリズムの「usability as design」という倫理から着想を得ている
インストールと使い方
- 最速で確認するには、HTMLの``にCDNスタイルシートを2つ追加する
- リポジトリから
magick.cssファイルをダウンロードし、通常のCSSのように読み込むこともできる
- JavaScriptプロジェクトではnpmでインストールしてから import する
npm install normalize.css magick.css
import 'normalize.css'
import 'magick.css'
- 99% classlessな構成で、既存のHTML5文書にも適用しやすいよう作られている
読むことを中心にしたレイアウト
- レスポンシブなカラムを作るには、全体のコンテンツを
で囲み、長い文章はで分ける構成を推奨している
- 一般的な文書構造は、
の中に、複数の、を置く方式
- この構造に従わなくても、magick.cssをタイポグラフィとスタイル付きコンポーネント用途だけに使える
- 付加情報は``タグで表現する
- 本文の途中に追加の文脈を付けたいときは sidenote を使い、番号は自動で振られる
基本HTML要素のスタイル
- タイポグラフィは、見出し、段落、リンク、強調、下線、小さい文字、インラインコードなどを扱う
- ``より低い heading はmagick.cssではスタイリングしない
- 低い階層の heading は、階層構造よりも特殊な用途に使われることが多いと見ている
- 必要な場合はユーザーが自分でスタイリングできる
- リストはコンテンツを邪魔しないようシンプルに保つ
- 表はデータに集中できるよう、明確で簡潔なスタイルを使う
- フォームと入力要素は単独でも form 内でも使用できる
- テキスト入力は用途が多様なため、サイズや配置について強い主張を持たせていない
- チェックボックスとラジオボタンの label は input の後に来ることを想定している
- form は手書きの紙ノートのような感覚で、ユーザーの注意を引くようスタイリングされている
メディア、コード、引用
- 画像と動画は単独で配置するか、``内に入れてキャプション付きで表現できる
- 単独の``は、十分なスペースがある場合は自然なサイズで表示され、引き伸ばされたり歪んだりしない
とを使うと、メディアをより目立たせて表示し、文脈を追加できる- コードはインラインの場合
を使い、大きなコードブロックはが``を包む構造を使う
- コード片も figure として表示できる
- 引用文は``を使う
- 出典表記は blockquote 内の``で追加する
- 詩のように書式が重要なテキストは``で囲める
別クラスで使う機能
- 一部の機能には特別な class が必要で、magick.cssの中核的な classless 動作から分離されている
- sidenoteを本文に入れるには、参照位置と sidenote 本文を一緒に追加する
Sidenote Content.
- モバイル端末では sidenote がメインカラム内へ移動する
- コードや pre ブロックに行番号を表示するには、各行番号を含む``を挿入する必要がある
- 行番号の挿入は、手作業、JavaScript、サーバーサイド処理のうち好みの方法で行える
プロジェクトリンク
- 気に入ったらGitHubでスターを付けられる
- 他の作業に興味があればDiscordに参加できる
1件のコメント
Hacker Newsのコメント
入力欄の手書き風フォントと有機的なセリフ体の組み合わせ方、バランスの取れた行間や太さまで細かく気を配っている点が良い
興味がある人向けのコード: https://github.com/wintermute-cell/magick.css/blob/master/ma...
カスタムチェックボックスとラジオボタンもあればよかった。今のところその2つだけが没入感を壊していて、他は本当に素晴らしい。前から考えていたブログをついに作るきっかけになるかもしれない
あまりにしっくりきていて、ほとんど意識されないほどだ
閉じタグが
mainではなくheaderになっている点を見るべきだざっと中身を見たかったのに、元の内容を見るには余計に数ステップ必要だった。少なくとも未処理の形に直接飛べるクリック可能なリンクくらいはあるとよい
mainタグを使い、コメント欄やタグのように関連はあるが補足的なコンテンツには別のタグを使うMAINタグの前後に来るべきだ不思議とそういう感じにすごく惹かれる
そこに昔の大学教授のウェブサイトのような、ほとんどHTMLだけの極端にミニマルな見た目も格好いい
個人ブログがもっと人気になってほしい
少なくとも私の文章では、技術記事であろうとなかろうと、画像とテキストは一つの連続した物語を成している。画像を並べ替えて別の場所へ移すのは、段落に対してそれをするのと同じくらい筋が通らない
実際、何であれ全部大文字で書かないほうがよい。下線と同じくタイプライター時代由来の強調方法で、当時は一つの書体しか使えなかったからだ
大文字の字形は互いに似すぎている。文字の高さの変化がないので、目にとって読み取りにくくなる。大文字小文字を混ぜれば、
y、p、jのように下に伸びる文字や、b、d、tのように上に伸びる文字があって変化が生まれ、より認識しやすくなる強調にはサイズ、太さ、イタリックを使うほうがよい
ただ、そのおかげで独特のスタイルも生まれている
それでも私は気に入っていると思う
かなり良い汎用フレームワークは簡単に見つかるが、はっきりした味のあるものを求めるとずっと難しくなる
https://www.mcsweeneys.net/articles/im-comic-sans-asshole
特に細いウェイトがダークテーマと組み合わさると、テキストを読むのがかなりつらくなる
/etc/hostsレベルで遮断する常識的に扱う代わりに、Googleは結局800人を対象にユーザー調査をして、「テキスト入力欄はテキスト入力欄のように見えるべきだ」という結論に達した: https://medium.com/google-design/the-evolution-of-material-d...
昔一つ作ってみたことがあるが、たぶんこれほど良くはない: https://elementcss.neocities.org