webpagemaker https://blog.hatena.ne.jp/webpagemaker/ 96's blog https://96s.hatenablog.com/ HTML ブログ・HTML5の勉強「グリッドレイアウト」 headerとnavはたて並びで。 制作したもの↓ 左１列と右２列にdivを分けて、中にheader、nav、sectionを配置。 小さい画像はそれぞれの中でさらにfloatさせてます。 navの中をul・liで作ったものをsectionの画像にも流用しているので、ul・liだらけ。 imgのborder:none;はIE対策として必須。 CSSは簡潔に。 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2F96s.hatenablog.com%2Fentry%2F20131024%2F1382540400" title="HTML07（カラムレイアウト） - 96&#39;s blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> http://cdn-ak.f.st-hatena.com/images/fotolife/w/webtm2013/20131024/20131024110844.jpg Hatena Blog https://hatena.blog 2013-10-24 00:00:00 rich https://96s.hatenablog.com/entry/20131024/1382540400 1.0 100%