ProgrammingHTML/CSSスタイルガイド
スタイルガイド

HTML5 コーディングガイドライン

検証環境

コーディング前にWindows環境、Machintosh環境、スマートフォンなど対応が必要なブラウザ、端末を明確にします。
現在のWeb業界では、ブラウザが自動で最新版にアップデートされる「エバーグリーン・ブラウザ（常時最新版）」が主流となっています。そのため、ブラウザの「バージョン番号」を細かく指定するのではなく、以下のように「制作時点での最新バージョン」を検証対象とするのが基本です。

表示確認ブラウザの例

Windows環境
  • 制作時に最新のGoogle Chrome
  • 製作時に最新のEdge
Macintosh環境
  • 制作時に最新のGoogle Chrome
  • 制作時に最新のSafari
スマートフォン環境
  • Android、iPhoneは発売から3年以内の端末で確認

現在のEdgeはChromeと同じエンジン（Chromium）を採用しているため、表示崩れが起きにくくなっています。予算や期間に余裕があればFireFoxなども対象に入れて良いと思います。

ウェブ・アクセシビリティ

ウェブ・アクセシビリティとは、高齢者や障害のある方など、心身の機能に制約がある人を含めたすべての人が、ウェブで提供されている情報やサービスを問題なく利用できることを意味します。

本ガイドラインでは、アクセシビリティの国際基準であるWCAG (Web Content Accessibility Guidelines)の「レベルAA（一般的な企業の推奨基準）」を意識した、マークアップ時の重要ルールをまとめています。

1. テキスト・マークアップのルール

検索エンジンや画面読み上げソフト（スクリーンリーダー）が、ページのコンテンツを正しく理解できるようにコーディングします。

セマンティック（意味的）なHTMLタグの選定

見出し（<h1>〜<h6>）、段落（<p>）、リスト（<ul>, <ol>）など、コンテンツの意味に合わせた適切な要素を使用します。

見出し（H要素）の順番を正しく守る

文章の章・節・項を適切に整理するために見出しタグを使用します。「<h1> の次は <h2>、その次は <h3>」というように、順番をジャンプ（例：<h2>の次に<h4>を使うなど）させずに記述します。

パンくずリスト（階層ナビゲーション）の提供

ユーザーが現在サイト内のどこにいるかを視覚的・構造的に把握できるよう、階層を示すパンくずナビゲーションを提供します。

タイトル（<title>）はページごとに固有にする

<title>要素には、そのページの主題や目的がひと目でわかる具体的なテキストを設定します。

2. 画像・リンク・マルチメディアのルール

視覚情報に頼れないユーザーや、一時的な環境の変化（ネット回線が遅い、スピーカーが使えないなど）にも配慮します。

適切な代替テキスト（alt属性）の設定

画像・動画・音声には、その内容や目的を説明するalt属性を必ず指定します。

  • 画像リンクの場合： 画像自体がリンクになっている場合は、alt属性の中に「バナー内の文字情報」や「リンク先の内容が予測できるテキスト情報」を記述します。
  • 装飾目的の画像の場合： デザイン上の背景や飾りなど、意味を持たない画像には alt=""（空のalt） を設定し、スクリーンリーダーが無視できるようにします（alt自体を省略するのはNGです）。

リンクの目的を明確にする

リンクテキストは、「詳細はこちら」「クリック」といった曖昧な表現を避け、「【PDF】〇〇会社 会社案内（3MB）」のように、リンク単体でも遷移先やファイル形式が理解できるテキストにします。

3. カラーと視認性（デザイン・コーディング）のルール

色覚特性を持つユーザーや、屋外の日差しが強い場所で画面を見るユーザーへの配慮です。

コントラスト比の確保

テキストと背景色のコントラスト比を適切に確保します。

  • 目標値： WCAGレベルAAの基準に基づき、標準的なテキストでは 「4.5：1 以上」（大きなテキストの場合は 3：1 以上）のコントラスト比を確保することが強く推奨されます。

「色や位置」だけで情報を伝えない

「赤色のボタンを押してください」「右図を参照してください」といった、色・形・位置のみに依存した案内は行わないようにします。必ず「送信ボタン（赤色）」のようにテキスト情報を併用します。

