1.sectionについて
h2とh2に関する記事pがある場合
<section>
-<h2></h2>
-<p></p>
</section>
でいいですよね?h2はsectionの外・・・ではないですよね?
(<div id="section">的に使う)
2.article/asideについて
<article>
-コンテンツ
-<aside>関連ないもの</aside>
</article>
みたいに「article内」でasideを使い除外していいのでしょうか?
(<div id="container">的に使う)
3.全体として
<article id="container">
-<h1></h1>
-<aside>
--<header></header>
--<nav></nav>
-</aside>
-<section>
--<h2></h2>
--<p></p>
-</section>
-<aside>
--<footer></footer>
-</aside>
</article>
ではどうなんでしょうか?
header/nav/footerを除外するかどうか
h1をロゴ・会社名にせず、サイト上部の1行文にするべきか
そこらへん調べたのですが納得できるはっきりしたものがないので、よろしければご回答願います
No.8ベストアンサー
- 回答日時:
少しだけ整理させて下さい。
まず、HTML(5) のセクションとは文書のアウトライン(典型的には目次)と対応するものです。決して「レイアウト分割」のためのものではありません。まあ、アウトラインを利用してレイアウトするのは自由ですが。
ひとつの判断基準として、見出しを置けるならセクションである可能性が高い。逆に、見出しを置けないなら、セクションではない可能性が高い。
---
セクションが article であるか、ひとつの判断基準は「文責」です。通常、文責は address で示されますが、この address の有効範囲は一番近い article です。一番近い article がなければ、ページ全体(body)の文責を示します。
<body>
<h1>論文集</h1>
<article>
<h2>宇宙について</h2>
<!-- この article の文責 -->
<address>onestone@example.org</address>
<article>
<!-- 論文集の編集責任者 -->
<address>god@example.org</address>
</body>
---
セクションが aside であるか、ひとつの判断基準は「なくても本文に影響ないか」です。賢いブラウザは、メインビューから aside を消し、その代わりサイドバーに表示するかもしれません。
<article>
<h2>宇宙について</h2>
<aside>
<h3>編集者のコメント</h3>
<p>この論文は素晴らしい。</p>
</aside>
<article>
文書構造を反映したデザインなら、仮に aside を消してもデザインに支障がないはずです。少なくとも、aside を消すとレイアウトが崩れるようでは、何かが間違っています。
---
nav は……意外に難しい。いわゆる「スキップリンク」を設けずともブラウザが適当にスキップしてくれるナビブロック、そして、ページ内で道に迷った時にはブラウザが「こことここにナビブロックがあるけど、どっちに行く?」と聞いてくれるようなもの、それが nav です。
どっちのナビブロックに行くか選ぼうとして、ブロックにラベル(見出し)がなかったなら選びようがない。だから、見出しが必要なのです。まあ残念ながら、こんな賢いブラウザは未だにありませんが。
そもそも、ブラウザは利用者をナビゲートするものである以上、nav は非常に重要な要素のはずなんですが、仕様書でもいまいち歯切れが悪いのですよね。
---
header と footer は No.5 に書いた通りです。それ以上でも以下でもありません。
回答ありがとうございます
>その代わりサイドバーに表示するかもしれません。
この考え方を基準に考えてみます。
>賢いブラウザ
アウトラインの厳密なチェックができるものがあればいいんですが・・・
No.9
- 回答日時:
仕様書で言うと
Note:The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
4.4.2 The section element — HTML5: Edition for Web Authors ( http://www.w3.org/TR/html5-author/the-section-el … )
section要素は汎用コンテナブロックではない。スタイリングやスクリプトで必要な場合はdiv要素を使うべきである。一般的に文書の(その文書を構成する要素としての)アウトラインのリストアップとなるときに使う。
文字通り、一般的文章では章や節、項に当たるものを括るために使用する。と考えればよいかと・・
Textだと、上位レベルから
chapter(章)
section(節)
subsection(項)
subsubsection(目)
paragraph(段落)
subparagraph(小段落)
と、階層が決まっていましたが、HTML4.01では、divとh1~h2で区別するしかなかった。(多分に同じ科学系文書を出自にしているHTMLはTexの考え方を流用していると見受けられる)
HTMLでは、
section
|--h1
|-- section
|-- h1
|-- section
とh1~h6の階層ではなく、sectionの階層で、Texのchapter→section→subsection→subsubsectionに
articleについては、文字通り「記事」と訳すほうが良いでしょう。「記事」ですから、それ自体が完結しているのがsectionとの違いで、
<article>
<section></section>
<section></section>
</article>
あるいは、
<section>
<section></section>
<article>
<header></header>
<footer><footer>
<section></section>
</article>
</section>
も当然許される。
HTML5では、[文書を構成する要素]を、マークアップすることに重点が置かれている。--HTML4.01でもそうだったけど、なにせ意味のある要素がなかったためdivを使わざるを得なくて、<div class="contener">とか<div class="wraper">のような、TABLEとなんら変わらないマークアップが行われてきた事への反省かと。
示された例文に戻ると
<article id="container">
は、その変なマークアップを引きずっているようで・・
<body>直下にあるなら
<body>
<article id="TOP">
<header></header>
<section></section>
<footer></footer>
</article>
</body>
のほうが、気持ちよい(^^)
HTML5: Edition for Web Authors [著者のためのHTML5]( http://www.w3.org/TR/html5-author/ )
が資料としては良いかも・・
回答ありがとうございます。
タグを記号っぽく見ていたから理解できなかったのだと思いました
英単語として扱ってからなんとなく理解できるようになりました。
(Texのほうも少し見てみました。)
No.7
- 回答日時:
>僭越ながら、No.4 について、article は「記事、論文、論説」であり、要約(abstract)ではないのでは。
確かに、私は
<header>
<hgroup>
<h1>サイト見出し</h2>
<h2>ページ見出し</h2>
</hgroup>
<article id="abstruct" class="abstract">
<p>要約</p>
</abstruct>
</header>
<section id="first">
・・・と使ってます。間違ってしまった。
No.6
- 回答日時:
僭越ながら、No.4 について、article は「記事、論文、論説」であり、要約(abstract)ではないのでは。
例えば、データベースに「記事」が保存されている。それを取り出してそのまま表示することもできるし、補足的なものをくっ付けて、あるいは他の記事と一緒に表示しても良い。とにかく、それ自体で完結している(self-contained composition)ような内容が article です。
ですから、ページ全体も(考えようによっては)article になりえます。別に、article の中に article があっても構いません。文学全集のように、ひとつひとつの作品(article)を組み合わせてひとつの作品集(article)にするのも、よくあることです。
<article role="document">
<h1>野比のび太迷言集</h1>
<article>
<h1>第一巻の迷言</h1>
<article>
<article>
<h1>第二巻の迷言</h1>
<article>
</article>
ウェブアプリでは、ひとつのウィジェットが article になりえます。
<article role="application">
<header>
<h1>のび太のステータス</h1>
<ul role="tablist">
<li role="tab">能力</li>
<li role="tab">特技</li>
</ul>
<header>
<section role="tabpanel">
<h1>能力</h1>
</section>
<section role="tabpanel">
<h1>特技</h1>
</section>
</article>
なお、WAI ARIA をサポートする支援ソフトであれば、role="document" の中では文書モードのキー操作(例えばスペースバーでスクロール)、role="application" の中ではウィジェットのキー操作(例えばスペースバーでタブ切替)のように、振る舞いを変えるでしょう。
※ただ確かに、body 内を article でくくる必要はありません。私も以前、勘違いしていましたが。
---
aside は、DocBook では sidebar という「あら、言い切っちゃったよ」的な名前になっています。まあ、文書を読んでいるとき、メインのペインではなく、サイドバー(補助ペイン)に補足的に表示されるようなもの、それが aside です。
セクションを使ったアウトライン・エディタや、複数のペインを自由に飛び回るハイパーテキスト・アプリケーション。どう使われるのか不明と言われがちな HTML(5) のセクションですが、こうして見ると案外、応用例はありそうではないでしょうか。
ブラウザの機能強化が「マルチメディア」に偏っていて、こういう方面の(ハイパーテキストを扱う意味での)機能が、昔からの貧弱なままであるのが問題なのです ;-)
回答ありがとうございます
role属性・・・しらなかった(汗)
やっぱり本じゃだめですね・・・載ってませんでした
2つの例がわかりやすいです参考になりました
No.5
- 回答日時:
No.2 補足より。
> ふつうはいきなりulだけになると思いますが
ならば、別に nav である必要はありません。
<section>
<header>
<h1>苦悩の果てに</h1>
<p>絶望のどん底にいるのび太。立ち上がれのび太!</p>
<ul role="directory">
<li><a href="...">裏山にて</a></li>
<li><a href="...">和解</a></li>
</ul>
</header>
...
</section>
このように header に ul を置けば十分です。
HTML(5) のセクションの説明と称して、いわゆる「ヘッダ」「ナビ」「メイン」「フッタ」のページ分割図のようなものを描いているサイトは、十中八九、何かを誤解しています。
HTML(5) のセクションは、あくまで目次(正確にはアウトライン)に結び付いています。だから、見出しを置けない部分はセクションではない可能性の方が高い。
header は「セクションの導入部」、典型的にはリード文や見出し、要約などが含まれます。名前が header だからと言って、別に冒頭に置く必要はありません。末尾に置いても構いませんし、かつ、何個置いても構いません。それが導入部である限りは。
footer は「セクションのメタ情報」、典型的には著者情報や関連リンクなどが置かれます。これも、別に末尾に置く必要はなく、何個あっても構いません。
---
もし「ページ分割」をもとに考えるのなら、それは HTML(5) のセクションではありません。WAI ARIA のリージョンです。
<div role="document">
<div role="banner">...</div>
<div role="main">...</div>
<div role="contentinfo">...</div>
</div>
banner、main、contentinfo は、ひとつの document 内で 1 個ずつでなければなりません。WAI ARIA をサポートする支援ソフトは、キーボード操作によってこれらのリージョンを切り替えたり、一覧を作ったりするでしょう。
WAI ARIA のリージョンと、HTML(5) のセクションを組み合わせても構いません。しかし、両者を混同しないで下さい。特に、HTML(5) のセクションを「レイアウトの分割」と誤解しないで下さい。
あと、純粋理性批判と目次ジェネレータはただの例示です。プレースホルダです。
回答ありがとうございます
>見出しを置けない部分はセクションではない
なるほど・・・別になくてもってところなんですね
>セクションを「レイアウトの分割」と誤解しないで下さい。
マークアップとレイアウトで
divには気をつけようと思っています。
No.4
- 回答日時:
No.1です。
>たとえばHTML4のサイトを作り直す場合にどうなのかなあと思ったのですが・・・
なぜ、現在HTML4で完成しているものをHTML5にする必要はありません。HTML5でないと使えないvideoとかaudioとかを使う必要があるのなら、更新になります。
HTML5のロードマップだと、勧告は2014年になりそうです。
HTML4.01では、文書構造を示す要素が欠落していたため、tableやdivを使ったマークアップが使われ続けた反省から、新しい要素が追加されました。
HTML4.01でも、きちんと
<div class="section">
<div class="header">
<h1>見出し</h1>
</div>
<div class="section">
・・・・
とマークアップされていれば、なんら問題はないでしょう。
そのため、HTML5が勧告されるまでのしばらくは、HTML4.01の仕様のままで、へんなところを直していく作業で良いと思います。
また、HTML4.01が上記のようになっていたら、正規表現が扱えるテキストエディタで簡単にHTML5に直せます。
ただ、示されたHTMLで
<body>
<article id="container">
は、本来はおかしい。
【引用】____________ここから
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.4 Sections ― HTML5( http://www.w3.org/TR/2011/WD-html5-20110525/sect … )]より
artcleは日本語に訳すと、「要約」です。よく似た単語にsummaryがあります。学術論文で、論文の最初に書かれている「論文全体を簡潔にまとめた記事でそれを読めば全体像がわかるようなもの」が、articleで、論文の最後に「論文全体を短くまとめた」ものがsummaryです。
このことから解るように、articleが文書全体を括ることはおかしいです。
数学用のTexを経験されるとわかりますが、書籍で言うと
Tex HTMLL
part 部(冊子)・・・・サイト
chapter 章・・・・・・・ディレクトリ
section 節・・・・・・・section
subsection 小節・・・・・・section>section
subsubsection 小々節 ・・・・section>section>section
という大きな流れがあり、そのsection内に含まれるartcle(要約)であり、summary(まとめ)であり、aside(コラム)であり、脚注(mark)であると考えると良いでしょう。
1.sectionについて
h2とh2に関する記事pがある場合
<section>
-<h2></h2>
★↑でなければなりません。明確にそのセクションのヘッダーに当たるなら
<section>
<header>
<h1></h1>
</header>
もよい。ただし、hnが複数ある場合は
<hgroup>
<h1>見出し</h1>
<h2>見出し</h2>
2.article/asideについて
<article>
-コンテンツ
-<aside>関連ないもの</aside>
</article>
みたいに「article内」でasideを使い除外していいのでしょうか?
asideはどこにあってもよい
3.全体として
<article id="container">
-<h1></h1>
-<aside>
--<header></header>
--<nav></nav>
-</aside>
-<section>
--<h2></h2>
--<p></p>
-</section>
-<aside>
--<footer></footer>
-</aside>
</article>
★はおかしいです。
<section>
--<header><!--ヘッダ -->
--<h1>見出し</h1>
--<article>要約</article>
--<nav></nav>
--</header>
--<section>
----<h2></h2>
----<p></p>
--</section>
--<footer>
--</footer>
</section>
となります。★id="contener"とか、id="wrap"が間違っているから、section/header/footerが導入されたのです。
h1をロゴ・会社名にせず、サイト上部の1行文にするべきか
<section>
<header>
<h1>サイト名</h1>
・・・・article(要約)やnav(ナビゲーション)が含まれる場合もある
</header>
ロゴやバナーは背景にするとかが良いでしょうね。
<nav>
<ul>
<li><a href="">トップへ</a></li>
<li><a href="">会社概要</a></li>
にて、nav>ul+liをabsoluteで、ページの左上にロゴとして独立して配置(absolute)するのがスマートかもね。
回答ありがとうございます
>正規表現が扱えるテキストエディタで簡単にHTML5に直せます
実はそれを狙っていますw
そのためにHTML5ベースで作っておいたほうがよいかと思いまして・・・・
その過程で疑問に思ったので質問しました。
Texの部分の説明・・・参考になりました。
No.3
- 回答日時:
No.1です。
下記サイトに解りやすい説明があります。HTML5.0で強化された機能 | HTML5とは?変わるWebと注目の新要素 HTML5.0の情報サイト ( http://www.html5-guide.com/strong/ )以降のページ
再度回答ありがとうございます
そこは一度見たことがあります
実例がないので詳しく見ていませんでした(^^;
さっそく読んでみます。
No.2
- 回答日時:
ページの目次を考えて下さい。
HTML(5) のセクションというのは「目次から直接ジャンプできる部分」のことです(WAI ARIA で言うところの role="region")。そして、目次に載る「ラベル」が、すなわちセクションの見出しです。No.0 の『3. 全体として』からは、次のような目次が生成されるでしょう。
+ [article の見出し]
+ [無名の aside]
+ [無名の nav]
+ [section の見出し]
+ [無名の aside]
これが意図した目次であるか、私には分かりません。しかし、ラベルのない(無名の)セクションが目次に載るというのは、あまり普通のことではない、と思います。
---
もし次のような目次を想定するなら、
+ 純粋理性批判
+ 前書き
+ 目次
+ 本論
+ 後書き
+ 関連書籍の案内
マークアップの一例は次のようなものです。
<section>
<header>
<h1>純粋理性批判</h1>
<section>
<h1>前書き</h1>
...
</section>
<nav>
<h1>目次</h1>
...
</nav>
</header>
<article>
<h1>本論</h1>
...
<article>
<footer>
<section>
<h1>後書き</h1>
...
</section>
<nav>
<h1>関連書籍の案内</h1>
...
</nav>
</footer>
</section>
header、footer は目次に関与しません。単にセクションをグループ化するだけです。
本文あるいは各セクションの中で、本筋から外れる部分(例えば傍注、脚注の集まり)は aside です。aside はセクションなので目次に載りますが、目次ジェネレータの設定によっては aside を含めないようにすることもできるでしょう。この点で、そんなに多用するものではありません。
それと、nav も濫用されるきらいがありますが、単なるページ内リンクだけなら ul などのリストで結構です(WAI ARIA で言えば role="directory")。リンク集のように、リンク自体がひとつの内容となるとき nav を使います。ですから、nav もそんなに使われるものではありません。
ですから、section と、せいぜい article の使い方を覚えれば十分です。nav、aside を「ちゃんと」使えているサイトは、あまり見たことがありません。
この回答への補足
>header、footer は目次に関与しません。単にセクションをグループ化するだけです。
これでなんとなくわかってきました
header/footerがセクショニングコンテンツに
含まれていないというところを見落としていました。
逆に言うと<nav>を<header>の外に出してもいいわけですよね?
それと<nav>を使うとき正式には見出し(例でいう「目次」)
があったほうがいいのでしょうか?(CSSで追い出すとかで)
ふつうはいきなりulだけになると思いますが・・・
回答ありがとうございます
なるほど・・・書籍のイメージでマークアップすればいいんだ
と思いました。
あとWAI ARIA・目次ジェネレータ・純粋理性批判
というキーワードが・・・
No.1
- 回答日時:
ちょっと歴史を知っておいたほうがよいかも。
HTML4.01が作られたとき、それ以前のHTML(3.2)は、ブラウザ戦争で膨れ上がったベンダー独自の要素が加わり、本来のHTMLの目的
・文書構造をその構成要素を示すマークアップを行うことで、プラットホームに関わらず文書が利用できること。
から遠ざかり、FONTに代表される見栄えに関する要素属性、要素(タグ)をその内容・意味ではなくデザインのために使用することが増えたという反省から、「文書をその構成要素にしたがってマークアップするHTMLに戻し、見栄えはCSSに任せる」という姿勢を明確にしました。
しかし、HTML4.01では文書の構成要素を示す要素事態が決定的に不足していたため、相変わらずデザインのためのタグが使われ続けました。DIV要素の多用などはその典型で、<div class="contener">とか。
そこでHTML5では、より明確に要素が付け加わりました。そのため、基本的には
<body>
<header>ヘッダー</header>
<section>本文</section>
<footer>フッター</footer>
</body>
が最もシンプルな形
・<header></header>内にh1~h2は複数書けないので、必要な場合は
<hgroup>
<h1>見出し</h1>
<h2>サブ見出し</h2>
</hgroup>
・ひとつのセクションには見出しが必ずひとつあるはずなので
<section>
<h2>見出し</h2>
</section>
となる。
・本文内にサブセクションがある場合は
<section>
<h2>見出し</h2>
<p>文章</h2>
<section>
<h1>見出し</h1>
<p>段落</p>
</section>
</section>
としなければなりません。(見出しがふたつのときは<hgroup>)
★このとき、HTML5では、見出しレベルはsectionの階層で決まります。DOMでは
|-BODY
|-HEADER
| |- H1
|-SECTION
| |-H2
| |-SECTION
| | |-H1
となり、hの数字ではなく、その階層で決まります。
・大きな文書の一部の場合は、
<body>
<section>
<header>
<h1>見出し</h1>
</header>
<section>
<h1>見出し</h1>
<p>文章</h2>
<section>
<h1>見出し</h1>
<p>段落</p>
</section>
</section>
</section>
</body>
でも良いですね。
逆に小さな記事では、
<body>
<h1>見出し</h1>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</body>
★articleはsection(やfooter)内の関連記事でそれ自体が完結しているもの
★asideはsection(やfooter)内で、それが所属する親要素(本文)と直接関係ない記事
★figureは、他所も参照される挿絵や記事、markという行内要素もある。
のように使い分けます。
★navはナビゲーションリンクですから、section内にもfooter内にも、あるいはこれらと独立して存在しえます。
<header>
<nav>
<ul>・・・ページの簡単な目次とか、パンくずリストとか
</header>
<section>
<nav>
<ul>
<li><a href=""></a></li>
だと、そのセクション内のナビゲーション(目次)
</section>
<nav>
<ul>
だと、そのページの目次
</div>
<footer>
<nav>
<ul>
だとサイと全体のナビゲーション
のように区別しておくと良いでしょう。
★それ以外に、出自は見栄えだったけど構造的な意味に読み替えて使われる<b>,<hr>,<s>,<strong>も要チェックです。
詳しくは、
HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
※ただし、これはHTML4.01をしっかり、正しく理解している方向けですから必要なら適宜HTML4.01の仕様書(ただしstrictです!!)を参照してください。
HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
[英文]
HTML5 ( http://www.w3.org/TR/html5/ )
回答ありがとうございます。
HTML5の辞書があるので単品の使い方はわかるのですが
たとえばHTML4のサイトを作り直す場合にどうなのかなあと
思ったのですが・・・
やはりシンプルにするに越したことはないようですね
リンク先もチェックしてみます
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
div要素が重なってします
-
html5のhタグの厳密な使い方
-
cssにてボタン位置を下揃えしたい
-
文字の下線を画像に変えて表示...
-
htmlのolやulなどlistにtitleや...
-
hタグの右横に画像を表示
-
標題<h1>に、網掛けはできますか?
-
h1に自分自身へのリンクを張...
-
サイドバーの高さを本文部分と...
-
background-imageが効かない
-
html の divとtable の役割
-
固定幅+可変幅レイアウトがな...
-
HPのレイアウトで縦線を入れ...
-
CSSで、contentsがfooterに重な...
-
要素間、要素内に隙間が空く
-
CSSについての質問ですが、左右...
-
【ヒトの神秘】美男美女から何...
-
htmlの文字が縦書きになる
-
VBAでの素数の求め方
-
Macで画像の切り抜きできないの?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報