ハクソク

世界を動かす技術を、日本語で。

タフテ CSS

264日前原文(edwardtufte.github.io)

概要

Tufte CSS は、Edward Tufteの著作や配布資料のデザイン思想をウェブ記事に適用するためのCSSツールセット。 特徴は シンプルさ、サイドノート、図と本文の一体化、厳選されたタイポグラフィ。 Dave Liepmannが開発し、現在はEdward Tufteプロジェクトとして管理。 印刷物とウェブの違い を理解し、Tufteの手法をウェブ向けに柔軟に応用することが目的。 GitHubで貢献歓迎、貢献ガイドラインに従うこと。

Tufte CSSの概要と思想

  • Tufte CSS は Edward Tufte の書籍・配布資料のデザイン手法をウェブ上で再現するCSSフレームワーク
  • シンプルさ、サイドノート（sidenotes）、図と本文の一体化、厳選されたタイポグラフィ が特徴
  • Dave Liepmann が開発し、現在は Edward Tufteプロジェクト として管理
  • Tufte-LaTeX や R MarkdownのTufte Handout フォーマットから着想
  • GitHub（tufte-css） でのissueやpull requestによる貢献を歓迎
  • 貢献ガイドライン の遵守が必須
  • ウェブと印刷物の違い を考慮し、「Tufte本の再現」ではなく「Tufte手法のウェブ応用」が目的
  • Tufte CSSは出発点 であり、目的地（完成形デザイン）ではない

導入方法

  • tufte.css と et-bookフォントディレクトリ をプロジェクトに追加
  • HTMLの head タグ内に<link rel="stylesheet" href="tufte.css"/>を記述
  • CSSルール と Tufte CSSの記法 に従いコーディング
  • View Source や Inspect Element で効果を確認しながら作業

基本構造と見出し

  • article要素 内に sectionタグ で論理構造を整理
  • h1 ：ドキュメントタイトル
  • p.subtitle ：サブタイトル
  • h2 ：セクション見出し
  • h3 ：下位見出し（h4以降は非推奨）
  • 見出し階層は2段階まで 推奨、冗長な階層は避ける
  • blockquote と footer で引用表現、Tufte本の例に倣う
  • newthoughtクラス で小文字大文字の強調、セクション冒頭の演出

テキストとタイポグラフィ

  • 背景色 は#fffff8、文字色は#111111で コントラストを緩和
  • ETBookフォント を標準、fallbackでPalatinoやGeorgia
  • strong/italic 用に別フォントファイルを用意、ブラウザの自動変換を避ける
  • sansクラス でGill Sans等のサンセリフ体に切替可能
  • リンク は本文と同色、アンダーラインのみで判別
  • 青色リンクは非推奨、下線がクリック可能性を示す

エピグラフ（Epigraphs）

  • 引用文 や 章頭の言葉 を blockquote で表現
  • footer で出典明記
  • 短文・長文・複数引用 にも対応

サイドノート・マージンノート

  • サイドノート は 脚注 に似るが、ページ下部でなく余白に表示
  • ラベル＋チェックボックス＋sidenoteクラスのspan で実装
  • ID割り当て は手動（例：sn-、mn-で識別）
  • sectionタグ内で配置 すると読みやすさ向上
  • マージンノート は番号なし、symbol（例：⊕）でトグル表示
  • 小画面ではトグル式、大画面では余白表示

図表・画像（Figures）

  • figure要素 推奨、mainカラム内に収める
  • ラベルやマージンノート はfigure内に配置
  • 本文と図の一体化 を重視
  • pタグ内のマージンノート で余白図も可能
  • fullwidthクラス で全幅表示、article内に配置
  • iframe-wrapperクラス でYouTube等の埋め込みにも対応
  • divでも利用可能、用途に応じて選択

コード表現（Code）

  • codeクラス でプログラムや技術用語を表現
  • 等幅フォント を採用、GitHubのフォント選択を参考
  • 可読性と分析性 を両立

必要に応じて、各セクションの詳細やサンプルコードは公式ドキュメントやGitHubリポジトリを参照。 Tufte CSS は「アイデアの実装例」であり、各プロジェクトに合わせたカスタマイズ推奨。

Hackerたちの意見

このウェブサイトで使われてるセリフ体のフォント、狭すぎて目が疲れるのは私だけかな？Retinaディスプレイでもそう感じる。

└

暗い背景に白い文字は合わないね。

└

このスタイル（クリーム色の背景におしゃれなジョージア風フォント）は、2010年代に流行ってたよね。このページが作られた頃は特に。

└

ダークモード使ってるのかな？セリフ体の文字はライトモードの方がずっと見やすいよ。ダークモードだと、フォントの太さを調整しないといけないことが多いね。

もっと詳しい情報はこちらだよ。https://resilientwebdesign.com

└

それもひどいね。文字や単語、行の間に異常なほどのスペースがあるのはなんでだろう。

数年前にこのウェブサイトのタイポグラフィがすごく好きだったのを覚えてる。今見るとかなり古臭く感じるな（多分、ネット上でそのままコピーされたのが多すぎるせいだと思う）。「このプロジェクトの目標についてのリマインダー。ウェブは印刷物じゃない。ウェブページは本じゃない。だから、Tufte CSSの目標は『ウェブサイトはTufteの本のこの解釈のように見えるべきだ』ということじゃなくて、『Tufteが印刷物で役立つと見つけた技術を紹介するから、ウェブでも役立てる方法を見つけてみて』ってことなんだと思う。これを読んで、Tufteの原則をCMSのリッチテキストエディタやフロントエンドのテンプレートライブラリに適用するのも面白いアプローチかも。HTMLを生成するものにね。CSSだけにこだわるんじゃなくて、印刷向けじゃないフォントを選ぶのも大事だと思う。」