テキストサイズの変更を阻害しない

ブラウザやOSが持つ「文字サイズ変更機能（ズーム機能）」を制限・禁止するようなコーディング（例：極端なズーム無効化の設定など）を行わないようにします。また、画像の中に文字を埋め込んだ「画像文字」は、極力使用を避けテキストで表現します。

4. 記述・検証時のルール

機種依存文字や半角カタカナの制限

スクリーンリーダーによる誤読や古い環境でのトラブルを防ぐため、丸付き数字（①など）やローマ数字などの機種依存文字、および半角カタカナの使用は原則として避けるのが安全です。

HTMLチェッカー等による自動検証

コーディングが完了したら、W3C公式のマークアップ検証ツール（Markup Validation Service）や、アクセシビリティ評価ツール（Lighthouse、axe-coreなど）を使用して、文法やアクセシビリティのエラーがないか定期的にチェックします。

ユーザビリティ

WebサイトやWebサービスを制作する上で、おしゃれなデザインと同じくらい重要なのがユーザビリティ（使いやすさ）です。

ユーザビリティとは？

ユーザビリティ（Usability）は、「Use（使う）」と「Ability（能力・できること）」を組み合わせた言葉で、日本語では「有用性」や「使いやすさ」と訳されます。

国際規格である「ISO 9241-11」で定義されていますが、要約するとユーザーがストレスなく目標を達成できる状態を作ることになります。

ユーザビリティを形づくる「5つの要素」

ユーザビリティの第一人者であるヤコブ・ニールセン（Jakob Nielsen）博士は、ユーザビリティを構成するシステム品質特性として以下の「5つの要素」を提唱しています。

  1. Learnability（学習しやすさ）
    初めてサイトやアプリを訪れたユーザーが、迷うことなくすぐに使いこなせるかを示す指標です。

    実践のヒント：マニュアル（説明書）を読まなくても、ボタンの形やアイコンから「直感的」に操作を予測できるデザイン（アフォーダンスの活用）を目指します。
  2. Efficiency（効率性）
    一度操作を覚えたユーザーが、2回目以降にどれだけ「素早く・効率的に」目的を達成できるかを示します。

    実践のヒント：ショートカット機能の提供や、頻繁に使う操作手順（タスク）のステップ数を最小限に抑える工夫が必要です。
  3. Memorability（記憶しやすさ）
    久しぶりにサイトを訪れたユーザーが、操作方法を思い出すストレスなく、以前と同じようにスムーズに使えるかを示します。

    実践のヒント：独自の奇抜な操作ルールは避け、世間一般の標準的なUIパターン（例：ヘッダーの右上にメニュー、虫眼鏡は検索など）を踏襲することが効果的です。
  4. Errors（エラーの起きにくさ）
    ユーザーが誤操作（エラー）をしにくく、もしエラーが発生してもすぐに元の状態へ復帰できるように設計されているかを示します。

    実践のヒント：フォームの入力ミスを送信ボタンを押す前にリアルタイムで知らせたり、誤って削除したデータを「元に戻す（Undo）」ボタンですぐに復活できるようにします。
  5. Satisfaction（満足度）
    ユーザーがそのサイトやアプリを操作していて「心地よい」「快適だ」「また使いたい」と感じるかという、情緒的な満足度です。

    実践のヒント：スムーズな画面遷移、適切なアニメーションによる操作へのフィードバックなど、使っていてストレスのない「快感」を提供します。

UX（ユーザーエクスペリエンス）指標

UX（User Experience）は、直訳すると「ユーザー体験」となります。この体験を高めるために重要なのが、ユーザビリティの使いやすさや使い勝手に加えて、使い心地・感動・印象です。

Web Vitals

