ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
リンクとボタンの正しい使い分け
HTML には別ページや別位置に「移動」させる と、「何かを実行」させる があります。この 2 つは見た目が似ていても、ユーザ・支援技術・SEO 視点では別物です。
| 判断 | 使う要素 | 例 |
|---|---|---|
| 別 URL(または同一ページ内アンカー)に移動 | | 「商品詳細」「目次へ戻る」「外部サイト」 |
| フォーム送信 | | 「送信」「保存」 |
| モーダル開閉・タブ切替・JS で何かを実行 | | 「開く」「コピー」「削除」 |
| フォーム内容のリセット | | 「リセット」 |
| 新規タブで開きたい | | 外部リンク |
基本構文
商品詳細を見る
外部サイト
との違い
はテキストしか入れられませんが、 はアイコン・改行・複数要素を入れられるので、現代では が主流です。
「リンクをボタン風」「ボタンをリンク風」の罠
見た目はクラスで自由に切り替えられますが、意味(セマンティクス)は要素そのもので決まります。
無料登録する
削除
開く
アクセシビリティ(ARIA・キーボード操作)
最良はネイティブ要素を使うことです。 は最初から:
- Tab フォーカス可能
- Enter / Space で発火
- スクリーンリーダーが「ボタン」と読み上げ
- 無効化 (
disabled) 対応
どうしても これだけ書くより、素直に 外部リンクを新規タブで開くとき、リンク先 JS から Q: Q: アイコンだけのボタンに Q: ページの作成
親となるページを選択してください。
をボタンにしたい場合(既存デザインシステム等):
をスタイルした方が圧倒的に楽です。主要 CSS フレームワークでの実装
フレームワーク 典型コード Tailwind CSS Bootstrap 5 Material UI shadcn/ui Chakra UI セキュリティ:target="_blank" の落とし穴
window.opener 経由で元ページを操作される(タブナビング攻撃)リスクがあります。必ず rel を付けます:
外部
外部
無効化(disabled)の挙動の違い
要素 無効化方法 クリック フォーカス 属性 無効 飛ばす disabled 属性は無効 常に発火 飛ばさない 無効化したい場合href を外す or aria-disabled="true" + CSS pointer-events:none + tabindex="-1"無効 飛ばす UX のベストプラクティス
disabled + 「送信中…」表示で二重送信防止FAQ
type を書かない の挙動は?
A: フォーム内では submit 扱いになります。これが原因でモーダル開くつもりがフォーム送信される事故が多発。必ず type="button" を明示してください。aria-label は必要?
A: 必須です。スクリーンリーダー利用者にはアイコンが見えません。 で必ず代替テキストを。 と でフォーカスリングが違う
A: ブラウザの既定スタイルが異なります。:focus-visible でデザインシステムに合わせ統一しましょう。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子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
コメントを削除してもよろしいでしょうか?
掲示板