に対して width="30%")。, そして右側のセルについては右揃えで表示しています（ に対して align="right"）。, 表全体が中央揃えされており、マスカット・りんごなどの名前は初期設定である左揃えに、1200円などの値段は右揃えになっている様子がわかります。, 罫線と文字との間隔が密着していると、読みづらいです。そのような場合は、罫線が文字と密着しないよう、間隔をあけておくと良いでしょう。, に cellpadding（セル・パディング）属性を追加すると、罫線と文字の間隔を調整できます。値として罫線と文字の間隔をピクセル単位で指定します。, 上の例はやや極端な例ですが、cellpadding を「20」に設定すると、罫線と文字の間に余白が作られている様子が分かります。, 通常は、4～10ピクセル程度（cellpadding="4"）間隔を開けておくと、文字が読みやすいでしょう。以下の例は、cellpadding を指定しない例と、4ピクセル設定した場合を比べてみました。, cellpadding によって文字と罫線の間に余白が設けられている様子が分かります。, に cellspacing（セル・スペーシング）属性を追加すると、| ～ | によって作られるセルとセルとの間隔を調整できます。ピクセル単位で指定します。, cellspacing の値を0に指定すると、セル同士がぴったりと隣接したように見えます。 画像などを隙間なく配置する場合は 0ピクセルに指定する場合があります。, HTMLで作る表は標準で罫線が２重に見える状態ですが、セル同士の隙間をゼロにすると、罫線が１本の線のように見え、WORDなどでも馴染み深いシンプルな表のデザインとなります。そのため、cellspacing="0" の設定が使われる機会は多いです。, あるセルを複数の列（カラム・Column）や行（ロウ・Row）にまたがって表示させたい場合、セルを「結合」させることになります。 エクセルで文字入力をしてたところ、セルによって下線の太さが違ってました。これといった操作はしてないのですが、なぜ太かったり細かったりするのでしょう？下線の太さが違うセルに特に規則性もなく、今まで同じような作業をずっとして 線の太さを1pxにして点線を引くと、点々があまりハッキリとは見えません。太さが1pxのような細い線を引く場合は、「点線」(dotted)ではなく「破線」(dashed)を引いた方が見やすいかも知れません。 tableはおろか、内側のth/tdにもborderが設定されました。borderプロパティはなぜか妙に融通がきかず、trやthに対しては使えません。tableに使用して中に全部枠線を付けるか、付けないかの二択です。 プロエンジニアの【html入門【 タグ】 ～テーブル（表）を作成してみよう～】ページです。エンジニアの正社員求人情報、フリーランス案件情報を探すならインターノウスのプロエンジニアへ！ https://cclms.kyoto-su.ac.jp/, moodleへの課題提出方法が分からない場合は、こちらを参照してください。 CSSでTABLEタグのborderの一部を消す方法 複数の人間で一つのサイトを制作していて、他人の書いたHTMLファイルをいじっている場合、スタイルシートを勝手に書き換えるわけにもいかず、HTMLの中に直書きする機会が多くなります。 罫線は全体の枠および各セルに引かれる。 罫線の太さは 1 に設定しているが、罫線と罫線の間に隙間があるため、二重に（または太く）表示される。 この隙間を無くし、隣り合った罫線を重ねるには、 次のようにテーブルのスタイルに border-collapse: collapse; を追加すればよい。 HTMLで表を作成してみたい tableタグの基本的な使い方を理解したい 思い通りのレイアウトで表を作成したい HTMLを使用していると、表を作成する機会はよくあると思います。しかし指定できることが多すぎて、使い方についていまいちよくわかっていない方も多いのではないでしょうか？ まず今回は、下の図のように、矢印の位置の罫線を、二重線に変更してみます。 こういう場合は、「1行目の下の線を二重線に変更する」と考えます。 というわけで、まずは1行目を選択します。 【Word 2013】 表内のいずれかのセルを選択すると、リボンに［表ツール］が表示されます。 ［表ツール］の［デザイン］タブ、［飾り枠］グループにある［ペンのスタイル］ボックスの［▼］をクリックします。 【Word 2010・2007】 表内のいずれかのセルを選択すると、リボンに［表ツール］が表示されま … 太さが混在していると非常に醜いです。 シンプルな表ならば一括して太さを指定し直せばいいのですが、罫線が不要な部分にもセットされてしまいます。 そこで、罫線がある部分だけを対象に太さを一括して変えるマクロを考えました。 スタイルシートを使って表(テーブル)を綺麗に見せる装飾方法はいろいろあります。手軽に見栄えを良くする方法として「罫線の太さを変化させる」という装飾がお勧めです。表の内側の枠線を細くして、表の一番外側の枠線だけを太くすると、ずいぶん見栄えが良くなります。 今回はHTMLで使われるtable（表）のborder（罫線）について解説をしていきます！ borderは基本的にはCSSで設定するものですが、tableのborderは HTML上でも設定をすることが出来ます。. tableタグで表を作ることはできますが、そのままでは罫線がついていません。それぞれの要素が一定の間隔で点在しているだけでは見づらいので、罫線を付けて見やすくしましょう。 表に罫線をつける 表に罫線をつけるには、 タグにborder属性を指定します。 入力方法の記事ですが、セルを参照して同じデータを表示する方法も一応書きました。, CSSでボーダーの角を丸める・歪める方法/border-radiusプロパティの使い方, やりたいことから方法を探すエクセルExcel操作・関数・VBA（マクロ）逆引きまとめ, 関数・演算子・メソッド・プロパティ名から探すExcel/VBA（マクロ）使い方・組み合わせ方まとめ, Excelでよく使う（あるいは人によっては役にたつ）ショートカットを集めてみました。, HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。
ちょっととっても数少ないですが、段々増える予定です。, HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。, イラストレーターと並んでエンジニア業界でも突出して人気の高い、Adobe社の画像編集・作成ソフト、Photoshop関連記事のまとめとなります。毎回変な絵を使ってますが、大体マウスでがんばって描いてます。. CSSでやりましょうよ, これでこのように表示されます。 枠線などを指定したい！CSSのborderの使い方【初心者向け】 初心者向けにCSSで書くborder（ボーダー）プロパティの使い方に関する解説記事です。borderは、枠線・境界線を作る時などWebデザインをする上で業務でも必要な知識になるので、ぜひ自分でも使えるようにしておきましょう。 グループについては、行をグループ化すると列をグループ化するをご覧ください。 border属性との関係. テーブルタグに「cellspacing=""」という属性を追加すると、表の罫線の幅を指定することができます。罫線の幅とは、以下の図の部分です。罫線の幅はこの属性が省略されている場合では、幅はあらかじめ設定されており、また表や表内のセルに背景色を指定しない場合は罫線は透明です。 簡便な方法として、tableの開始タグでborder, cellpadding, cellspacingといった属性を指定することもできます。それぞれの属性は border 表の外側の罫線の太さを示す cellpadding セルの中にある文字とセルの枠（罫線）との間隔を示す cellspacing セルとセルの間隔（間の罫線の太さ）を示す ExcelVBA(マクロ)：Internet Explorerでタグからテキストを取得する方法/getElementsByTagNameメソッドの使い方, ExcelVBA(マクロ)で余白、用紙サイズ、ヘッター、フッターなど印刷のページ設定をする方法/PageSetupオブジェクトの使い方, ExcelVBA(マクロ)：Internet Explorerで表示したページのタイトルを取得する方法/Documentプロパティの使い方, ExcelVBA(マクロ)で印刷する方法/PrintOut、PrintPreviewメソッドの使い方, ExcelVBA（マクロ）で文字フォントを変更する方法/Font.Nameプロパティの使い方. 簡単な説明. HTML 【 表 】1 ～ 基本的なtableの作り方の次に、複数のセルが結合した複雑な表を作ってみましょう。段階的な分類がある表などを作る場合に有用です。 そして、セルの枠線を非表示にする設定方法も紹介します。 目次 1．table のセルを結合しよう 1．1 colspanで横方向に結合 border属性の値に 1 以上の数値を指定した場合は、同時に rules=" all " が指定されたものと解釈されます。 ただし、自分でrules属性を指定した場合は、その指定内容が優先されます。 表にセルを作成するために (テーブル ロウ・Table Row) タグや | (テーブル データ・Table Data) タグも必要になります。, まずは簡単な表を作ってみます。やってみたい方は、自己紹介ページの空いたスペースで試すと良いでしょう。, 具体的には、以下のように書きます。下の例は、縦２セル×横２セルで構成される基本的な表です。なお、実行結果も掲載しますが実際のブラウザの表示とは多少異なる場合があります。, | ～ | の範囲外には文字を書かないようにしましょう。もし書くと表のレイアウトが崩れます。, ～ | の代わりに ～ | (テーブル ヘッダ・Table Header) タグを使うと、セルは「見出しセル」と認識されます。, 一般的なブラウザでは、「見出しセル」内の文字は太字で表示され、中央揃えで表示されます（ブラウザによってデザインが異なる場合があります）。見出しっぽいセルを作りたいときは活用してみてください。, 他にも表では といったタグも使えるのですが、必須ではないのでここでは省略します。, 同じようなタグが繰り返し現れるので、コピー（Ctrl+C）と貼り付け（Ctrl+V）のショートカットキーを使って入力すると、効率よく編集できるでしょう。, 表の構造は複雑です！ | のように１つの表にタグを３種類使う必要があり、それぞれに終了タグ | が存在し、それらが３重の構造になっています。そのせいで、終了タグを書き忘れる、３重構造が崩れる、といった間違いが起きやすいです。, そこで「開始タグを書いたら、すぐに終了タグを書く」ように習慣づけることをおすすめします。例えば以下のような手順です。, なお Brackets を使用している場合は、自動で終了タグを入力してくれるので便利です（ただし日本語モードONで入力していると、終了タグが自動入力されないかもしれません）。, 表を構成する や 、 に属性を追加すると、見た目をさまざまに変えられます。, に border（ボーダー）属性を追加すれば罫線を引けます。逆に言えば、初期設定では表には罫線が描かれないため、border を追加しないと単に文字が並んでいるような姿で描画されます。, 上の例ではすでに border="1" が指定されていたため、表の罫線が描かれていましたが、試しに border 属性を追加しないようにすると、以下のようになります。, 表の構造はできているのですが、罫線が無く、見えない表となります。要するに、文字が並んでいるだけのように見えます。, そこで border 属性を や | に追加すると、罫線が描かれるようになります。, 一般的な罫線のあるデザインの表を表現したい場合は、border="1" を追加するようにしましょう。 枠線がなくなり、セルのない部分の背景色だけが表示されるため、内側の線の太さが変更されたテーブルができあがるという按配です。 何列（何行）分結合させるかを、colspanやrowspan属性で指定します。, 上の例では、１行目の「ストラックアウト!」と書かれているセルに colspan="3" が追加されているため、横３列にまたがるセルが作られています。, なお複数列や行を結合した場合、不要になるセルの | ～ | は記入しません。つまり１行目は横３列分の大きなセルを作った関係上、～ | が１セットしかありませんが、２行目以降は ～ | が３セットずつあります。, 上の例では、左列の「シャーロック・ホームズ」と書かれているセルに rowspan="4" が追加されているため、縦４行にまたがるセルが作られています。, やはり複数セルを結合した場合、不要になるセルの ～ | は記入しないので、２行目以降には ～ | を１セットしか書きません。, このようにして タグを組み合わせて、表を作成できます。ウェブページ上にデータを記載する場合などに活用してください。, 例えば文章を２段組にしたり、画像をページ上の好きな位置に配置したりする機能はサポートされていません。HTMLの規約が定められた1980年代には、現在のように広い画面もなく、自在なレイアウトも必要ないとされていたのです。, しかし時代が進み、ウェブページで様々なコンテンツを表現したいという要望が大きくなってきます。そこで先人たちは をレイアウト実現のために活用することを思いつきました。, では border 属性で罫線の太さを指定できますが、罫線の太さを 0 に設定すると罫線が見えなくなり、表の存在が目立たなくなる仕様があります。この目立たない表のセルに文章や画像を詰め込んで、２段組や画像の配置等のレイアウトを行うのです。, HTMLの通常の使い方では、画像の右側に長い文章を書くのは難しいです（１行だけなら書けます）。, しかし下の例では、横２列の表を作り、左側セルに画像を、右側セルに文章を入れることで、画像の右側のスペースに長めの文章を掲載しています。, border="0" で罫線を消しています（実行例ではあえて分かりやすいように点線で見せています）。横に２つセルを作り、左側に ![]() で画像を配置し、右側に文章を入力しています。, このように表を「箱（ボックス）」に見立てて、文章や画像をレイアウトする「ボックスレイアウト」という手法があります。, 画面の端にメニューがあるような、よく見かけるデザインは、このように仕切られて書かれているわけです。, その他、さまざまなレイアウトのバリエーションとしては、以下の図に示すようなパターンがあります。, これらのレイアウトは、それぞれ表を使って大まかな形を作り、各セルの中に文字や画像を詰め込んで実現します。, 特にパソコン用のサイトなどでは、広い画面を有効に使うために、こういった２段組や３段組みのようなレイアウトがよく利用されます。, によるレイアウトは、簡単な知識でしっかりしたレイアウトを組むことができ、比較的複雑なレイアウトも容易に実現でき、機種による表示の差なども出にくいです。, ただしデメリットとして、レイアウト変更の際は全ページに手を加えないといけない、レイアウトがある程度決まらないと内容作成に移りにくい、HTMLの構造が複雑になりやすい、という問題もあります。, これらのデメリットを解消した次世代のレイアウト方法として、最近はスタイルシート（CSS:Cascading Style Sheets）を使う方法が主流となってきています。また、上で説明した表の色や罫線の引き方などのさまざまな調整も、多くはスタイルシートを使って設定できます。ただし、HTMLとは別にスタイルシートの書き方を学ぶ必要があります。, この実習でも、後半の授業ではスタイルシートを紹介しますので、ぜひ参考にしてください。, とはいえ、従来の方法である表 によるレイアウトは、スタイルシート不要で初心者向けではありますので、よければ活用してください。, 今回は表の中の一つのハコにページ全体を収めるだけで、２段組などはありません。つまり、たった一つのセルを持つ表を作れば良いわけです。一つだけセルを持つ表は、以下のように書けます。（背景色（bgcolor）などの設定は好きな値を設定してください）, 上の例で「セル！」と書かれている場所に、本文全体を入れれば良いわけですね。実際には本文はもっと長いので、以下のようになるでしょう。（ついでに幅の設定（width=“800”）や中央寄せの設定（align=“center”）も加えます）, ということは本文の前に「」を追加すれば良いということになります。（HTMLでは改行は考慮されないので、改行を省略し１行につなげて書いても問題ありません）, 本文とは「～の中に書かれている全て」なわけですから、～ の内側に、上の文言を記入すれば良いわけです。, あなたのページのHTML中にある と を探して、以下のように書き足しましょう。上下２行ずつ計４行の追加となります。, 自己紹介ページに使用しているHTMLファイルや画像ファイルなどをまとめて「圧縮フォルダ」機能を使って圧縮し、moodleにアップロードして提出してください。, 学習支援システム moodle CSSでテーブルの枠線を消す方法と注意点について解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。 なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。 HTMLで表（テーブル）をつくるには、（テーブル）タグを使用します。表の中の各項目を「セル」(Cell) といいます。 htmlで作る表は標準で罫線が2重に見える状態ですが、セル同士の隙間をゼロにすると、罫線が1本の線のように見え、wordなどでも馴染み深いシンプルな表のデザインとなります。 1－1および1－3部分のセルのみ枠線が非表示になっていることが確認できます。 なお、テーブルタグに対して border-collapse に collapse を指定していますが、この指定がないと各セルの枠線が離れて表示されてしまいます。 Copyright © 2018-2020 すなぎつ All Rights Reserved. 値は「ピクセル単位」もしくは「％単位」で指定します。, 下の例の場合、表全体の横幅が500ピクセルに固定されます(width="500")。そして左側のセルにwidth="30%"が指定されているため、左側のセルの幅は、表全体の横幅の３０％で固定されます。, 上の場合、表の横幅は固定されているので、画面の横幅を伸ばしたり縮めたりしても表は変化しません。, 下の例の場合は、表全体の横幅が５０％に指定されています。(width=“50%”)。, ブラウザ画面の横幅を伸ばしたり縮めたりしてみてください。表の横幅は画面の幅に応じて伸び縮みしますが、常に全体の半分の幅を保っている様子が分かると思います。, 表のレイアウトが崩れるのを嫌う場合、「ピクセル単位」指定を使って表の大きさを固定すると、表の幅が変化しなくなります。その代わり、横幅が狭い画面の時に表がはみ出す場合があります。, 反対に「％単位」を使って表の形を整えると、大きさが可変になります。パソコンなどの広い画面で見たときも、スマートフォンなどの狭い画面で見たときも、一定の割合でレイアウトされるという特徴があります。ただし、セルの幅が伸び縮みするので、セルの中に書いた文字などの配置は若干変化するでしょう。, に対して align属性（アラインメント・Alignment）とvalign属性（バーチカル アラインメント・Vertical alignment）属性を追加すると文字揃えができます。, 水平方向：align=“left“ align=”center“ align=”right” でそれぞれ左揃え、中央揃え、右揃え これがタイトルにあるborderプロパティが設定されてない状態で、valueとしては0が割り当てられています。線をつけるには、tableタグを次のように修正します。, するとこうなります。 htmlタグとcssを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。 ホームページ作成と支援・テーブル（表）作成方法テンプレート・ソフトウェア紹介。スタイルシートを使用のテンプレート・デザインテクニック支援素材満載定番★サイト！ホームページ作成方法に必須である素材やビギナーズガイドなら定番サイトの1upホームページ作成です。 CSS で table（テーブル）の border（ボーダー・枠線）の「太さ」を指定するには border プロパティ、又は border-width プロパティを使用します。border プロパティは「太さ」の他に、「スタイル」や「色」も指定できます。 tableのborderを一つの線に変えたいと思っても、 なかなかうまくいかなかったことも多い のではないでしょう … 上のhtmlのcellspacingを1にすることで、細い線のテーブルを作ることも可能です。, Excelエクセルで列が数字で表示される設定にする・解除する方法/「R1C1参照形式を使用する」の使い方、設定方法, CSSで背景画像を設定する方法/background-imageプロパティの使い方, JavaScriptで同じ処理を繰り返す、ループさせる方法/for、whileの使い方, Illustratorでオブジェクトを編集できないようロックする方法/ロックの使い方, Excel（エクセル）でセルの書式を標準に設定するショートカット/Ctrl+Shift+^の使い方, Excel（エクセル）で値が下から何番目かの順位を求める方法/Small関数の使い方, Illustrator（イラレ）でひとつのファイルの中にたくさんの編集画面を作る方法/アートボードツールの使い方, Excel（エクセル）で郵便番号から住所を入力する、住所から郵便番号を取得する方法, Excel（エクセル）で一番大きい/小さい数字（最大値・最小値）を表示・強調する・色を付ける方法/Max・Min関数他の使い方, Excel（エクセル）で空白のセルの数を数える方法/CountBlank関数の使い方, excelで合計数値が間違っているのを修正する方法/エラーチェックオプションの使い方, HTMLでJavaScriptを外部ファイルとして読み込む方法/src属性の使い方, Excel（エクセル）で数値1,2,3..に対して指定した値を返す方法/Choose関数の使い方, Excel（エクセル）で24時間以上の経過時間を○時間の形式で表示する方法/セルの書式設定（ユーザー定義）の使い方, Excel（エクセル）で平日だけ・土日だけを連続入力する方法/オートフィルオプション（週日単位）の使い方, Excel（エクセル）で2つの値が一致する時Trueを返す方法/Delta関数の使い方, HTMLとCSSで表（テーブル）を作る・デザインする方法/Table要素、Tr,Td,Thタグの使い方など, Webページではおなじみのテーブルですが、HTMLでも実装することが可能です。テーブルを思った通りにデザインする方法にも言及します。, ウェブページ作成言語として常に熱い需要を持つHTML関連のまとめページです。
勉強しながらちょっとずつ増やしていく所存です。, かつてはアシさんが長時間かけて行う仕事だったベタ塗りも、今ではクリック一発で塗ることができるようになりました。まあ細かい塗りつぶしは、結局時間がかかることには変わりありませんが……。, 文字の斜体をイメージしてもらえるとわかりやすいかと思いますが、あのようにx軸、y軸で要素を斜めに歪めるためのプロパティがtransform:skewです。, いわゆる「確認ダイアログ」を表示し、OKあるいはキャンセルを押した時にそれぞれ処理を返す方法のご紹介です。, Vlookupと基本使い方は同じなので、紹介はあっさり目です。V＝垂直（Vertical）に対し、こちらはH＝水平（Horizontal）となります。, Excleでデータ入力をしていく時、いちいちコピーせずに真上・真左と同じデータをコピーする方法のご紹介です。
枠線の太さを指定するには、 border-widthプロパティ を使います。 値には数値にptなどの単位を付けて細かく指定する方法と、 thin （細い線）、 medium (通常の線）、 thick (太い線）などのキーワードをつかって大まかな設定も出来ます。 このプロパティも、値を複数設定することで ボックスの … CSS でtable（テーブル）全体や、th 要素、td 要素の下だけに、 border（枠線・ボーダー）を引く場合は、border-bottom プロパティを使用します。top（上）、rifht（右）、left（左）は表示せずに、bottom（下）だけを指定します。 htmlでテーブルの枠線を引き、サイズの調整をする方法のご紹介です。htmlでやるメリットあまりないので、特にこだわりがなければCSSでデザインすることをおすすめします。, 例えばシンプルに次のようなコードをメモ帳に打ち込んで、html化してみることにします。, するとこうなります。 外枠の太さを指定 この属性の値に 1 以上を指定すると、全ての罫線（外枠と内罫線）が表示されます。 数値が大きくなるほど外枠は太くなり、 0 を指定すると全ての罫線が表示されなくなります。 この状態で背景色を指定し、borderの数値を0にして、trには違う色を指定すればどうなるかというと、 逆に罫線をあえて描かない表を活用する方法もあります。詳しくは後述します。, border 属性に与える値は、罫線の太さを意味します。 border="0" に設定すると、罫線を消して見えなくします。border="1" で太さ１ピクセルの極細線を引きます。 border="10" のように大きな値を記入すると、罫線は太くなります。単位はピクセルです。, 表の周囲に太い線が描かれている様子が分かります。立体感のある独特なデザインとなります（ブラウザによって見た目が異なる場合があります）。, や に bgcolor 属性を追加すると、表やセルの背景色を設定できます。bgcolor は、BackGround COLOR の略です。, ウインドウを狭くすると表やセルも小さくなります。このとき、セル内の文字はセル幅にあわせて自動的に改行されます。, この改行を禁止するのが nowrap（ノーラップ）属性です。nowrap 属性は値を持たず、単に「nowrap」と追記するだけで効果を発揮します。, 横幅が足りなくなった時に、右側のセルの文字は自動的に折り返され、改行がかかって表示されますが、nowrap が指定されている左側のセルに書かれた文字は折り返されず１行で表示される様子がわかると思います。, nowrap は折り返しによって文章が読みにくくなったり、レイアウトが崩れたりするのを防ぐ目的で使われます。, ただし最低必要な端よりさらに画面が狭くなってしまうと、表は画面からはみ出してしまいます（横スクロールが発生するようになります）。, 表の大きさを指定するためには、width (幅・ウィドス) と height (高さ・ヘイト) 属性を や | に追加します。 htmlタグを使う場合の注意点！ htmlタグを使う場合の入力方法は半角英数字です。 基本となるhtmlタグはコピー・貼り付けで構いませんがサイズ・カラーコード・アドレスなどの数字や文字を入力する場合に半角英数字以外の文字で入力すると正しく表示されないので注意して下さい！ htmlでテーブルの枠線を引き、サイズの調整をする方法のご紹介です。htmlでやるメリットあまりないので、特にこだわりがなければCSSでデザインすることをおすすめします。 table 要素の境界線（ボーダー）の太さや色を一部だけ変えたり消す方法。 テーブルの一部の境界線の太さや色を変える 普段 table の境界線は border でまとめて定義するので忘れていたが、border-top、border-right、border-bottom、border-left を td 要素に使えば、テーブル（セル）の枠線を部 … 内側（tr）と外側（table）の間隔が広がっているのがおわかりいただけると思います。
| | | | | |