コーディングで優れたUXを提供するための指標として、Googgleが提唱しているWeb Vitalsがあります。Web Vitalsの中でも特に重要な3つのことをCore Web Vitalsとしています。その3つとは、読み込み時間（Largest Contentful Paint - LCP）、インタラクティブ性（First Input Delay - FID）、コンテンツの視覚的安定性（Cumulative Layout Shift - CLS）です。

  • 読み込み時間（LCP）：LCP（Largest Contentful Paint）はページでメインとなるコンテンツがどのくらい早く見ることができるかを表します。ページ全体の読み込み速度よりも、メインコンテンツの読み込み速度が重視されます。
  • インタラクティブ性（FID）：FID（First Input Delay）は、ユーザーがアクションを起こしてから応答するまでの待ち時間を表します。
  • 視覚的安定性（CLS）：CLS（Cumulative Layout Shift）はページの視覚的な安定性を表します。レンダリング中の表示のずれを定量化します。

Core Web Vitalsを測定するためのツールとして、次のようなものが提供されています。どれもSEO対策として欠かせないツールといえるでしょう。

マークアップの検証

WEB標準に100%準拠させるかどうかはポリシーにもよりますが、不適切なマークアップがないかのチェックは必要です。HTML、CSSそれぞれの文法チェック用のサイトがあるので、下記サイトにチェックを行ってください。

テンプレート

HTML5のテンプレートとして必要最小限のバージョン、OGP（Open Graph Protocol）と基本レイアウトを追加したバージョン、IE9以下の対応を施したバージョンの3種類を用意しました。

OGPについては下記を参考にしてください。

3種類のテンプレートは下記URLにてダウンロードできます。

PUGとRSCSSで作成したテンプレートは下記URLにてダウンロードできます。

HTML5テンプレート
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title></title>
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- OGP設定 -->
	<meta property="og:title" content="">
	<meta property="og:type" content="">
	<meta property="og:url" content="">
	<meta property="og:image" content="">
	<meta property="og:site_name" content="">
	<meta property="og:description" content="" />
	<meta property="fb:app_id" content="">
	
	<!-- ファビコン設定 -->
	<link rel="icon" href="/favicon.ico" sizes="any">
	<link rel="apple-touch-icon" href="/apple-touch-icon.png">
	<link rel="icon" href="/icon.svg" type="image/svg+xml">

	<link rel="stylesheet" href="css/style.css">
</head>
<body>

<!-- header:ページヘッダ -->
<header class="pg-header">
</header>
<!-- /header:ページヘッダ -->

<!-- nav:サイトナビゲーション -->
<nav class="g-navi">
</nav>
<!-- /nav:サイトナビゲーション -->

<!-- main:コンテンツエリア -->
<main>

</main>
<!-- /main:コンテンツエリア -->


<!-- footer:ページフッタ -->
<footer class="pg-footer">
</footer>
<!-- /footer:ページフッタ -->

</body>
</html>

テンプレートに指定した内容を下記にて補足します。

文書型宣言（DOCTYPE）

HTML5以降、文書型宣言は非常にシンプルになりました。必ずドキュメントの先頭に記述します。

<!DOCTYPE html>

言語の指定（lang属性）

検索エンジンやスクリーンリーダーにページの言語を正しく伝えるため、タグには必ず lang="ja" を指定しましょう。

<html lang="ja">

文字エンコーディング

文字化けを防ぐため、文字コードは「UTF-8」を使用します。
また、ブラウザが文字コードを早く認識できるよう、タグ内のできるだけ上部（よりも前）に記述するのがルールです。

<meta charset="utf-8">

ビューポート

ページ幅可変の場合はviewportを下記のように設定します。

<meta name="viewport" content="width=device-width, initial-scale=1">

ページ紹介文

content属性に、ページの概要を全角150文字程度で記入します。

<meta name="description" content="[全角150文字程度]">

ページキーワード

Googleではキーワードが利用されていないため、テンプレートでは省略しています。必要な際は下記のような書式で追加してください。サイトやページのキーワードを半角カンマ区切りで列挙します。

<meta name="keywords" content="[***],[***],[***],[***],[***]">

TITLE要素

TITLE要素は、ページの階層によって次の書式を使います。

ホーム
<title>サイト名</title>
第2階層トップ
<title>カテゴリー名 | [サイト名]</title>
通常ページ
<title>ページ名 | カテゴリー名 | [サイト名]</title>

OGP（Open Graph Protocol）

下記は必須のプロパティなので必ず設定してください。通常のサイトであればog:typeはwebsite固定で問題ありません。

