CSSにおける’width’と’height’プロパティは、HTML要素の幅と高さを制御するために使用されます。
様々な指定方法があり、その他の大きさに関するプロパティでも同様になってくるので、ここで基本を学ぶことがオススメです❗
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Width & Height</title>
<style>
h1 {
text-align: center;
color: #333;
margin-bottom: 40px;
font-size: 2.5em;
}
h2 {
color: #444;
margin-top: 40px;
}
.demo-section {
padding: 20px;
margin: 20px 0;
border: 1px solid #e9ecef;
}
.example-box {
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
color: white;
text-align: center;
line-height: 1.4;
margin: 10px 0;
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.example-box:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(255, 107, 107, 0.3);
}
/* Width の例 */
.width-px {
width: 200px;
height: 60px;
}
.width-percent {
width: 50%;
height: 60px;
}
.width-auto {
width: auto;
height: 60px;
padding: 0 20px;
}
.width-max {
width: 100%;
height: 60px;
}
/* Height の例 */
.height-px {
width: 200px;
height: 100px;
}
.height-percent {
width: 200px;
height: 20vh;
}
.height-auto {
width: 200px;
height: auto;
padding: 20px 0;
}
/* 組み合わせの例 */
.combo1 {
width: 150px;
height: 150px;
background: linear-gradient(45deg, #4ecdc4, #44a08d);
}
.combo2 {
width: 80%;
height: 80px;
background: linear-gradient(45deg, #f093fb, #f5576c);
}
.combo3 {
width: auto;
height: auto;
padding: 20px;
background: linear-gradient(45deg, #4facfe, #00f2fe);
}
.code-block {
background: #2d3748;
color: #e2e8f0;
padding: 15px;
border-radius: 8px;
font-family: "Courier New", monospace;
margin: 10px 0;
overflow-x: auto;
border-left: 4px solid #667eea;
}
.property-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.property-table th,
.property-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e9ecef;
}
.property-table th {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
font-weight: bold;
}
.property-table tr:hover {
background: #f8f9fa;
}
.tip {
background: linear-gradient(45deg, #56ccf2, #2f80ed);
color: white;
padding: 15px;
border-radius: 8px;
margin: 20px 0;
}
.tip::before {
content: "💡 ";
margin-right: 8px;
}
.responsive-example {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 20px 0;
}
.responsive-box {
background: linear-gradient(45deg, #a8edea, #fed6e3);
color: #333;
padding: 20px;
border-radius: 10px;
text-align: center;
font-weight: bold;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
hr {
margin-top: 2rem;
margin-bottom: 2rem;
}
</style>
</head>
<body>
<div class="container">
<h1>CSS Width & Height</h1>
<h2>📏 Width プロパティ</h2>
<p>
要素の<strong>幅</strong>を指定するプロパティです。さまざまな単位で指定できます。
</p>
<div class="demo-section">
<h3>Width の例</h3>
<div class="code-block">width: 200px;</div>
<div class="example-box width-px">200px 固定幅</div>
<hr />
<div class="code-block">width: 50%;</div>
<div class="example-box width-percent">50% 親要素の半分</div>
<hr />
<div class="code-block">width: auto;</div>
<div class="example-box width-auto">auto 内容に応じて自動調整</div>
<hr />
<div class="code-block">width: 100%;</div>
<div class="example-box width-max">100% 親要素の全幅</div>
<hr />
<div class="code-block">width: 100vw;</div>
<div class="example-box width-max">100vw ビューポートの全幅</div>
</div>
<h2>📐 Height プロパティ</h2>
<p>要素の<strong>高さ</strong>を指定するプロパティです。</p>
<div class="demo-section">
<h3>Height の例</h3>
<div class="code-block">height: 100px;</div>
<div class="example-box height-px">100px 固定高</div>
<hr />
<div class="code-block">height: 20vh;</div>
<div class="example-box height-percent">20vh ビューポートの20%</div>
<hr />
<div class="code-block">height: auto;</div>
<div class="example-box height-auto">auto 内容に応じて自動調整</div>
</div>
<h2>🎨 組み合わせの例</h2>
<div class="demo-section">
<div class="code-block">width: 150px; height: 150px;</div>
<div class="example-box combo1">正方形</div>
<hr />
<div class="code-block">width: 80%; height: 80px;</div>
<div class="example-box combo2">横長の長方形</div>
<hr />
<div class="code-block">width: auto; height: auto; padding: 20px;</div>
<div class="example-box combo3">内容に応じたサイズ</div>
</div>
</div>
</body>
</html>