横幅(width)を画面いっぱいにする方法を解説します。高さを画面いっぱいにしたいのに方法がよくわからない!height:100%じゃ効かない!CSSで高さを画面いっぱいにする方法を解説します。50%)で横位置を画面に合わせる【まとめ】widthを画面いっぱいにする方法body直下の要素body直下の要素の横幅を画面いっぱいにするポイントは以下の3点です。bodyのmarginとpaddingを0にするbody直下の要素はdivなどのブロック要素width:auto(または未指定)かwidth:100%(box-sizing:border-boxも追記)bodyのmarginとpaddingを0にするまずbodyのmarginとpaddingを0にしましょう。※bodyのpaddingはもともと0ですが、marginとどっちかで迷うよりは両方0にしておきましょう。bodyはサイト全体を囲うhtmlタグです。これを画面いっぱいにするためにmargin(外側の空白)を0にします。paddingは内側の空白です。これが0でないと子要素の横幅をいっぱいにしてもpaddingの分内側に引っ込んでしまいます。【CSS】marginとは?paddingとは?両者の違い・使い分けについてmarginとpaddingはボックスの余白を調整するCSSです。marginとpaddingの使い方や違いについて説明します。画面いっぱいにする要素はdivなどのブロック要素にしましょう。aタグなどのインライン要素はwidthが効かないためです。htmlのブロック要素とインライン要素とは?htmlタグは大きくブロック要素とインライン要素に分かれます。このブロック要素とインライン要素を理解していないとCSSで装飾するときにつまづきますし、html構築でも間違ってしまいます。この記事を読む厳密に言えば「display:block」を指定することで効きますが、bodyの直下の要素はサイトの構成を担う要素であるため、divやheaderなどの大きく囲う要素がふさわしいです。ちなみに「main」タグはIEでなぜかインライン要素になっているので「display:block」を指定してあげましょう。width:auto(または未指定)かwidth:100%(box-sizing:border-boxも追記)さてこの段階でdivの横幅は画面いっぱいになっています。それはwidth(横幅)の初期値がautoであるためです。height【要素の幅と高さを指定】CSSのwidth(幅)とheight(高さ)の指定について説明します。あわせて注意点、min-width(最小幅)、max-width(最大幅)についても説明します。この記事を読むブロック要素に「width:auto」が指定されていると親の幅いっぱいに広がります。親(body)の幅を画面いっぱいにしておいたため、その子要素であるdivの横幅もいっぱいになったというわけです。<div></div></body>「width:100%」を指定しても横幅いっぱいになります。その場合、borderやpaddingを指定すると右側にはみ出てしまうため「box-sizing:border-box」も追記しましょう。<div></div></body>CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読むbody直下以外width:100%やautoでは画面いっぱいにならない要素を画面いっぱいにするポイントは以下の3点です。50%)で横位置を画面に合わせるwidth:100vwで画面幅いっぱいにするvwはブラウザ幅を基準とした長さの単位です。100vwでブラウザ幅と同じ長さになります。CSSで使う長さの単位【px・em・%・vw・vh/calc】CSSにはwidth等で大きさ・長さを指定するための単位が複数存在します。それらを計算できる仕組みがあります。これらをマスターしてイメージ通りのデザインを作成しましょう。この記事を読むbox-sizing:border-boxでpaddingを含めるwidthは本来paddingとborderを含みません。width:100vwとpadding:20pxを指定していると、横幅の合計は100vw+40pxとなり、画面幅をはみ出してしまいます。「box-sizing:border-box」を指定するとwidthにpaddingとborderが含まれ、はみ出さなくなります。【CSS】marginとは?paddingとは?両者の違い・使い分けについてmarginとpaddingはボックスの余白を調整するCSSです。marginとpaddingの使い方や違いについて説明します。50%)で横位置を画面に合わせる「width:100vw」を指定をすると、要素の右側は画面からはみ出るでしょう。はみでる理由は親のpaddingとborderに押されているせいです。この押された分をマイナスmarginで相殺してもいいですが親に大きな影響を受けます。50%)を指定すると横位置を画面に合わせることができます。※このやり方は要素が画面の中央にあることが前提となります。calcは単位の違う数値の足し算引き算や、かけ算割り算ができるものです。CSSで使う長さの単位【px・em・%・vw・vh/calc】CSSにはwidth等で大きさ・長さを指定するための単位が複数存在します。それらを計算できる仕組みがあります。これらをマスターしてイメージ通りのデザインを作成しましょう。この記事を読む「margin-left:50%」とは子要素の左端が親要素のど真ん中に来ている状態です。この状態の子要素の左端はブラウザ画面のど真ん中でもあります。あとはブラウザ画面の半分つまり50vw左にずらしてあげれば、画面の左端にくっつくというわけです。50%)で横位置を画面に合わせる以上、横幅(width)を画面いっぱいにする方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。