HTMLスキル - 第9章 Lesson4

Webサイト全体を真ん中寄せにするためのタグの記述方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

Webページ全体を真ん中寄せにするための<div>タグの記述方法について、初心者向けに解説しています。



この動画で学べること

・Webサイト全体を真ん中寄せにする方法



Webサイト全体を真ん中寄せにする方法

コンテンツの横幅を調整するためには<div>タグを使います。
今回は、この<div>タグを使ってヘッダーからフッターまでをくるむ袋のようなものを作っていきましょう。
<body>開始タグのすぐ後に<div>を、<footer>終了タグのすぐ後に</div>を入れて、全てをくるみます。
そして、前回も学んだように<div>タグに名前をつけていきましょう。
なんでも大丈夫なのですが、すべてを囲む今回は<div>ボックスにはcontainerやwrapperという名前をつけることが一般的です。
今回は、「container」という名前にしておきましょう。




 <body>
<div id="container">
<header>
ヘッダー
<nav>ナビゲーション</nav>
</header>
<div id="main">メインコンテンツ</div>
<div id="sidebar">サイドバー</div>
<footer>フッター</footer>
</div>
</body>



ここまでできたら 、保存してブラウザで見てみましょう。
横幅が小さくなって見やすくなりました。
実際にはこの横幅などはCSSでスタイリングしていますが、今回は<div>タグを使って囲んでいるということを覚えていただければ大丈夫です。