• このエントリーをはてなブックマークに追加

HTML5プロフェッショナル認定試験レベル1 サンプル問題

例題解説とその内容については、例題提供者の監修です。内容や試験問題に関わるお問い合わせにつきましては、LPI事務局ではお応えできませんのでご了承ください。
例題解説のご提供者さまを募集中です。LPI-Japan事務局までぜひご投稿ください。選ばれた方の例題解説は本サイトに掲載させていただきます。

1.4 レスポンシブWebデザイン

例題4.14 「1.4.3 スマートフォンサイト最適化」
レベル1の出題範囲「1.4.3 スマートフォンサイト最適化」からの出題です。
CSSスプライトの特徴として正しくない説明を選択してください。
  • アイコンなどの複数の画像を1枚の画像に配置する
  • 使用する画像パーツをCSSで画像の座標とサイズを指定して表示させる
  • CSSスプライトの画像はキャッシュされることがない
  • 画像の読み込みが一度で完了するため、ページ表示の高速化につながる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 C
アイコンなどの小さな画像は、HTTPで1ファイルごとにダウンロードされるため、数が多くなるとページの表示速度に影響を与えます。
そこで、小さな画像をまとめて1枚の画像に配置することで、まとめてダウンロードし、CSSの指定で表示する技法をCSSスプライトと呼びます。
1枚の画像に複数のアイコンが含まれるので、表示するためには工夫が必要です。
CSSのbackground-imageを使って画像を表示することになりますが、background-positionでまとめた画像のなかの位置を、widthとheightで切り出すサイズを指定します。

CSSスプライトのデメリットとしては、個別の画像を変更するたびにまとめた画像ファイルも変更が必要になる点と、CSSで表示位置とサイズを指定する手間が挙げられます。
現在では、複数の画像を与えると、自動的にまとめた画像とCSSのサンプルを作成してくれるツールもありますので有効活用すると良いでしょう。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題4.13 「1.4.1 マルチデバイス対応ページの作成」
レベル1の出題範囲「1.4.1 マルチデバイス対応ページの作成」からの出題です。
フルードグリッドの特徴として正しくないものを選択してください。
  • グリッド幅、グリッドの数をウインドウ幅に合せて変更する
  • メディアクエリーを使用してCSSを切り替える
  • グリッド幅を相対値で指定する
  • 画像の大きさをウインドウ幅に合せて変更する
  • かならずしもJavaScriptを必要としない

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 D
レスポンシブWebデザインで良く使用される、フルードグリッドに関する問題です。
ウィンドウ幅に合せて流動的にデザインを変更するリキッドレイアウトと、ウィンドウもしくはコンテンツ領域をいくつかのグリッドと呼ばれる領域に分割してレイアウトの基準とするグリッドシステムを合せたものをフルードグリッドと呼びます。
フルードグリッドでは、画像の大きさについては明示的に扱いません。ウィンドウ幅に合せて変更する技術はフルードイメージと呼ばれます。
従ってフルードグリッドの特徴として、D.は正しくありません。
その他の選択肢については、以下の通りです。
A. 通常のグリッドシステムでは、グリッド幅やグリッドの分割数は固定ですが、フルードグリッドでは、幅、数ともにウィンドウ幅に合せて変化します。
B. グリッドの数の切り替えには、CSSのメディアクエリーを使って指定します。
C. グリッドの幅をウィンドウ幅に合せて変化させるためには、グリッド幅を相対値で指定します。
E. JavaScriptを使って実現することもできますが、CSSだけでも実現可能です。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題4.12 「1.4.1 マルチデバイス対応ページの作成」
レベル1の出題範囲「1.4.1 マルチデバイス対応ページの作成」からの出題です。
フルードイメージ(Fluid Image)を実現するためのHTMLおよびCSSの記述として正しい組み合わせを選択してください。
  • img { max-width:100%; }
    <img src="images/sample.jpg">
  • img { max-height:100%; }
    <img src="images/sample.jpg">
  • img { max-width:100%; max-height:100% }
    <img src="images/sample.jpg">
  • img { max-width:100%; }
    <img src="images/sample.jpg" width="300" height="200">

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 A
フルードイメージ(Fluid Image)は画像サイズをウインドウ幅に応じて変化させる手法です。
通常、imgタグにより表示された画像がウインドウ幅を越える幅、高さである場合、スクロールしないと全てを見ることができません。
フルードイメージでは、ウインドウ幅に合せて自動的に画像の表示幅、高さが調節されます。
フルードイメージを使用することで、レスポンシブWebデザインなどで、ウインドウ幅に合せた画像のレイアウトがおこなえます。
フルードイメージを実現するためには、
・imgタグにwidth,height属性を指定しない。
・対象となるHTML要素にCSSのmax-widthプロパティを使用して、ウインドウ幅に対するサイズを指定する。
の2点が必要になります。
width,height属性を指定すると、画面幅はウインドウ幅に応じて変化しますが、高さが変わらないため、画像の縦横比が変化してしまいます。
max-widthプロパティのかわりに、max-heightプロパティは使用できません。
実際にいくつかのWebブラウザで試してみると、ウインドウ幅に応じて高さが変化しないことが確認できます。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題4.11 「1.4.2 メディアクエリ」
レベル1の出題範囲「1.4.2 メディアクエリ」からの出題です。
次のようなHTMLとCSSの組み合わせがある場合に、後述する設問に解答しなさい。
          【HTML】
