【css】要素の横幅を指定できるwidthプロパティを解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在5社経験している、12年目エンジニアです。

この記事では、 cssで要素の横幅を指定できるwidthプロパティについて

  • widthプロパティとは
  • widthプロパティを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10

widthプロパティとは

widthプロパティとは、HTML要素の横幅を指定できるプロパティです。

widthプロパティで指定すると
cssのwidthプロパティを解説
というようにHTML要素の横幅を指定することができます。
(分かりやすくするために要素の背景色を指定しています)

で指定します。

widthプロパティは、デフォルトで「auto」が設定されています。
これはブラウザの状況に応じて、自動で計算され設定されます。

横幅には

  • 10em
  • 10ex
  • 10px
  • 10%

という数字を指定することができます。
では、次の章で実際に使い動作を確認します。

widthプロパティサンプルの概要

widthプロパティサンプルでは、

  • HTML
  • css

の2ファイルを使います。

4個div要素を用意します。
3個のdiv要素のみwidthプロパティでそれぞれ異なる値をつけるよう指定して、指定しなかったdiv要素との表示の確認をします。
フォルダ構成は以下のようになっています。
cssのwidthプロパティを解説

HTMLサンプル

HTMLで外部のcssを読み込むやり方と、cssでclass属性でHTML要素を指定するクラスセレクターについてはこちらの記事をご参考ください。

cssサンプル

background-colorプロパティとは、HTML要素の背景色を指定できるプロパティです。
詳しくはこちらの記事をご参考ください。

実行結果

作成したHTMLをブラウザで開きます。
cssのwidthプロパティを解説
HTML要素内の横幅を指定できていることが確認できました。

まとめ:widthプロパティを使ってみよう

以上がcssのwidthプロパティについての解説でした!

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました