【CSS】width - 横幅

CSSのwidthプロパティについて解説します。

検証環境

CSS

macOS

14.1

width

widthは“横幅”のプロパティです。

標準ではコンテンツボックスの横幅になります。

※ box-sizingプロパティを設定した場合、横幅の対象はその値に従います。

基本構文

width: 値;

サンプル

ピクセル

sample.html

<style>
img {
    ___ih_hl_start
    width: 200px;
    ___ih_hl_end
}
</style>
 
<img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/width/hacker-commandline.jpeg">

プレビュー

パーセント

sample.html

<style>
img {
    ___ih_hl_start
    width: 100%;
    ___ih_hl_end
}
</style>
 
<img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/width/hacker-commandline.jpeg">

プレビュー