ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
テキスト関連 HTML 要素一覧
ブロック系
| 要素 | 意味 | 備考 |
|---|---|---|
| 段落 (paragraph) | 本文の基本ブロック |
〜 | 見出し | SEO/アクセシビリティの背骨 |
| 長い引用 | cite 属性で出典 |
| 整形済テキスト | 空白・改行をそのまま保持、等幅 |
| 水平線、話題の区切り | セマンティックな分割 |
| 連絡先 | article / body の作者情報 |
インライン系: 意味あり (Semantic)
| 要素 | 意味 | 典型用途 |
|---|---|---|
| 重要 | 注意事項、要点強調 |
| 強勢 (語気) | 抑揚を付けたい単語 |
| 関連性のあるハイライト | 検索結果のマッチ箇所 |
| 削除済テキスト | 変更履歴、価格訂正 |
| 挿入済テキスト | 変更履歴 |
/ | 下付き / 上付き | 化学式 H2O / 注釈1 |
| 略語 | HTML, CSS 等の説明 |
| 定義語 | 用語の初出 |
| 作品名 | 書籍・映画・論文タイトル |
| 短い引用 | 自動的に引用符が付く |
| 日時 | 機械可読な日時 |
| コード片 | 等幅で表示される |
| キーボード入力 | Ctrl+C |
| サンプル出力 | プログラムの出力例 |
| 変数 | 数式や擬似コード |
| 細目・免責事項 | コピーライト等 |
インライン系: 意味なし (Presentational)
| 要素 | 意味 | 代替 |
|---|---|---|
| 太字 (意味なし) | 意味があるなら |
| 斜体 (意味なし) | 意味があるなら / |
| 下線 (意味なし) | リンクと混同するので避ける |
| 意味なし (CSS のフック) | クラス/属性で意味を補う |
| 強制改行 | 段落分けなら を使う |
実用サンプル
2026 年 、
新サービスがリリースされました。
略語 HTML は、
ハイパーテキスト・マークアップ言語のことです。
コピーは Ctrl+C、貼り付けは
Ctrl+V で実行できます。
ファイルを開くには open file.txt と入力。
画面に OK と表示されれば成功です。
方程式: E = mc2
水分子は H2O です。
引用された長い文章…
価格: 5,000 円 4,200 円
キーワードがマッチしました。
CSS でフォントを整える
body {
/* 日本語含む安全なフォントスタック */
font-family:
-apple-system, BlinkMacSystemFont,
"Segoe UI", "Hiragino Kaku Gothic ProN",
"ヒラギノ角ゴ ProN W3", "Noto Sans JP",
Meiryo, sans-serif;
font-size: 16px; /* 1rem = 16px が基準 */
line-height: 1.7; /* 日本語は 1.6〜1.8 が読みやすい */
letter-spacing: 0.02em;
color: #222;
-webkit-font-smoothing: antialiased;
}
h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 700; margin-block: 1.5em 0.5em; }
p { margin-block: 1em; }
/* 等幅 (コード表示) */
code, kbd, samp, pre {
font-family: "Source Code Pro", "Consolas", "Menlo", monospace;
}
code {
background: #f3f4f6;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.9em;
}
kbd {
border: 1px solid #ccc;
border-bottom-width: 2px;
padding: 2px 6px;
border-radius: 4px;
background: #f9f9f9;
}
/* 行末の禁則 */
.no-break { word-break: keep-all; overflow-wrap: anywhere; }
Web フォント
Google Fonts
セルフホスト (パフォーマンス重視)
@font-face {
font-family: "MyFont";
font-style: normal;
font-weight: 400;
font-display: swap; /* 表示遅延回避 */
src: url("/fonts/MyFont.woff2") format("woff2"),
url("/fonts/MyFont.woff") format("woff");
/* 日本語の場合 unicode-range で必要部分だけ読み込む */
unicode-range: U+3000-9FFF, U+FF00-FFEF;
}
body { font-family: "MyFont", sans-serif; }
line-height と組版
日本語サイトは英語サイトより少し広めの line-height が読みやすく、本文 16px なら 1.7 前後が定番。見出しは 1.3 前後で詰めます。
:root {
--leading-tight: 1.25;
--leading-base: 1.7;
--leading-loose: 2;
}
h1, h2, h3 { line-height: var(--leading-tight); }
p, li { line-height: var(--leading-base); }
.poem { line-height: var(--leading-loose); }
セマンティクスとアクセシビリティ
はスクリーンリーダーが強調読みする。は読みが変わらないはマウスホバーで展開、読み上げも展開されるはGoogle が日付として認識し、Rich Results にも使われるlang="ja"属性をに付けることで、フォント選定や読み上げ言語が正しくなる
FAQ
Q: と はどう違う?
A: 見た目は同じ太字でも、 は「重要」という意味を持ち、スクリーンリーダーは強調読みします。装飾だけなら or CSS。
Q: 改行に を多用してよい?
A: 段落分けには を使い、 は住所や詩のような視覚的に意味のある改行に限定。
Q: 日本語 Web フォントが重い
A: unicode-range でサブセット化、font-display: swap でフォールバック先行、preload で優先読込。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子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
コメントを削除してもよろしいでしょうか?