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

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

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

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

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

前提条件：実行環境について
widthプロパティとは
widthプロパティサンプルの概要
1. HTMLサンプル
2. cssサンプル
実行結果
まとめ：widthプロパティを使ってみよう

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

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

OS	Windows10

widthプロパティとは

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

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

width: 【横幅】;

1	width: 【横幅】;

で指定します。

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

横幅には

10em
10ex
10px
10%

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

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

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

HTML
css

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

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

HTMLサンプル

<!DOCTYPE html>
<html>
    <head>
        <title>widthプロパティサンプル</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="C:\JavascriptSample\css\sample.css" type="text/css">
    </head>
    <body>
        <h3>widthプロパティ確認</h3>
        <div class="sample-width-auto">auto指定</div>
        <div class="sample-width-100px">100px指定</div>
        <div class="sample-width-70per">70%指定</div>
        <div class="sample-no-width">width指定なし</div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>widthプロパティサンプル</title>

</head>

<body>

<h3>widthプロパティ確認</h3>

<div class="sample-width-auto">auto指定</div>

<div class="sample-no-width">width指定なし</div>

</body>

</html>

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

HTMLで外部のcssを読み込むやり方
HTMLで外部のcssを読み込むやり方を解説します

クラスセレクター
【css】class属性でHTML要素を指定するクラスセレクターを解説します

cssサンプル

.sample-width-auto {
    width: auto;
    background-color: #00ffff;
}

.sample-width-100px {
    width: 100px;
    background-color: #ffff00;
}

.sample-width-70per {
    width: 70%;
    background-color: #00ffff;
}

.sample-no-width {
    background-color: #ffff00;
}

.sample-width-auto {

width: auto;

background-color: #00ffff;

}

.sample-width-100px {

width: 100px;

background-color: #ffff00;

}

.sample-width-70per {

width: 70%;

background-color: #00ffff;

}

.sample-no-width {

background-color: #ffff00;

}

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

【css】要素の背景色を指定できるbackground-colorプロパティを解説します

実行結果

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

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

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

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