【コードコピペ可】cssで要素の横幅を100%表示する方法を紹介します！

webサイトのコーディングをしていると、要素の横幅をブラウザに対して100%表示したい場合がありますよね。

しかしサイト全体に両端の余白を設定しているため、なかなか100%表示できないということはありませんか？

サイト全体に両端の余白設定をしている状態でも一部の要素を横に100%表示することができます。

具体的なコードをみなさんに紹介します！

必要なcssコード

必要なコードは下記の通りです。

width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);

上記の4つのコードを入れることで、指定した要素がブラウザに対して横100%表示になります。

例えば下記のコードのように、全ての要素の横幅を80%表示にしたとします。

その上でラインを引くと、cssの設定が働き横幅80%のラインが作成されます。（黒色のライン）

しかし上記の4行のコードをcssに入力することで、横幅の設定がされていても常に100%表示になります。（赤いライン）

See the Pen jOVXjmo by takato (@ttakkatto) on CodePen.

このように上記のコーディングを行うことで、要所要所で横幅100%表示にすることができるのです。

最後に

以上がcssで横幅を100%表示する方法の紹介でした。

弊社のブログではコーディングやデザインに関する記事を投稿しております。

よろしければ下記の記事も合わせて読んでみてください！