見出し画像

「インライン要素」と「ブロックライン要素」の違いと要素の変更方法（動画解説）

石川/ホームページの作り方・Webマーケティング・稼ぎ方

WEB制作で必ず認識しておかないといけない
「インライン要素」と「ブロックライン要素」の違いと要素の変更方法について動画で解説させていただきます！

解説動画

サンプルデータdownloadはこちら

HTML,CSS初期設定の方法

HTML,CSS初期設定の方法はこちら

サンプルデータ

HTML

<body>
   <section>
       <h2>ブロックライン要素 (一部)</h2>
       <p>段落</p>
       <hr>
       <h3>見出し</h3>
       <hr>
       <ul>
           <li>リスト</li>
           <li>リスト</li>
           <li>リスト</li>
       </ul>
       <hr>
       <div>div</div>
       <hr>
   </section>
   <section>
       <h2>インライン要素 (一部)</h2>
       テキスト
       <hr>
       <a href="#">リンクタグ</a>
       <hr>
       <img src="https://cdn.pixabay.com/photo/2019/05/08/21/21/cat-4189697_960_720.jpg">
       <hr>
       <span>span</span>
   </section>
</body>

CSS

@charset "utf-8";
body{
   padding: 2em;
   background: rgb(134, 189, 210);
}
section{
   margin-bottom: 2em;
   background: #fff ;
   padding: 1em;
}
h2{
   margin-bottom: .5em;
   font-size: 2em;
}

img{
   width: 300px;
   height: auto;
}

この記事が気に入ったらサポートをしてみませんか？