【Webデザイン】containerとは

container

containerを使うとWebサイトの表示が以下のようなイメージで表示できる。

containerのイメージ

＜コーディング＞

index.html側

<div class="container">

<img src="https://...jpg" alt="picture">

<section class="lorem1">

<h2>

lorem1

</h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Similique doloribus nesciunt recusandae quos maxime ipsa fugit perspiciatis,

eius voluptatibus ex beatae voluptatem,

non nostrum? Doloremque aspernatur esse quidem nobis eligendi!

</p>

<h2>

lorem2

</h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Similique doloribus nesciunt recusandae quos maxime ipsa fugit perspiciatis,

eius voluptatibus ex beatae voluptatem,

non nostrum? Doloremque aspernatur esse quidem nobis eligendi!

</p>

</section>

</div>

style.css側

.container {

width: 100%;

max-width: 960px;

margin-right: auto;

margin-left: auto;

}

img {

max-width: 100%;

}

＜余談＞

Web画面上で見ると、コーディングの各行に空白行が入ってるが無視。
（はてなブログの仕様で空白行が入ってる）
時間がある時に「はてなブログ」の「HTML編集」画面を確認して空白行を消せるか試す。