<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="サムネイル画像のURL">

下記はオプションのプロパティです。

<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="ページの説明">

Facebook用にOGPを設定するには、さらに fb:app_id というプロパティを追加します。

<meta property="fb:app_id" content="任意のID">

ファビコン

準備するファイル一覧表

スマートフォンや高解像度ディスプレイでも綺麗に表示させるために、以下の仕様で画像を書き出してください。

ファイル名拡張子推奨サイズ主な役割・用途
favicon.ico.ico (マルチアイコン形式)16×16px、32×32px、48×48px の3サイズを1ファイルに内包PCブラウザのタブやブックマーク、古い環境向けの標準ファビコン
apple-touch-icon.png.png (高画質PNG形式)180×180pxiPhone/iPad、Androidスマホで「ホーム画面に追加」した際のアプリアイコン
icon.svg.svg (ベクター形式)サイズ不問 (128×128px等で作成) ※引き伸ばしてもボヤけないためRetinaディスプレイなどの高解像度画面や、Safariのタブ表示な

マークアップ

現代のWeb標準（HTML Living Standard）では、ファビコンを適用するのに必要なのは最大で次の3行です。

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">

それぞれのコードが持つ役割と、そのシンプルな仕組みを分かりやすく解説します。

すべてのブラウザ用（マルチアイコン）
<link rel="icon" href="/favicon.ico" sizes="any">

定番の「.ico」形式を指定します。ICO形式は、1つのファイルの中に「16x16px」「32x32px」「48x48px」といった複数のサイズをまとめて格納できる（マルチアイコン）のが特徴です。
末尾に sizes="any" と書いておくことで、ブラウザに対して適切なサイズを自動で選ぶように伝えることができます。

スマホのホーム画面保存用（アップルタッチアイコン）
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

スマートフォン用のアイコン指定です。以前は端末の解像度ごとに大量のコードを書いていましたが、現在は最大サイズである「180x180px」のPNG画像を1枚用意するだけでOKです。

高解像度・ダークモード用（ベクターアイコン）
<link rel="icon" href="/icon.svg" type="image/svg+xml">

拡大・縮小に対応したベクターデータのSVG形式の指定です。CSSを内包させることで「ブラウザのライトモード／ダークモードに合わせてファビコンの色を自動で変える」といったモダンな演出も可能になります。

Webサイトにどんなに素晴らしいコンテンツを書いても、検索エンジン（Googleなど）がその内容を正しく、深く理解できなければ、SEO（検索エンジン最適化）の効果を最大限に引き出すことはできません。

そこで活躍するのが「構造化データ（Structured Data）」です。 今回は、構造化データの基本と、現在最も推奨されている記述方法について分かりやすく解説します。

構造化データ

Webサイトにどんなに素晴らしいコンテンツを書いても、検索エンジン（Googleなど）がその内容を正しく、深く理解できなければ、SEO（検索エンジン最適化）の効果を最大限に引き出すことはできません。

そこで活躍するのが「構造化データ（Structured Data）」です。構造化データとは、Webページの情報（記事のタイトル、著者、公開日、運営会社など）を、検索エンジンが理解しやすいように定義された専用の形式（メタデータ）で記述したものです。

構造化データを導入するメリット

  • 検索エンジンがコンテンツを正しく理解する：『代表者の名前』、『商品の価格』といった意味を明確に伝えられます。
  • 「リッチリザルト」として検索結果に表示される：適切にマークアップすると、Googleの検索結果に評価（★星マーク）、よくある質問（FAQ）、レシピの調理時間、求人情報などがリッチに表示され、クリック率（CTR）が向上します。

基本の簡単テンプレート

構造化データの書き方にはいくつか種類がありますが、現在Googleをはじめとする検索エンジンが公式に強く推奨しているのが 「JSON-LD（ジェイソン・エルディー）」 という記述形式です。