└

本当に？私はすぐに嫌いになったよ。下のコメントにリンクされてるサイトも同じ。https://resilientwebdesign.com 200年前の本に見られる印刷物を思い出す。何が嫌なのかうまく言えないけど、なんかイライラする。多分、文字の形がバラバラだからかな。もっと詳しい人、フォントについてコメントしてくれない？

紙の配布物は明らかに純白の背景だけど、ウェブでは少しオフホワイトやオフブラックの色を使う方がいいよね。Tufte CSSは#fffff8と#111111を使ってるけど、これは「純粋」な色とほとんど区別がつかないし、厳しいコントラストを和らげるためなんだ。正直、この主張は理解できないな。「暗い黒や明るい白のために、少し余裕を持たせる必要がある」っていうのは分かるけど、"dial down the harsh contrast"を「ユーザーがモニターのコントラスト設定を高くしすぎてるから、意図的に範囲を狭めてる」って解釈するのはちょっと違うと思う。実際、俺はコントラストを下げたLCDモニターの隣に、明るさとコントラストを上げたOLEDモニターがあるかもしれないし。一般的なユーザーの設定がそこまで極端じゃなくても、実際にはかなりバラつきがあるよね。ゲームエンジンの開発者として、これはずっと実際に対処してきたことなんだ。スタイリスティックな選択としてのコントラストを下げるのは全然アリだけど、ユーザーの視聴条件を予測するのは夢物語だよ。

└

著者の結論は間違ってるね。紙とインクは決して本当の純白や純黒じゃないから。完璧な白や黒はデジタル空間にしか存在しなくて、物理的な素材は常に微妙なトーンや色の違いがあるんだ。

└

背景に#000000を使わないと、OLEDスクリーンでサイトがかっこよく見えるチャンスを逃しちゃうよ。

└

俺が見る限り、OPの主張はクソだね。最大コントラストのディスプレイについていろいろ調べたけど、使わない理由は見つからなかった。最大の明るさを使わない理由はあるけど、暗いところでは明るすぎる画面が問題になるからね。でも、少し暗い画面で最大コントラストを使う方が、少し低いコントラストで最大の明るさを使うよりもいいよ。ディスレクシアの人には高コントラストが少し影響することもあるけど、一般の人々のためにコントラストを下げる科学的根拠はないし。大体、ほとんどの人はUIデザイナーが使うような高価なMacbookじゃなくて、安いクソみたいなスクリーンを使ってるから、コントラストを下げると逆に悪化するんだよね。特にオフスクリーンの角度では。グレーの上にグレーっていうUIトレンドを始めたのは誰か分からないけど、クソだし、機能のために形を犠牲にする意図的なスタイリスティックな理由がない限り避けるべきだと思う。

└

紙の配布物は明らかに純白の背景だけど これだけで、あまり意味がないことが分かるよね。私の知る限り、「純粋」な白なんて存在しないし、少なくともレーザープリンターで印刷するものにはないよ。

以前の話: Tufte CSS - https://news.ycombinator.com/item?id=42820449 - 2025年1月（コメント4件） Tufte CSS - https://news.ycombinator.com/item?id=35032334 - 2023年3月（コメント32件） Tufte CSS - https://news.ycombinator.com/item?id=23828196 - 2020年7月（コメント9件） Show HN: Tufte CSSに基づいたミニマリストブログ - https://news.ycombinator.com/item?id=19615895 - 2019年4月（コメント74件） Tufte CSS - https://news.ycombinator.com/item?id=15633102 - 2017年11月（コメント59件） Tufte CSS - https://news.ycombinator.com/item?id=10555319 - 2015年11月（コメント26件） Tufte CSS - https://news.ycombinator.com/item?id=10012360 - 2015年8月（コメント103件）

Dirk EddelbuettelとJonathan Gilliganのバージョンの方が好きだな: https://github.com/eddelbuettel/tint https://cran.r-project.org/web/packages/tint/vignettes/tintH...

「青いテキストは、広く認識されているクリック可能なテキストの指標だけど、下品で気を散らせる。幸い、下線を使うことで必要がなくなる。」 誰かこれを説明してくれない？「下品」って部分が理解できないんだ。色を使い分けることで、物事を素早く把握できると思うんだけど。色の次元を取り除くと、何が何だか分かりにくくなる気がする。

https://scribe.rip/ このメディアフロント、Tufte CSSをスタイルシートに使ってるのがいいね。

俺は何年も前からブログで（古いバージョンの）Tufte CSSを使ってるんだ。スマホとタブレットの両方で見栄えが良くなるように結構調整したけど、長文の投稿には本当に合ってると思う。[0] https://sheep.horse/everything.html

└

左右のパディングをもっと増やした方がいいと思う。

綺麗だね。バグかな？ウィンドウを狭くしたら、サイドノートが消えちゃった？

└

画面が狭くなると、切り替え可能な要素になるよ。小さい参照番号をクリックしてみて。

└

著者がドキュメント内でこれについて言及してるよ。意図的なものだね。