<body>
<div id="wrap">sample</div>
</body>
【CSS】
body, div {
margin: 0;
padding: 0;
}
‪#‎wrap‬ {
background-color: ‪#‎FF0000‬;
width: 100vmin;
height: 100vmin;
}
@media screen and (max-width: 1024px) and (orientation:landscape) {
#wrap {
width: 100vmax;
height: 100vmin;
}
}
@media screen and (max-width: 480px) and (orientation:portrait) {
#wrap {
width: 100vmin;
height: 100vmax;
}
}
Webブラウザで表示した際の動作に関する記述で、間違っているものを次の選択肢から1つ選びなさい。
  • Webブラウザの表示領域の幅が400ピクセルのとき、表示領域が縦長でも横長でも背景色は全面赤色で表示される。
  • Webブラウザの表示領域が幅800ピクセル、高さ600ピクセルのとき、div要素は表示領域より幅が大きくなる。
  • Webブラウザの表示領域が幅800ピクセル、高さ1,200ピクセルのとき、下部に400ピクセルの余白ができる。
  • Webブラウザの表示領域が幅1,200ピクセル、高さ1,400ピクセルのとき、下部に200ピクセルの余白ができる。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 B
例題で使用している単位、vminは表示領域の幅か高さのいずれか小さい方に対するパーセンテージを表し、vmaxは大きい方に対するパーセンテージを表します。
1つめの#wrapセレクタは幅か高さの小さい方のサイズで正方形を作成します。
2つめの#wrapセレクタは幅が1,024ピクセル以下で横長の場合に全面を覆う長方形を作成します。
3つめの#wrapセレクタは幅が480ピクセル以下で縦長の場合に全面を覆う長方形を作成します。
選択肢Aの場合、表示領域が横長のときは2つめのセレクタが、縦長のときは3つめのセレクタが適用されるので、‪#‎wrapの背景色である赤が全面に表示されます‬。
選択肢Cの場合、表示領域の幅は2つめのセレクタの範囲ですが、縦横比が縦長なので2つめのセレクタは適用されません。結局デフォルトの1つめのセレクタが適用されるので下部に余白ができることになります。
選択肢Dもデフォルトの1つめのセレクタが適用されます。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 林拓 也 氏

例題4.10 「1.4.1 マルチデバイス対応ページの作成」
レベル1の出題範囲「1.4.1 マルチデバイス対応ページの作成」からの出題です。
今後の仕様化が検討されているpicture要素についての記述で不適切なものを1つ選びなさい。なお本問題の仕様はHTML 5.1 2015年10月8日ワーキングドラフトに基づくものとする。
  • picture要素ではsource要素、img要素を組み合わせて、表示領域のサイズに応じて複数の画像を指定できる。
  • source要素ではmedia属性でメディアクエリ(Media Queries)を指定できる。
  • picture要素には指定が必須の属性は無い。
  • source要素の属性はグローバル属性を除くとsrcset属性、sizes属性、media属性、type属性の4つがある。
  • img要素でもsrcset属性やsize属性が利用できるが、srcset属性を指定した場合src属性は指定してはいけない。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 E
picture要素は0個以上のsource要素とそれに続くimg要素を子として持ちます。
source要素では一般に、表示すべき画像をsrcset属性で、表示する条件をmedia属性で指定します。
        
      例1)
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt="HTML5プロフェッショナル">
</picture>
        
        
2015年10月8日ワーキングドラフトではimg要素でもsrcset属性やsize属性が利用できるようになっています。
img要素ではsize属性で指定されたサイズを基に、srcset属性で指定された画像の候補リストから適切な画像が表示されます。
        
      例2)
