ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子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アノテーションとは
最近更新/作成されたページ
- UE5 で鏡を作る方法 (Planar Reflection / Scene Capture / SSR / マテリアル) 2026-06-11 04:04:53
- Oracle CKPT (Checkpoint Process) の役割とパラメータ (リカバリ時間短縮) 2026-06-11 04:04:53
- Java プログラムの全体構造 (package / import / class / main / module / Maven) 2026-06-11 04:04:53
- UE5 Data Asset と Data Table の違い (使い分け / Asset Manager / CSV 連携) 2026-06-11 04:04:53
- Java 比較演算子の使い方 (== / equals / compareTo / Objects.equals) 2026-06-11 04:04:53
- Linux への scikit-learn インストール (pip / venv / Conda / 依存パッケージ) 2026-06-11 04:04:53
- Scratch でスプライトを追加する 5 つの方法 (ライブラリ / 自分で描く / アップロード / カメラ / サプライズ) 2026-06-11 04:04:53
- JavaScript の "" と '' の違い (仕様上は等価 / テンプレートリテラル / JSON / Lint) 2026-06-11 04:04:53
- Laravel マイグレーションファイルの作成 (make:migration / Schema::create / down 実装) 2026-06-11 04:04:53
- Unity 「3 Skyboxes」アセットの使い方と Skybox の基礎 (Material / Lighting / HDR) 2026-06-11 04:04:53
- Linux で IP アドレスを確認するコマンド完全ガイド（ip / ifconfig / hostname） 2026-06-11 04:04:52
- Docker イメージ操作完全ガイド（search / pull / images / rmi / multi-arch） 2026-06-11 04:04:52
- SQL の組み込み関数まとめ（集計 / 文字列 / 日時 / 数値 / 条件 / ユーザー定義） 2026-06-11 04:04:52
- Laravel Query Builder の DELETE 完全ガイド（Eloquent / Soft Delete / 一括削除） 2026-06-11 04:04:52
- HTML <wbr> 要素の使い方と <code>word-break</code> / ­ との違い 2026-06-11 04:04:52
コメントを削除してもよろしいでしょうか？