アラート
注記
流し読みでも知っておくべき有用な情報です。
ヒント
より良く、より簡単に進めるための助言です。
重要
目的を達成するために知っておくべき重要な情報です。
警告
問題を避けるためにすぐ注意が必要な緊急の情報です。
注意
特定の操作のリスクや悪い結果について注意を促します。
注記
内容の多いアラート:
inline codeを含むリスト項目- コンポーネント一覧へのリンクを含む二つ目の項目
echo "code inside an alert"
2 列のカード
- 短い 1 行。
- 長めのカード 説明が長く数行に折り返すカードで、グリッド全体の余白、行の高さ、揃えを確認します。
- バッジ付き カードにステータスを付けられます。 利用可能
- リンク付き インストールガイドを読んでください。
3 列のカード
- アラート 5 種類の GitHub アラート。 利用可能
- タブ アクセシブルなインストールタブ。 一部実装
- 検索 予定項目の例。 予定
- トークン 色、角丸、フォント。 利用可能
- Sass コンポーネントごとに一つのパーシャル。 利用可能
- Markdown 版 エージェント向けの Markdown。 利用可能
4 列のカード
- アラート 5 種類の GitHub アラート。 利用可能
- タブ アクセシブルなインストールタブ。 一部実装
- 検索 予定項目の例。 予定
- トークン 色、角丸、フォント。 利用可能
- Sass コンポーネントごとに一つのパーシャル。 利用可能
- Markdown 版 エージェント向けの Markdown。 利用可能
- グリッド 広い画面では 4 列。
- 行 8 枚のカードで 2 行になります。
パネルが二つのタブ
macOS
brew install ruby
gem install jekyll bundler
Linux
sudo apt install ruby-full
gem install jekyll bundler
パネルが多いタブ
Ruby
puts "Hello"
JavaScript
console.log("Hello");
Python
print("Hello")
Shell
echo Hello
名前がずっと長いタブ
greeting: Hello
ステータスバッジ
インラインのバッジ: 利用可能 一部実装 予定
タグのバッジ: beta experimental
| 機能 | ステータス |
|---|---|
| アラート | 利用可能 |
| タブ | 一部実装 |
| 検索 | 予定 |
アコーディオン
キッチンシンクは何のためにありますか?
すべてのコンポーネントを 1 か所で見せるので、見た目の回帰に気づきやすくなります。
JavaScript なしでも動きますか?
はい。JavaScript がなければ、すべての答えが質問の下に表示されたままになります。
答えにコードを入れられますか?
bundle exec jekyll serve
リスト形式のステップ
_config.ymlにテーマを追加します。- プレーンな Markdown で
index.mdを書きます。 bundle exec jekyll buildを実行します。modootoday-checkで結果を確認します。
見出し形式のステップ
インストール
remote_theme とプラグインを追加します。
執筆
front matter 付きのページを作ります。
公開
main にプッシュして GitHub Pages を有効にします。
図
タイムライン
インストール
アラート、セクション、カード、タブ、ステータスバッジ、チェッカー。
書く
デザイントークン、modootoday: ブロック、ナビゲーション、コードのコピー。
確認
テーマ切り替え、パンくずリスト、目次、アコーディオン、ステップ、図。
公開
タイムライン、キーボードのキー、クライアント検索、post レイアウト。
リスト形式のタイムライン
- インストール: アラート、セクション、カード、タブ。
- 書く: デザイントークン、ナビゲーション。
- 確認: テーマ切り替え、目次、ステップ。
キーボードのキー
Ctrl+K か、/ だけで検索を開きます。Cmd+C でコピーします。
表
| キー | 型 | 既定値 | 説明 |
|---|---|---|---|
badges |
boolean | true |
ステータスのコードスパンをバッジに変換する |
color_scheme |
string | auto |
OS に合わせるか、配色を固定する |
components |
list | すべてのコアコンポーネント | ブラウザーに配信する CSS と JavaScript を絞る |
tokens |
map | テーマの既定値 | 主色、角丸、フォントスタックなどのデザイントークンを上書きする |
| 左 | 中央 | 右 |
|---|---|---|
| a | b | 1 |
| 長めのセル | 中央揃え | 1,000 |
コード
インラインの code、フェンスブロック、スクロールする長い行:
# frozen_string_literal: true
Jekyll::Hooks.register :site, :post_write do |site|
puts "Built #{site.pages.size} pages into #{site.dest} with a deliberately long line to test horizontal scrolling"
end
- theme: minima
+ theme: jekyll-theme-modootoday
タイポグラフィ
太字、斜体、取り消し線、code、コンポーネント一覧へのリンクを含む段落です。脚注も使えます。1
見出しレベル 3
見出しレベル 4
- 番号付きの項目
- 番号付きの項目
- 入れ子の箇条書き
- 入れ子の箇条書き
- 完了したタスク
- 未完了のタスク
アラートではない普通の引用です。
区切り線の後のテキストです。
- 1
- 2
- 3
行動を促す
コードのタイトルと diff
利用可能 フェンスのコードブロックの直前に、file とコロンで始まるコードスパンだけの行を置くと、ブロックのタイトルバーになります。diff ブロックは追加行と削除行に色を付け、プラスとマイナスの記号を残します。
ファイル: _config.yml
theme: jekyll-theme-modootoday
- remote_theme: old/theme
+ theme: jekyll-theme-modootoday
進捗
利用可能 progress とコロンのあとに 0 から 100 の整数が続くコードスパンは、値をテキストでも示すラベル付きの進捗バーになります。
翻訳 60%
埋め込み
利用可能 embed とコロン、https の URL、任意のタイトルからなるコードスパンだけの段落は、遅延読み込みされる 16:9 のフレームになり、読み込み中も領域を確保します。
読み込み表示とスケルトン
利用可能 loading または skeleton とコロンで始まるコードスパンは、スピナー、細い上部バー、プレースホルダー（text、card、image、avatar、row）になります。それぞれ role="status" とスクリーンリーダー向けの読み込みラベルが付き、利用者が視差効果を減らす設定にしていると動きません。スタイルは別のスタイルシートにあり、使うページだけが読み込みます。
読み込み中…
読み込み中… 読み込み中… 読み込み中…
ファイルツリー
利用可能 c: filetree セクションでは、入れ子のリストがフォルダーツリーとして描かれます。入れ子のリストがある項目はフォルダーです。
- docs
- _config.yml
- index.md
- ko
- index.md
詳細
利用可能 c: details セクションでは、各 ### 見出しがブラウザー標準の開閉要素になります。JavaScript なしで開閉します。
何が必要ですか？
ブラウザーだけです。
よくある質問
利用可能 c: faq セクションは詳細と同じように動きます。FAQPage 構造化データは schema: ブロックを追加してください（構造化データ を参照）。
テーマは無料ですか？
はい、MIT ライセンスです。
GitHub Pages で動きますか？
はい、github-pages gem で動きます。
パラメーター表
利用可能 c: params セクションでは、表が名前、型、既定値、説明でオプションを並べます。必須 だけのセルは必須バッジになります。
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
title |
文字列 | 必須 | ページタイトル |
cols |
数値 | 2 | カードの列数 |
リンクカード
利用可能 c: linkcards セクションでは、リンクで始まるリスト項目がカードになります。カード全体がリンク先です。
引用
利用可能 c: quote セクションでは、最終行がダッシュ（—）で始まる引用の、その行が出典になります。
ドキュメントが github.com でもサイトでも読みやすい。
ギャラリー
利用可能 c: gallery セクションでは、画像のリストがサムネイルのグリッドになります。各サムネイルは JavaScript なしで原寸表示を開きます。すべての画像に代替テキストが必要です。
料金プラン
利用可能 c: pricing セクションでは、各 ### 見出しが価格、機能リスト、リンクからなるプランカードになります。recommended パラメーターは一つのプランにおすすめラベルを付けます。
購読
利用可能 c: subscribe セクションは、テキストと modootoday.subscribe.action のアドレスに送信するメールフォームを表示します。この設定がない場合はテキストだけを表示します。 ここでは項目に bleed: true もあります。どのセクション項目と hero: にも指定でき、内容は読みやすい幅のまま、--mt-bleed-bg(既定は muted のサーフェス色)の背景帯が画面の全幅に広がります。bleed: wide は内容の幅もコンテナ幅まで広げます。サイドバーや目次があるページでは、帯は本文の列の中に収まります。
リリースのたびにメールを 1 通受け取れます。
分割
利用可能 c: split セクションは、48rem 以上でテキストと画像を横に並べ、それより狭いと縦に積みます。画像は visual: の include です。side: start は画像を開始側に移し、ratio: "5:7" は画像に広い列を割り当てます。ここの label: のように、項目のほかのキーは include で include.section.label として受け取れます。 この画像はイラストです。class="mt-illustration"、role="img"、aria-label がある figure で、.mt-illustration-tag バッジの文字もラベルに含めます。decor: decor-demo は上の角の点を aria-hidden の装飾として加えます。 ヒーローも同じ形にできます。hero: {c: split, visual: <名前>, side: start, ratio: "5:7"} は、タイトル、リード文、チェック行、ボタンをテキストの列に置き、include をその横に置きます。キッチンシンクのヒーローがこの形です。
片側にテキスト、もう片側に画像が来ます。
コード付きの分割
利用可能 c: split セクションや分割ヒーローの visual: code には include が不要です。そのセクションの最初のコードブロック（file: のタイトルがある場合はタイトルも）が画像の列に移り、コードのスタイルとコピーボタンはそのまま使えます。chrome: terminal（使うページだけに読み込まれる小さなシート）は枠線と装飾用のバーを加え、スクリーンリーダーはこのバーを読み飛ばします。ほかの場所の visual: code は、これまでどおり _includes/sections/code.html を指します。
キットをインストールし、ビルドのたびに検査ツールを実行します。
ファイル: terminal
bundle add jekyll-theme-modootoday
bundle exec modootoday-check . _site
リスト
利用可能 _config.yml に modootoday.lists を書くと、通常のセクションとページに 2 つのリストスタイルが適用されます。link_chips: true は、すべての項目がリンク 1 つだけのリストをチップの行にし、titled_items: true は太字のタイトルとコロンで始まる項目にタイトルと区切りを付けます。hero: {checks: true} は、上のようにヒーローの最初のリストをチェックマークの行にします。コンポーネントのセクションのリストは元のスタイルのままです。
タイトル付きの項目:
- チップ: リンクだけのリスト
- タイトル付き項目: 太字のタイトル、コロン、続いてテキスト
-
脚注です。 ↩