<img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, 
wolf-1600.jpg 1600w" src="wolf-400.jpg" alt="The rad wolf">
        
        
細かい仕様は今後変わっていくと思われるので、現状は大まかなところを把握しておけばよいでしょう。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 林拓 也 氏

例題4.9 「1.4.3 スマートフォンサイト最適化」
レベル1の出題範囲「1.4.3 スマートフォンサイト最適化」からの出題です。
HTML外部のjavascriptファイルを読み込む際に、非同期で読み込みをおこないWebページのレンダリングをブロックさせない属性を選択してください。
  • non-block
  • defer
  • async
  • sync
  • lazy

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 C
通常、<script>タグが読み込まれると、Webブラウザはページの描画を一時停止してJavascriptの実行を先に行ないます。
その分ページの描画が遅れるため、<script>タグをhtmlの</body>タグ直前に置いて、ページ描画を先に行なうなどの工夫がされてきました。
HTML5では、<script>タグにasync属性(C.)を追加することで、外部ファイルの読み込みと、ページ描画を非同期に行なうことができます。
その他の選択肢については以下の通りです。
A,D,Eはそのような属性はありません。
Bのdeferは、これまでwindow.onloadイベントや、jQueryのreadyメソッドを使用していたように、UIの更新完了時に実行されるよう指示をする属性です。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題4.8「1.4.2 メディアクエリ」
レベル1の出題範囲「1.4.2 メディアクエリ」からの出題です。
メディアクエリで使用出来る解像度の単位として誤っているものを2つ選択してください。
  • dpo
  • dpi
  • dpm
  • dpcm
  • dppx

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 A,C
スマートフォンや高解像度モニタの普及で、同じピクセル数で表示すると見た目の大きさが大きく異なることがあります。
そのような不具合を少なくするために、メディアクエリで画面の解像度を指定してスタイルを変更することができます。
画面解像度の指定は、1インチあたりのドット数であるdpi(B.)、1センチメートルあたりのドット数であるdpcm(D.)、およびピクセル数あたりのドット数を表すdppx(E.)を使用することができます。
ピクセルとドットの関係がわかりづらいですが、iPhoneのRetinaディスプレイなど高解像度な画面では、論理的な1ピクセルをより細かいドットの組み合わせで表示することがあります。
たとえば、2dppxであれば、1ピクセルを2×2の4ドットで表示することになります。
その他の選択肢は単位として使用できません。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題4.7「1.4.1マルチデバイス対応ページの作成」
レベル1の出題範囲「1.4.1マルチデバイス対応ページの作成」からの出題です。
デバイスの画面幅に合せて表示領域を指定する場合に設定するviewportのcontent属性を選択してください。
  • content="device-width"
  • content="width=device-portrait"
  • content="width=device-horizontal"
  • content="width"
  • content="width=device-width"

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 E
表示領域のサイズや拡大縮小を設定する、viewportに関する問題です。
スマートフォン上のブラウザで表示する際には、基本的にPC上で横幅980pxのブラウザで表示したのと同じような見た目になるように扱われます。
しかし、この設定では縮小表示になってしまい、文章が読みにくくなることがあります。
<meta name="viewport" content="width=device-width"> (E.)
と記述することで、スマートフォンのデバイスの横幅で描画が行なわれるようになります。
他の選択肢は間違いです。
正しい記述はcontent=""の中にwidth=device-widthが入りますので注意が必要です。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題4.6「1.4.3 スマートフォンサイト最適化」
レベル1の出題範囲「1.4.3 スマートフォンサイト最適化」からの出題です。
ターゲットに高解像度なスマートフォンを含むWebサイトを作成する場合に、使用する画像について気をつけるべき点は何か。誤っているものを一つ選びなさい。
  • 2倍程度のサイズの高解像度画像を用意し、imgタグのwidth,heightの値を元の画像サイズに設定する
  • 背景画像の場合はdevicePixelRatioの値によってbackground-imageを切り替える
  • 低解像度のスマートフォン向けには負荷を減らすため低解像度の画像を使用する
  • 写真などの複雑な画像で無ければSVGやCSS3による画像を使用する
  • ファイル名に、'@2x'を追加した(例:img@2x.png)高解像度画像を用意すればデバイスにあわせて自動的に選択される

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 E
高解像度なディスプレイを持つスマートフォンではPCや低解像度スマートフォン向けに用意した画像がぼやけたような感じになってしまうことがあります。
高解像度デバイスでは低解像度デバイスの1ピクセルあたり、1.5から2ピクセル以上で表示します。
このとき画像の拡大処理が行なわれますが、結果としてぼやけたようになってしまうことがあります。
選択肢のうち、対策として間違っているのは、E.のファイル名に'@2x'をつける、というものです。
これはiPhoneなどiOS向けのネイティブアプリを作成する場合の手法で、Webページでは効果がありません。
その他の選択肢については以下の通りです。
A.通常より高解像度なサイズの画像を作成しておき、imgタグやスタイルでwidth,heightに元のサイズを指定することで鮮明に表示されます。
B.background-imageであれば、メディアクエリでmin-device-pixel-ratioを使用し、devicePixelRatioが1なら低解像度、1.5以上なら高解像度の画像を使用するように、スタイルを二つ定義します。
C.低解像度なスマートフォンで高解像度の画像を表示すると負荷が高くなります。B.のような工夫をしたり、JavaScriptやPHPなどを使ってimgタグのsrcを切り替えます。
D.ベクトル形式であるSVGやCSS3による画像は解像度に関係なく鮮明に表示されます。画像の内容によってはSVG,CSS3を選択すると良いでしょう。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題4.5「1.4.2 メディアクエリ」
レベル1の出題範囲「1.4.2 メディアクエリ」からの出題です。
メディアクエリを利用して、表示領域の幅に応じて3段階に背景色を切り替える仕組みを作成する。仕様は幅768ピクセル未満は赤、幅768ピクセル縲鰀1024ピクセルは緑、それより大きい場合は青とする。
以下のCSSで、1、2それぞれに入れる指定で適切なものを選択しなさい。