まずは、個人ブログやWebサイトの記事（Article）で最もよく使われる、基本の構造化データのテンプレートをご紹介します。以下のコードの日本語部分を書き換えて、そのまま<head>タグ内に貼り付けるだけで使用できます。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "記事のタイトルをここに記述します",
  "image": [
    "https://example.com/images/ogp.jpg"
  ],
  "datePublished": "2026-07-15T09:00:00+09:00",
  "dateModified": "2026-07-15T12:00:00+09:00",
  "author": {
    "@type": "Person",
    "name": "著者名",
    "url": "https://example.com/about/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "運営サイト名・会社名",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/images/logo.png"
    }
  }
}
</script>

記述時の注意点

  • 日付（datePublishedなど）は YYYY-MM-DDThh:mm:ss+09:00（日本標準時の場合）の形式で正確に記述します。
  • 最後の行（publisherの閉じ括弧の手前など）を除き、各項目の末尾にはカンマ（ , ）が必要です。カンマが抜けていたり、余分にあったりするとエラーになるため注意しましょう。

記述したコードが正しいかチェックする方法

構造化データが正しく書けているかどうかは無料ツールで簡単にテストできます。

style.css

テンプレートHTMLから読み込んでいるCSSはstyle.cssです。このファイルはSassで出力されており、元ファイルはstyle.scssになります。Sassについてはsmart:Sass入門を参考にしてください。style.scssはリセットCSSと基本設定を施したCSSを読み込みます。

リセットCSS

テンプレートファイルにはリセットCSSとして次の2種類のファイルを用意しています。オリジナルと内容は同じですが、Sassから扱いやすいようにファイル名を変更しています。

ress（_ress.scss）はスタイルをリセットするというより、要素の特徴を残しつつ、ブラウザ間の差異がなくなるようにします。そのため、ressでは B は太字、リストは黒丸といったスタイルが維持されています。
リストの黒丸などのスタイルもリセットしたい場合は、HTML5 DoctorのリセットCSS（_html5reset.scss）を使ってください。これらのリセットCSSは直接変更せず、オリジナルのままを保つようにしてください。何か変更が必要であれば、次に紹介する_base.scssで設定の上書きをおこなってください。

基本設定を施したCSS

style.scssはリセットCSS以外に、_base.scssを読み込んでいます。このファイルでは、メディアクエリのMixinや、HTMLタグの基本設定を行っています。必要に合わせて設定を変更してください。
このファイルを変更した際はstyle.scssのコンパイルが必要です。

jQuery

今後を見据えるとjQueryは使わずにモダンなフレームワークを使うか、簡単な処理であればJavaScriptを直接呼び出して使うと良いでしょう。
jQueryを使う場合、条件に合わせて必要なバージョンを読み込みこんでください。必要に合わせてコメントアウトを外してください。

HTMLのスタイル・書式ルール

  • 非推奨タグは原則使わない。
  • 表示スタイルは文書の構造と分離し、書体、サイズ、色、行間、背景色などの見た目についてはスタイルシートで設定する。
  • インデントにはタブ文字を使う。
  • セレクタ、プロパティ、値等全て、小文字で表記する。
  • DIVやSPANなどの意味を持たないタグはなるべく使わない。
  • コンテンツの増減で崩れない構造を心がける。

BODY要素

ブロック要素

テキストや画像は必ずブロックレベル要素に含まれるようにマークアップします。

セマンティックに書く

見出しならH要素、段落ならP要素と、目的に応じたHTML要素を使ってください。

ナビゲーション類のマークアップ

ナビゲーションはNAV要素とUI要素で構成し、H要素でタイトル名などをマークアップします。

UL要素の利用

ナビゲーション類、リンクリストなどリストを意味するコンテンツは、UL要素でマークアップします。

DL要素の活用

用語と説明、画像と説明など内容と内容が関連するペアのリストは、DL要素でマークアップします。

IMG要素

IMG要素にはalt属性で代替テキストを指定します。

STYLE要素、style属性の禁止

STYLE要素、style属性は使用しません。代わりに外部CSSで指定します。

type属性

CSSとJavaScriptのtype属性は省略します。


<link rel="stylesheet" type="text/css" href="...">
<script type="text/css" src="..."></script>


<link rel="stylesheet" href="...">
<script src="..."></script>

コメント

レイアウトなどに関連するDIV要素などには、どこまでがその範囲かわかるようにコメントで区切ります。

