ブロック要素とインライン要素

今更だけどブロック要素とインライン要素


クイックHTMLリファレンスより(http://www.htmq.com/htmlkihon/005.shtml
■ブロックレベル要素とインライン要素

HTMLで定義されている要素のうち、〜の中で使用される要素の多くは、 ブロックレベル要素(Block-Level Elements)か、インライン要素(Inline Elements)に分類されます。 この分類により、どの要素の内側にどの要素を配置できるかなどのルールが定められています。

ブロックレベル要素(Block-Level Elements)

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。

ブロックレベル要素には、以下のものがあります。

-


、<noscript>、<ol>、<p>、<pre>、<table>、<ul> インライン要素(Inline Elements) インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。 インライン要素には、以下のものがあります。 <a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、 <em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、 <small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var> 配置ルール ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 一方、インライン要素の中には、文字データや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。</p> </div> <footer class="entry-footer"> <div class="entry-tags-wrapper"> <div class="entry-tags"> </div> </div> <p class="entry-footer-section track-inview-by-gtm" data-gtm-track-json="{&quot;area&quot;: &quot;finish_reading&quot;}"> <span class="author vcard"><span class="fn" data-load-nickname="1" data-user-name="ShibazakiHiroshi" >ShibazakiHiroshi</span></span> <span class="entry-footer-time"><a href="https://shibazakihiroshi.hatenadiary.org/entry/20140310/1394414982"><time data-relative datetime="2014-03-10T01:29:42Z" title="2014-03-10T01:29:42Z" class="updated">2014-03-10 10:29</time></a></span> <span class=" entry-footer-subscribe " data-test-blog-controlls-subscribe> <a href="https://blog.hatena.ne.jp/ShibazakiHiroshi/shibazakihiroshi.hatenadiary.org/subscribe?utm_campaign=subscribe_blog&amp;utm_medium=button&amp;utm_source=blogs_entry_footer"> 読者になる </a> </span> </p> <div class="hatena-star-container" data-hatena-star-container data-hatena-star-url="https://shibazakihiroshi.hatenadiary.org/entry/20140310/1394414982" data-hatena-star-title="ブロック要素とインライン要素" data-hatena-star-variant="profile-icon" data-hatena-star-profile-url-template="https://blog.hatena.ne.jp/{username}/" ></div> <div class="social-buttons"> <div class="social-button-item"> <a href="https://b.hatena.ne.jp/entry/s/shibazakihiroshi.hatenadiary.org/entry/20140310/1394414982" class="hatena-bookmark-button" data-hatena-bookmark-url="https://shibazakihiroshi.hatenadiary.org/entry/20140310/1394414982" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="この記事をはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="この記事をはてなブックマークに追加" width="20" height="20" style="border: none;" /></a> </div> <div class="social-button-item"> <div class="fb-share-button" data-layout="box_count" data-href="https://shibazakihiroshi.hatenadiary.org/entry/20140310/1394414982"></div> </div> <div class="social-button-item"> <a class="entry-share-button entry-share-button-twitter test-share-button-twitter" href="https://twitter.com/intent/tweet?text=%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E8%A6%81%E7%B4%A0%E3%81%A8%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E8%A6%81%E7%B4%A0+-+Shibazaki%E3%81%AE%E3%83%9C%E3%82%B1%E5%AF%BE%E7%AD%96&amp;url=https%3A%2F%2Fshibazakihiroshi.hatenadiary.org%2Fentry%2F20140310%2F1394414982" title="X(Twitter)で投稿する" ></a> </div> </div> <div class="google-afc-image test-google-rectangle-ads"> <div id="google_afc_user_container_1" class="google-afc-user-container google_afc_blocklink2_5 google_afc_boder" data-test-unit="/4374287/blog_user"></div> <a href="http://blog.hatena.ne.jp/guide/pro" class="open-pro-modal" data-guide-pro-modal-ad-url="https://hatena.blog/guide/pro/modal/ad">広告を非表示にする</a> </div> <div class="customized-footer"> <div class="entry-footer-modules" id="entry-footer-secondary-modules"> </div> </div> <div class="comment-box js-comment-box"> <ul class="comment js-comment"> <li class="read-more-comments" style="display: none;"><a>もっと読む</a></li> </ul> <a class="leave-comment-title js-leave-comment-title">コメントを書く</a> </div> </footer> </div> </article> <!-- rakuten_ad_target_end --> <!-- google_ad_section_end --> <div class="pager pager-permalink permalink"> <span class="pager-prev"> <a href="https://shibazakihiroshi.hatenadiary.org/entry/20140311/1394496853" rel="prev"> <span class="pager-arrow">&laquo; </span> 匿名性を盾に人を攻撃したけど 正体ばれた… </a> </span> <span class="pager-next"> <a href="https://shibazakihiroshi.hatenadiary.org/entry/20140310/1394414836" rel="next"> HPをレスポンシブルでHTML5な奴に移行する… <span class="pager-arrow"> &raquo;</span> </a> </span> </div> </div> </div> <aside id="box1"> <div id="box1-inner"> </div> </aside> </div><!-- #wrapper --> <aside id="box2"> <div id="box2-inner"> <div class="hatena-module hatena-module-profile"> <div class="hatena-module-title"> プロフィール </div> <div class="hatena-module-body"> <a href="https://shibazakihiroshi.hatenadiary.org/about" class="profile-icon-link"> <img src="https://cdn.profile-image.st-hatena.com/users/ShibazakiHiroshi/profile.png" alt="id:ShibazakiHiroshi" class="profile-icon" /> </a> <span class="id"> <a href="https://shibazakihiroshi.hatenadiary.org/about" class="hatena-id-link"><span data-load-nickname="1" data-user-name="ShibazakiHiroshi">id:ShibazakiHiroshi</span></a> </span> <div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box" > <a href="#" class="hatena-follow-button js-hatena-follow-button"> <span class="subscribing"> <span class="foreground">読者です</span> <span class="background">読者をやめる</span> </span> <span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once> <span class="foreground">読者になる</span> <span class="background">読者になる</span> </span> </a> <div class="subscription-count-box js-subscription-count-box"> <i></i> <u></u> <span class="subscription-count js-subscription-count"> </span> </div> </div> <div class="profile-about"> <a href="https://shibazakihiroshi.hatenadiary.org/about">このブログについて</a> </div> </div> </div> <div class="hatena-module hatena-module-search-box"> <div class="hatena-module-title"> 検索 </div> <div class="hatena-module-body"> <form class="search-form" role="search" action="https://shibazakihiroshi.hatenadiary.org/search" method="get"> <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required> <input type="submit" value="検索" class="search-module-button" /> </form> </div> </div> <div class="hatena-module hatena-module-links"> <div class="hatena-module-title"> リンク </div> <div class="hatena-module-body"> <ul class="hatena-urllist"> <li> <a href="https://hatena.blog/">はてなブログ</a> </li> <li> <a href="https://hatena.blog/guide?via=200109">ブログをはじめる</a> </li> <li> <a href="http://blog.hatenablog.com">週刊はてなブログ</a> </li> <li> <a href="https://hatena.blog/guide/pro">はてなブログPro</a> </li> </ul> </div> </div> <div class="hatena-module hatena-module-recent-entries "> <div class="hatena-module-title"> <a href="https://shibazakihiroshi.hatenadiary.org/archive"> 最新記事 </a> </div> <div class="hatena-module-body"> <ul class="recent-entries hatena-urllist "> <li class="urllist-item recent-entries-item"> <div class="urllist-item-inner recent-entries-item-inner"> <a href="https://shibazakihiroshi.hatenadiary.org/entry/20151111/1447210027" class="urllist-title-link recent-entries-title-link urllist-title recent-entries-title">検索時における言い換え</a> </div> </li> <li class="urllist-item recent-entries-item"> <div class="urllist-item-inner recent-entries-item-inner"> <a href="https://shibazakihiroshi.hatenadiary.org/entry/20151111/1447209217" class="urllist-title-link recent-entries-title-link urllist-title recent-entries-title">「ネット常識力」調査、日本は16カ国中で最下位</a> </div> </li> <li class="urllist-item recent-entries-item"> <div class="urllist-item-inner recent-entries-item-inner"> <a href="https://shibazakihiroshi.hatenadiary.org/entry/20151020/1445309023" class="urllist-title-link recent-entries-title-link urllist-title recent-entries-title">板書の代わりに生徒に紙に書かせる</a> </div> </li> <li class="urllist-item recent-entries-item"> <div class="urllist-item-inner recent-entries-item-inner"> <a href="https://shibazakihiroshi.hatenadiary.org/entry/20151019/1445219488" class="urllist-title-link recent-entries-title-link urllist-title recent-entries-title">SMSで銀行の偽サイトへ誘導する手口に注意(フィッシング)</a> </div> </li> <li class="urllist-item recent-entries-item"> <div class="urllist-item-inner recent-entries-item-inner"> <a href="https://shibazakihiroshi.hatenadiary.org/entry/20151019/1445219357" class="urllist-title-link recent-entries-title-link urllist-title recent-entries-title">金融庁をかたり、秘密の合い言葉などの入力を求めるフィッシングサイトに注意</a> </div> </li> </ul> </div> </div> <div class="hatena-module hatena-module-archive" data-archive-type="default" data-archive-url="https://shibazakihiroshi.hatenadiary.org/archive"> <div class="hatena-module-title"> <a href="https://shibazakihiroshi.hatenadiary.org/archive">月別アーカイブ</a> </div> <div class="hatena-module-body"> <ul class="hatena-urllist"> <li class="archive-module-year archive-module-year-hidden" data-year="2015"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2015" class="archive-module-year-title archive-module-year-2015"> 2015 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2015/11" class="archive-module-month-title archive-module-month-2015-11"> 2015 / 11 </a> </li> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2015/10" class="archive-module-month-title archive-module-month-2015-10"> 2015 / 10 </a> </li> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2015/02" class="archive-module-month-title archive-module-month-2015-2"> 2015 / 2 </a> </li> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2015/01" class="archive-module-month-title archive-module-month-2015-1"> 2015 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2014"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2014" class="archive-module-year-title archive-module-year-2014"> 2014 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2014/05" class="archive-module-month-title archive-module-month-2014-5"> 2014 / 5 </a> </li> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2014/04" class="archive-module-month-title archive-module-month-2014-4"> 2014 / 4 </a> </li> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2014/03" class="archive-module-month-title archive-module-month-2014-3"> 2014 / 3 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2013"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2013" class="archive-module-year-title archive-module-year-2013"> 2013 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2013/07" class="archive-module-month-title archive-module-month-2013-7"> 2013 / 7 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2012"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2012" class="archive-module-year-title archive-module-year-2012"> 2012 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2012/11" class="archive-module-month-title archive-module-month-2012-11"> 2012 / 11 </a> </li> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2012/08" class="archive-module-month-title archive-module-month-2012-8"> 2012 / 8 </a> </li> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2012/07" class="archive-module-month-title archive-module-month-2012-7"> 2012 / 7 </a> </li> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2012/06" class="archive-module-month-title archive-module-month-2012-6"> 2012 / 6 </a> </li> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2012/05" class="archive-module-month-title archive-module-month-2012-5"> 2012 / 5 </a> </li> <li class="archive-module-month"> <a href="https://shibazakihiroshi.hatenadiary.org/archive/2012/04" class="archive-module-month-title archive-module-month-2012-4"> 2012 / 4 </a> </li> </ul> </li> </ul> </div> </div> </div> </aside> </div> </div> </div> </div> <footer id="footer" data-brand="hatenablog"> <div id="footer-inner"> <div style="display:none !important" class="guest-footer js-guide-register test-blogs-register-guide" data-action="guide-register"> <div class="guest-footer-content"> <h3>はてなブログをはじめよう!</h3> <p>ShibazakiHiroshiさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか?</p> <div class="guest-footer-btn-container"> <div class="guest-footer-btn"> <a class="btn btn-register js-inherit-ga" href="https://blog.hatena.ne.jp/register?via=200227" target="_blank">はてなブログをはじめる(無料)</a> </div> <div class="guest-footer-btn"> <a href="https://hatena.blog/guide" target="_blank">はてなブログとは</a> </div> </div> </div> </div> <address class="footer-address"> <a href="https://shibazakihiroshi.hatenadiary.org/"> <img src="https://cdn.blog.st-hatena.com/images/admin/blog-icon-noimage.png" width="16" height="16" alt="Shibazakiのボケ対策"/> <span class="footer-address-name">Shibazakiのボケ対策</span> </a> </address> <p class="services"> Powered by <a href="https://hatena.blog/">Hatena Blog</a> | <a href="https://blog.hatena.ne.jp/-/abuse_report?target_url=https%3A%2F%2Fshibazakihiroshi.hatenadiary.org%2Fentry%2F20140310%2F1394414982" class="report-abuse-link test-report-abuse-link" target="_blank">ブログを報告する</a> </p> </div> </footer> <script async src="https://s.hatena.ne.jp/js/widget/star.js"></script> <script> if (typeof window.Hatena === 'undefined') { window.Hatena = {}; } if (!Hatena.hasOwnProperty('Star')) { Hatena.Star = { VERSION: 2, }; } </script> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=719729204785177&version=v17.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="quote-box"> <div class="tooltip-quote tooltip-quote-stock"> <i class="blogicon-quote" title="引用をストック"></i> </div> <div class="tooltip-quote tooltip-quote-tweet js-tooltip-quote-tweet"> <a class="js-tweet-quote" target="_blank" data-track-name="quote-tweet" data-track-once> <img src="https://cdn.blog.st-hatena.com/images/admin/quote/quote-x-icon.svg?version=b6dfa13fdd3db0041337cff8e11dda" title="引用して投稿する" > </a> </div> </div> <div class="quote-stock-panel" id="quote-stock-message-box" style="position: absolute; z-index: 3000"> <div class="message-box" id="quote-stock-succeeded-message" style="display: none"> <p>引用をストックしました</p> <button class="btn btn-primary" id="quote-stock-show-editor-button" data-track-name="curation-quote-edit-button">ストック一覧を見る</button> <button class="btn quote-stock-close-message-button">閉じる</button> </div> <div class="message-box" id="quote-login-required-message" style="display: none"> <p>引用するにはまずログインしてください</p> <button class="btn btn-primary" id="quote-login-button">ログイン</button> <button class="btn quote-stock-close-message-button">閉じる</button> </div> <div class="error-box" id="quote-stock-failed-message" style="display: none"> <p>引用をストックできませんでした。再度お試しください</p> <button class="btn quote-stock-close-message-button">閉じる</button> </div> <div class="error-box" id="unstockable-quote-message-box" style="display: none; position: absolute; z-index: 3000;"> <p>限定公開記事のため引用できません。</p> </div> </div> <script type="x-underscore-template" id="js-requote-button-template"> <div class="requote-button js-requote-button"> <button class="requote-button-btn tipsy-top" title="引用する"><i class="blogicon-quote"></i></button> </div> </script> <div id="hidden-subscribe-button" style="display: none;"> <div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box" > <a href="#" class="hatena-follow-button js-hatena-follow-button"> <span class="subscribing"> <span class="foreground">読者です</span> <span class="background">読者をやめる</span> </span> <span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once> <span class="foreground">読者になる</span> <span class="background">読者になる</span> </span> </a> <div class="subscription-count-box js-subscription-count-box"> <i></i> <u></u> <span class="subscription-count js-subscription-count"> </span> </div> </div> </div> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <script src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> <script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?v=1.12.4&amp;version=b6dfa13fdd3db0041337cff8e11dda"></script> <script src="https://cdn.blog.st-hatena.com/js/texts-ja.js?version=b6dfa13fdd3db0041337cff8e11dda"></script> <script id="vendors-js" data-env="production" src="https://cdn.blog.st-hatena.com/js/vendors.js?version=b6dfa13fdd3db0041337cff8e11dda" crossorigin="anonymous"></script> <script id="hatenablog-js" data-env="production" src="https://cdn.blog.st-hatena.com/js/hatenablog.js?version=b6dfa13fdd3db0041337cff8e11dda" crossorigin="anonymous" data-page-id="entry"></script> <script>Hatena.Diary.GlobalHeader.init()</script> <script id="valve-dmp" data-service="blog" src="https://cdn.pool.st-hatena.com/valve/dmp.js" data-test-id="dmpjs" async></script> </body> </html>