body {
background-color: red;
}
@media screen and (   1   ){
body {
background-color: green;
}
}
@media screen and (   2   ){
body {
background-color: blue;
}
}

  • 1:min-width:768px、2:max-width:1024px
  • 1:max-width:768px、2:min-width:1024px
  • 1:min-width:768px、2:min-width:1025px
  • 1:max-width:1024px、2:max-width:767px

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え C
レスポンシブWebデザインでデバイスの表示領域に応じてCSSを切り替える場合、モバイル環境(小さい画面)をデフォルトとして設定し、大きな画面用の設定を追加していく形と、デスクトップ環境(大きい画面)をデフォルトとして設定し、小さな画面用の設定を追加していく形があります。
前者をモバイルファースト、後者をデスクトップファーストと呼びます。
問題のCSSではデフォルトのスタイルが赤になっているので、モバイルファーストの考え方で指定を行うことになります。
選択肢Cは、最小範囲が赤で、最低幅768ピクセルの場合が緑、最低幅1025ピクセルの場合が青という指定で、与えられた仕様に適ったものとなります。
選択肢Dはデスクトップファーストの指定になります。3段階に色が変化しますが、サイズと色の組み合わせが仕様と異なるので不適切です。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 林 拓也 氏

例題4.4「1.4.2 メディアクエリ」
レベル1の出題範囲「1.4.2 メディアクエリ」からの出題です。
メディアクエリの記述として、間違っているものを1つ選びなさい。
  • @media screen and (color) { ... }
  • @media screen or (color) { ... }
  • @media screen and (color), projection and (color) { ... }
  • @media not screen and (color) { ... }
  • @media only screen and (color) { ... }

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え B
メディアクエリの構文において「or」というキーワードは使用できません。論理式におけるORは、カンマ(,)であらわします。「not」キーワードをメディアクエリの先頭に記述すると、条件(真と偽)が逆になります。「only」キーワードは、メディアクエリに未対応の古いブラウザに書式を無視させるためのもので、メディアクエリに対応したブラウザでは「only」キーワードがないものとして処理されます。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題4.3 「1.4.3 スマートフォンサイト最適化」
レベル1の出題範囲「1.4.3 スマートフォンサイト最適化」からの出題です。
スマートフォンでホーム画面にWebページへのリンクを作成する場合に、アイコンとして使用される画像を指定するrel属性を二つ選びなさい。
  • apple-touch-icon
  • touch-icon
  • apple-touch-icon-precomposed
  • touch-icon-precomposed

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え A、C
iOS端末、Android端末に関わらず、
        
<link rel=”apple-touch-icon” href=”アイコンファイル名” />
        
        
または
        
<link rel=”apple-touch-icon-precomposed” href=”アイコンファイル名” />
        
        
と記述します。
apple-touch-iconを指定すると元画像に対して、角丸処理などが自動的に行なわれることがあります。デザイン上、自動処理を行なわれたく無い場合には、apple-touch-icon-precomposedを指定します。
OSの種類やバージョンによって表示が異なることがあるので、表示確認は欠かせません。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 高井 歩 氏

例題4.2「1.4.2 メディアクエリ」
レベル1の出題範囲「1.4.2 メディアクエリ」からの例題を解説します。
CSS3におけるMedia Queries(メディアクエリ)に関して以下のような記述がある場合、中に記述しているbody要素に関するスタイルシートが適用される条件として正しいものを1つ選びなさい。
          @media screen and (max-width :640px) {
      body {
            background-color: blue;
            margin: 30px;
      }
}
  • 端末における画面解像度の幅が、640px以上の時に適用される。
  • 端末における画面解像度の幅が、640px以下の時に適用される。
  • ビューポート(ブラウザの表示領域)の幅が、640px以上の時に適用される。
  • ビューポート(ブラウザの表示領域)の幅が、640px以下の時に適用される。
  • 環境に関わらず、いかなる条件下でも適用されない。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え D
Media Queriesは、スタイルシートの適用条件にスクリーンサイズや端末の向きなどを指定できるCSS3の機能です。
問題にある記述ではmedia typeにscreen、media feature(媒体特性)にmax-widthとあるので、ビューポート(ブラウザの表示領域)の幅・最大640pxまでを適用の条件としています。
よって答えはDです。
Cの640px以上である事を条件に指定したい場合、media featureはmin-widthとなります。
A,Bにある、端末の画面解像度を条件とする場合は、media feature(媒体特性)にmin-device-width,max-device-widthと指定する必要があるので、ビューポートのサイズとの混同に注意してください。

出題範囲の詳細

例題解説の提供:メディアスケッチ株式会社
代表取締役 兼 株式会社コーデセブン 取締役CTO 伊本 貴士 氏
ITコンサルタント業を中心に、Webサービスの開発や、オープンソースシステムの構築・保守なども行っている。

例題4.1「1.4.1 マルチデバイス対応ページの作成」
レベル1の出題範囲「1.4.1 マルチデバイス対応ページの作成」からの例題を解説します。
Luke Wroblewski氏が提唱した「Mobile First(モバイルファースト)」の説明として正しいものを選びなさい。
  • HTML5をモバイルデバイスで高速に動作させるために考えられたアーキテクチャである。
  • モバイルデバイスの種類や画面サイズに合わせて、それぞれ専用のWebコンテンツを作るという考え方である。
  • モバイルデバイスでの表示を考えて、サイズなどをピクセル数ではなく%などの可変サイズで指定をするレイアウト手法の事である。
  • クライアントのデバイスがPCなのかモバイルデバイスか判別が付かない場合に、モバイルデバイス用のページを表示させるという考え方である。
  • マルチデバイス対応サイトにおいて、制約が多いモバイルサイトでの利用を優先的に設計・制作という考え方である。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答えE
「Mobile First(モバイルファースト)」は、マルチデバイス対応サイトにおいてモバイルデバイスの設計を優先的に考える考え方の事です。 よって、答えはEです。 モバイルデバイスの普及が背景にありますが、制約の多いモバイルデバイスで確認をしておくと、同じソースでPCとモバイルデバイスの両方に対応しやすいという利点もあります。 Aは間違いです。動作速度とモバイルファーストは関係ありません。 Bは間違いです。モバイルデバイスの種類や画面サイズ毎にWebコンテンツを作ると、作成の手間が大幅に増え、メンテナンスも大変なので通常の場合、あまり適切な手法とは言えません。 Cはリキッドレイアウトに関する説明です。よって、間違いです。 Dは間違いです。このような考え方はありませんし、一般的にモバイルデバイス以外のクライアントからのアクセスには、通常のPC用ページが表示されます。

出題範囲の詳細

例題解説の提供:メディアスケッチ株式会社
代表取締役 兼 株式会社コーデセブン 取締役CTO 伊本 貴士 氏
ITコンサルタント業を中心に、Webサービスの開発や、オープンソースシステムの構築・保守なども行っている。

このページの先頭へ