開始コメント：　<!-- 領域名-->
終了コメント：　<!-- /領域名-->

<!-- ヘッダ領域 -->
<header>
	...
</header>
<!-- /ヘッダ領域 -->

プロトコルの省略

使用上問題なければURLからプロトコル表記（http:,https:）を省略してください。

<script src="//www.google.com/....">

プロトコルを省略すると現在アクセスのあるプロトコルが使われるため、例えばSSLでアクセスされた場合に非SSLコンテンツが混在しないのでセキュリティ警告メッセージが表示されないといった利点があります。
たとえば下記のようにHTTPプロトコルを明記していた場合、SSLでアクセスされると警告メッセージが表示されてしまいます。

<script src="http://www.google.com/....">

ローカルにあるHTMLファイルの場合プロトコルを省略するとfileプロトコルが優先されてしまうので、ローカルでの確認が必要な際はプロトコルを明記してください。

高解像度ディスプレイ対応

高解像度ディスプレイへの対応や、PCとSPで画像内容を切り替えたい場合、srcset属性を使って実装してください。

<img src="pic.jpg" srcset="pic@2x.jpg 2x, pic@3x.jpg 3x" alt="＊＊＊">

詳しい使い方は下記を参考にしてください。

Ratina（高解像度）ディスプレイへの対応方法

情報設計ガイドライン

ディレクトリ名

ディレクトリ名は英数半角10文字程度で、内容をイメージしやすい名前にします。
ローマ字で命名する場合はヘボン式とします。

画像フォルダ

共通で利用できる画像については、カレントディレクトリにimagesフォルダを作成して格納します。
そのほか、各ディレクトリ別にimagesフォルダを作成し、画像ファイルを格納します。

ファイル名

ファイル名、拡張子ともに全て小文字で表記します。
また、ファイル名を複数の単語で表す際は、単語をアンダーライン（ _ ）で区切ります。英数字、アンダーライン（ _ ）以外の文字は使用不可です。
ローマ字で命名する場合はヘボン式とします。
※特別な理由なければ英語を使ってください。

例
file_name.css

ヘボン式一覧表

50音
あAいIうUえEおO
かKAきKIくKUけKEこKO
さSAしSHIすSUせSEそSO
たTAちCHIつTSUてTEとTO
なNAにNIぬNUねNEのNO
はHAひHIふFUへHEほHO
まMAみMIむMUめMEもMO
やYA  ゆYU  よYO
らRAりRIるRUれREろRO
わWAゐI  ゑEをO
濁音・半濁音
がGAぎGIぐGUげGEごGO
ざZAじJIずZUぜZEぞZO
だDAぢJIづZUでDEどDO
ばBAびBIぶBUべBEぼBO
ぱPAぴPIぷPUぺPEぽPO
拗音
きゃKYAきゅKYUきょKYO
しゃSHAしゅSHUしょSHO
ちゃCHAちゅCHUちょCHO
にゃNYAにゅNYUにょNYO
ひゃHYAひゅHYUひょHYO
みゃMYAみゅMYUみょMYO
りゃRYAりゅRYUりょRYO
ぎゃGYAぎゅGYUぎょGYO
じゃJAじゅJUじょJO
びゃBYAびゅBYUびょBYO
ぴゃPYAぴゅPYUぴょPYO

※太字は間違いやすいヘボン式ローマ字です。

ヘボン式ローマ字表記へ変換する際の注意事項

撥音

「ん」は「N」で表記します。

かんの　KANNO／ほんだ　HONDA

B・M・Pの前では、Nの代わりにMを使います。

なんば　NAMBA／ほんま　HOMMA／まんぽ　MAMPO
促音

「っ」は子音を重ねます。

べっぷ　BEPPU／いっしき　ISSHIKI

CHに限り、その前にTを加えます。

えっちゅう　ETCHU／はっちょう　HATCHO
長音

「O」や「U」は記入しません。

おおの　ONO／さいとう　SAITO

＼ 30日間のお試し期間あり／

無料でKindle Unlimitedを試してみる

※Amazonアカウントですぐに登録可能。いつでも解約できます

関連記事