tufte-css

css-framework typography layout

tufte-cssは、エドワード・タフテの特徴的なハンドアウトスタイルをWebページに適用することができるCSSライブラリです。このスタイルは、シンプルさ、よく設定されたタイポグラフィ、広範囲のサイドノート、グラフィックとチャートの密接な統合が特徴です。

Latest Ver 1.8.0

Homepage

Github

6,148

デザインは見えない時、最も力を発揮する。

tufte-cssでクリーンで直感的なウェブドキュメントをデザインしましょう。

tufte-cssは、Webドキュメントでエドワード・タフテのビジュアルおよびタイポグラフィックスタイルを実装できるCSSフレームワークです。

CDNダウンロード

License: MIT

Asset Type :

すべてのバージョンを見る

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.css

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.eot

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.svg

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.ttf

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.woff

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。

📄 HTML
<article><section><h1>Example Header</h1><p>Main content here with <span class="sidenote">This is a sidenote.</span></p></section></article>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css" rel="stylesheet">