「インライン要素とブロックレベル要素(ブロック要素)」の編集履歴(バックアップ)一覧はこちら

インライン要素とブロックレベル要素(ブロック要素) - (2015/05/12 (火) 23:26:08) の最新版との変更点

追加された行は緑色になります。

削除された行は赤色になります。

ここでは、インライン要素とブロックレベル要素についてまとめていきます。 #contents *ブロックレベル要素 *インライン要素 *imgタグ(インライン要素に含まれる)
ここでは、インライン要素とブロックレベル要素についてまとめていきます。 #contents *HTML5で廃止?  いきなりですが、HTML5からインライン要素、ブロックレベル要素という概念はなくなりました。(ややこしいですが、概念はなくなりましたが、一応存在としては残っています。)「コンテンツ・モデル」という考え方になり、各要素の内包できるものや内包されるものが決められており、それ以外の要素は入れてはいけない。という概念に移りつつあります。 よくCSSで display: inline; display: block; などと記述されますが、それとは&color(red){別のものである}と考えてください。 色々な記事を拝見しますと、これまでは見た目重視(ブロックレベル要素、インライン要素の使用)のところから文章構造(クローラに正しく解釈させられるか)という方向に移りつつあるようです。 http://creator.aainc.co.jp/archives/4045 ~ 例:ブロックレベル要素の中にインライン要素~ 正しいのは以下 <p><strong>この表現はいい</strong></p> 正しくないのは以下 <strong><p>これはダメ</p></strong> http://www.mdn.co.jp/di/articles/2605/?page=8 *ブロックレベル要素とインライン要素 とある記事に >divは代表的なブロックレベル要素だ。ブロックレベル要素は新しい行に配置される。そして、ブラウザサイズに応じて、可能な限り左右に引き延ばされる。pやformもブロックレベル要素だ。HTML5で新しく追加されたheader、footer、sectionなどもブロックレベル要素である。 *ブロックレベル要素とインライン要素一覧 **ブロックレベル要素 <address> <blockquote> <center> <dir> <div> <dl> <fieldset> <form> <h1>-<h6> <hr> <isindex> <menu> <noframes> <noscript> <ol> <p> <pre> <table> <ul> <header> <footer> <article> <section> <aside> **インライン要素 <a> <abbr> <acronym> <applet> <b> <basefont> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <font> <i> <iframe> <img> <input> <kbd> <label> <map> <object> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <sub> <sup> <textarea> <tt> <u> <var> **ブロックレベル要素の特徴 縦に改行(積まれていくイメージ)されていく 幅と高さを指定する事ができる 上下左右にmarginとpaddingを指定できる text-alignは要素の中身に適応される vertical-alignは指定できない **インライン要素の特徴 横に並んでいくイメージ 幅や高さは内容物の大きさについて 左右だけにmarginやpaddingを指定する事ができる text-alignを親ブロックにつけることで指定できる vertical-alignを指定できる 参照元:http://ja.learnlayout.com/display.html

表示オプション

横に並べて表示:
変化行の前後のみ表示: