ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
| この記事の要点 |
|
pre の基本
function hello() {
console.log("Hello, world!");
}
通常の HTML では連続する空白や改行が 1 個分にまとめられますが、 内ではそのまま表示されます。ブラウザのデフォルトスタイルで等幅フォント（monospace）が使われます。
code との組合せ（推奨）
function add(a, b) {
return a + b;
}
| 要素 | 意味 | デフォルト挙動 |
|---|---|---|
| 整形済みテキスト（ブロック） | 空白・改行保持 + 等幅 |
| ソースコード（インライン） | 等幅 |
| プログラム出力 | 等幅 |
| キーボード入力 | 等幅 |
| 変数名 | 斜体 |
HTML 特殊文字のエスケープ
内でも HTML としては解釈されるため、< や & はエスケープが必要:
Hello
<div class="card">
Hello
</div>
Markdown のコードブロックは内部で自動エスケープしてくれます。手書きで HTML を書く場合は htmlspecialchars() 相当の処理を通します:
CSS white-space の挙動
| 値 | 空白 | 改行 | 折返し |
|---|---|---|---|
normal | まとめる | 無視 | する |
nowrap | まとめる | 無視 | しない |
pre | 保持 | 保持 | しない（はみ出す） |
pre-wrap | 保持 | 保持 | する |
pre-line | まとめる | 保持 | する |
break-spaces | 保持 | 保持 | する（空白でも折返し） |
要素のデフォルトは white-space: pre 相当。長い行ははみ出るため、表示制御が重要です。
横スクロール vs 折り返し
/* パターン A: 横スクロール（コード表示の定番） */
pre {
overflow-x: auto; /* はみ出たら横スクロールバー */
white-space: pre;
}
/* パターン B: 折り返し（モバイルで読みやすい） */
pre {
white-space: pre-wrap;
word-break: break-word;
}
/* パターン C: ハイブリッド（モバイル時だけ折返し） */
@media (max-width: 600px) {
pre {
white-space: pre-wrap;
}
}スタイリングのお手本
pre {
background: #1e293b;
color: #e2e8f0;
padding: 1em 1.2em;
border-radius: 6px;
overflow-x: auto;
font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace;
font-size: 14px;
line-height: 1.6;
margin: 1em 0;
}
pre code {
background: none;
padding: 0;
font-family: inherit;
}
/* インラインの code（pre の外）は別スタイル */
:not(pre) > code {
background: #f1f5f9;
color: #be123c;
padding: 2px 5px;
border-radius: 3px;
font-size: .9em;
}シンタックスハイライト
| ライブラリ | 特徴 |
|---|---|
| Prism.js | 軽量、プラグイン豊富、行番号 / コピーボタン対応 |
| Highlight.js | 言語自動検出、設定不要 |
| Shiki | VS Code と同じ TextMate 文法。サーバ側で HTML 生成可 |
| Starry-Night | GitHub と同じレンダリング |
Prism の最小例
function fib(n) {
return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}
言語クラスの慣例
- Prism / Highlight.js / Markdown all 共通:
class="language-XXX" - 例:
language-html,language-javascript,language-python,language-bash,language-sql,language-yaml,language-json - Highlight.js は
class="hljs language-XXX"も受け付ける
samp / kbd と組み合わせ
$ npm install lodash
added 1 package in 2s
保存は Ctrl + S です。
kbd {
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-bottom-width: 2px;
border-radius: 3px;
padding: 2px 6px;
font-family: ui-monospace, monospace;
font-size: .85em;
}
samp {
font-family: ui-monospace, monospace;
color: #475569;
}アクセシビリティ
- スクリーンリーダーは
pre>codeを「コードブロック」として認識する - 長いコードには
aria-labelで「JavaScript のサンプルコード」のような意味的な見出しを付けると親切 - キーボードでスクロール可能にする:
tabindex="0"+ フォーカススタイルを付ける
function Button({ children }) {
return <button>{children}</button>;
}
よくある間違い
- pre 内に空行が増える → ソース HTML の改行がそのまま反映される。タグの直後・直前は改行しないコツ
- code 単体でブロック扱い →
はインライン要素。複数行コードには 必ずでラップ - Markdown のコードブロックがハイライトされない → 言語名指定
```jsを忘れている - 横スクロールがスマホで見えない → スクロールバーが極小で気づかれない。
::-webkit-scrollbarでデザイン
FAQ
Q: でタブ幅を変えたい
A: CSS で tab-size: 2;（または 4）を指定すれば、タブ文字の表示幅を制御できます。
Q: コピーボタンを付けたい
A: Prism の toolbar プラグインや、自前で navigator.clipboard.writeText() を呼ぶボタンを設置。
Q: 行番号を付けたい
A: Prism は class="line-numbers" を追加するだけ。CSS だけでも counter-increment で実装可能。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法｜window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧｜403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧｜500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは｜モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- HTML q要素（インライン引用 / blockquote との違い / cite属性の使い方） 2026-06-11 05:44:46
- SQL 制約（NOT NULL / UNIQUE / PRIMARY KEY / FOREIGN KEY / CHECK / DEFAULT 完全ガイド） 2026-06-11 05:44:46
- Mac Safari でユーザーエージェントを切り替える方法（開発メニュー / Chrome や IE のフリ） 2026-06-11 05:44:46
- Laravel ルート一覧確認｜php artisan route:list の使い方・フィルタオプション・JSON 出力・キャッシュ 2026-06-11 05:44:46
- Java static変数（クラス変数 / インスタンス変数との違い / 使い所と落とし穴） 2026-06-11 05:44:46
- HTML bdo要素（双方向テキストの方向を強制 / dir 属性の使い方 / bdi との違い） 2026-06-11 05:44:46
- Webスクレイピングとは｜Python で始めるサンプルコード・robots.txt・利用規約・法的注意点まとめ 2026-06-11 05:44:46
- Canvas API 図形描画｜四角形 fillRect / 円 arc / 線 lineTo / 多角形 と塗りつぶし・輪郭の使い分け 2026-06-11 05:44:46
- jQuery 値の取得｜.text() / .html() / .val() / .attr() / .data() の違いと使い分け 2026-06-11 05:44:46
- UE5 ThirdPersonテンプレート キャラクターを歩かせる方法（Max Walk Speed / Shift で走る切替） 2026-06-11 05:44:46
- HTML figure要素（figcaption と一緒に図表・画像・コードを意味付け） 2026-06-11 05:44:46
- SQL DELETE 文 完全ガイド｜WHERE 句必須、ROLLBACK、TRUNCATE との違い、Oracle/MySQL/PostgreSQL の違い 2026-06-11 05:44:46
- jQuery クリックイベント完全ガイド｜.click() と .on("click") の違い・イベント委譲・ダブルクリック対策 2026-06-11 05:44:46
- jQuery .ready()（DOM 構築完了で実行 / 4 つの書き方 / 現代の代替） 2026-06-11 05:44:46
- Java Calendar.getInstance() 使い方｜タイムゾーン/ロケール指定・年月日曜日の取得・LocalDate との比較 2026-06-11 05:44:46
コメントを削除してもよろしいでしょうか？