【html/CSS】横幅を固定する方法

「横幅が勝手に広がったり縮んだりしないように固定したい！」

横幅を固定する方法を解説します。

【結論】width:○px

幅を固定するにはCSS「width:○px」と指定します。○には数字がはいります。

pxはブラウザや親の幅に関わらず一定の固定幅にする単位です。

逆に言うと親やブラウザをはみ出ることがあるためレスポンシブ対応のときは注意が必要です。

このwidthで固定する方法ですが、要素によって対応が異なる場合があります。

ここから要素ごとのwidthの動きを解説します。

divなどブロック要素の場合

divなどのブロック要素にはwidthが問題なく効きます。

<style>
.example{
    width: 200px;
    border: 1px solid #333;
    background: #d1ecfd;
    padding: 10px;
    box-sizing: border-box;
}
</style>
<div class="example">ブロック要素</div>

「ブロック要素って何？」という方はこちら↓

inline-blockの場合

inline-blockはインライン要素とブロック要素両方の特徴を合わせもった要素です。

「display:inline-block」を指定することで実現可能です。

inline-blockにはwidthが問題なく効きます。

<style>
.example2{
    display: inline-block;
    width: 200px;
    border: 1px solid #333;
    background: #d1ecfd;
    padding: 10px;
    box-sizing: border-box;
}
</style>
<div class="example2">inline-block</div>

aタグなどインライン要素の場合

aタグなどのインライン要素にはwidthが効きません。

インライン要素

<style>
.example3{
    width: 200px;
    border: 1px solid #333;
    background: #d1ecfd;
    padding: 10px;
    box-sizing: border-box;
}
</style>
<a class="example3" href="#">インライン要素</a>

インライン要素にwidthを効かせるには「display:inline-block」か「display:block」でinline-blockかブロック要素にしましょう。

インライン要素

<style>
.example4{
    /*コレ*/display:inline-block;
    width: 200px;
    border: 1px solid #333;
    background: #d1ecfd;
    padding: 10px;
    box-sizing: border-box;
}
</style>
<a class="example4" href="#">インライン要素</a>

imgの場合

画像を表示するimgタグはインライン要素ですが、widthが問題なく効きます。

<style>
.example5{
    width: 200px;
}
</style>
<img class="example5" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

heightはauto（初期値）にしておくと画像の縦横比を保った高さになります。

tableの場合

tableにはwidthが問題なく効きます。

セル1

セル2

<style>
.example6{
    width: 200px;
    background: #d1ecfd;
}
</style>
<table class="example6" border>
    <tr>
        <td>セル1</td><td>セル2</td>
    </tr>
</table>

tdの場合

tdは基本的にwidthが効きます。

セル1

セル2

<style>
.example7{
    width: 200px;
    background: #d1ecfd;
}
</style>
<table border>
    <tr>
        <td class="example7">セル1</td><td>セル2</td>
    </tr>
</table>

ただし、IEでかつ特定条件下ではtdの幅が指定したとおりに効かないことがあります。

そんなときはtableにauto以外のwidthとtable-layout:fixedを指定しましょう。

ただし、IEもサポート切れ寸前で利用率が少ないためそこまで気にしなくてもいいかもしれません。

【まとめ】横幅を固定する方法

「width:○px」と指定　※○は数字

下記はwidthが効く

• divなどのブロック要素
• inline-block
• img
• table

tdは基本的にwidthが効くが例外的に効かないこともある

aタグなどのインライン要素はwidthが効かない
→「display:inline-block」でinline-blockにする

以上、横幅を固定する方法でした。