ホーム(記事一覧)へ

css widthが効かない原因と解決方法(flex,spanなど)

widthは要素の幅を指定するCSSです。

「widthを指定したのにまったく変わってない!」

「widthを指定しても勝手に幅が変わる!」

そんなcss widthが効かない原因と解決方法についてa,span,table,td,flex,liタグとhtmlタグケース別に解説します。

【imgのwidthが効かないとき】

画像imgのwidthが効かない場合はさまざまな原因が考えられるため別記事にまとめました。

【a,spanのwidthが効かないとき】
インライン要素にwidthは指定できないから

aタグやspanはインライン要素といって文字を扱う要素です。インライン要素にwidthを指定することはできません。(imgを除く)

width効かない
<style>
.example{
    width: 300px;
    border: 1px solid #999;
    padding: 5px;
    background: #f2f2f2;
}
</style>
<a href="#" class="example">width効かない</a>

【解決】display:blockを指定する

ブロック要素ならwidthを指定することができます。display:blockを指定するとaタグやspanでもブロック要素にできwidthを指定できるようになります。

前後に文字を置けるようにしたいなら「display:inline-block」でもOKです。

width効く
<style>
.example2{
    /*コレ*/display: block;
    width: 300px;
    border: 1px solid #999;
    padding: 5px;
    background: #f2f2f2;
}
</style>
<a href="#" class="example2">width効く</a>

【table,tdのwidthが効かないとき】
widthの合計が合っていないから

table内のtdはその内容量とtableの幅により自動で幅が決まります。

tdにwidthを指定することはできるのですが、td(列)の幅の合計値がtableの幅と一致しない場合、tdの幅が自動調整されてしまいます。

下記はtable幅100%に対して左列80%、右列80%を指定した例です。

80% 80%
指定なし 指定なし
<table border="1" width="100%">
    <tr>
        <td width="80%">80%</td>
        <td width="80%">80%</td>
    </tr>
    <tr>
        <td>指定なし</td>
        <td>指定なし</td>
    </tr>
</table>

【解決】再計算かwidthを指定しないtdを用意する

方法1.単純に足し算が間違っていたのなら再計算して直しましょう。

下記は30%と70%で合計100%です。

30% 70%
指定なし 指定なし
<table border="1" width="100%">
    <tr>
        <td width="30%">30%</td>
        <td width="70%">70%</td>
    </tr>
    <tr>
        <td>指定なし</td>
        <td>指定なし</td>
    </tr>
</table>

特にレスポンシブ対応の場合、px指定はせずに%指定をしたり、calcを使った幅の指定をしましょう。

方法2.widthを指定しないtdを1列以上用意しましょう。

widthを指定しない列の幅は「tableの幅-他の指定されたtdの幅」で自動計算されます。

下記は左列をpx指定し、右列を指定しない例です。

右列はtableの幅-左列の幅、つまり100%-200pxの幅になります。

200px(固定) 指定なし(伸縮)
指定なし 指定なし
<table border="1" width="100%">
    <tr>
        <td width="200">200px(固定)</td>
        <td>指定なし(伸縮)</td>
    </tr>
    <tr>
        <td>指定なし</td>
        <td>指定なし</td>
    </tr>
</table>

【flexのwidthが効かないとき】
widthの合計が合っていないから

display:flexは子要素を横並びさせるCSSです。

tableと似ています。

子要素の幅の合計が親の幅より小さい場合は指定したサイズになりますが、子要素の幅の合計が親の幅より大きく、かつ改行を許可していない場合は子要素の幅は自動で計算されます。

下記はブラウザ幅が大きいときはwidthが合っていますが、ブラウザ幅を狭くし100%を超えるとwidthが合わなくなります。

500px
150px
<style>
.example3{
    display: flex;
}
.example3,.example3>div{
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
    background: #f2f2f2;
}
</style>
<div class="example3">
    <div style="width:500px">500px</div>
    <div style="width:150px">150px</div>
</div>

【解決】再計算か改行する

解決方法もtableと似ています。

方法1.単純に足し算が間違っていたのなら再計算して直しましょう。

特にレスポンシブ対応の場合、px指定はせずに%指定をしたり、calcを使った幅の指定をしましょう。

30%
70%
<style>
.example4{
    display: flex;
}
.example4,.example4>div{
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
    background: #f2f2f2;
}
</style>
<div class="example4">
    <div style="width:30%">30%</div>
    <div style="width:70%">70%</div>
</div>

方法2.改行させてでもwidthが優先なら改行させましょう。

display:flexを指定した要素に「flex-wrap: wrap」を指定するとその子要素の幅の合計が親要素の幅を超えた時点で改行されるようになります。

500px
150px
<style>
.example5{
    /*コレ*/flex-wrap: wrap;
    display: flex;
}
.example5,.example5>div{
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
    background: #f2f2f2;
}
</style>
<div class="example5">
    <div style="width:500px">500px</div>
    <div style="width:150px">150px</div>
</div>

【liのwidthが効かないとき】
display:flexになっていないか確認

liは本来ブロック要素であり、widthは普通効きます。

ただし、横並べするためなどでulにdisplay:flexを指定していると上記の【flexのwidthが効かないとき】と同じ現象になります。

解決方法も上記と同じです。

【上記以外】
min-width,max-widthが指定してあり、その範囲を超えているから

min-widthは幅の最小値、max-widthは幅の最大値を指定するCSSです。widthはこれらの範囲内で指定することができます。

widthがmin-widthとmax-widthの範囲を超えているとき、min-widthとmax-widthが優先されwidthが効いていないように見えます。

下記はwidth:500pxを指定していますが、max-width:150pxが指定されており、150pxを超えることができず、widthが150pxとなっています。

500px
<style>
.example6{
    width: 500px;
    min-width: 50px;
    max-width: 150px;
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
    background: #f2f2f2;
}
</style>
<div class="example6">500px</div>

【解決】min-width,max-widthを直すか範囲内に指定する

解決方法は単純にmin-width,max-widthを直すかwidthをこれらの範囲内に指定することです。

レスポンシブ対応をするならmin-width,max-widthはpx指定、widthは%やvw指定などがオススメです。

50%
<style>
.example7{
    width: 50%;
    min-width: 50px;
    max-width: 300px;
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
    background: #f2f2f2;
}
</style>
<div class="example7">50%</div>

【それでも効かないとき】
ケアレスミスがないか確認

上記のいずれにも当てはまらないとき、CSSの単純なケアレスミスなどが考えられます。

pxや%の単位をつけていない、スペルミスがないかなどチェックです。

下記記事を参考にミスがないか確認しましょう。

まとめ

a,spanのwidthが効かないとき

インライン要素にwidthは指定できないから

【解決】再計算かwidthを指定しないtdを用意する

table,tdのwidthが効かないとき

widthの合計が合っていないから

【解決】再計算かwidthを指定しないtdを用意する

flexのwidthが効かないとき

widthの合計が合っていないから

【解決】再計算か改行する

liのwidthが効かないとき

display:flexになっていないか確認

上記以外

min-width,max-widthが指定してあり、その範囲を超えているから

【解決】min-width,max-widthを直すか範囲内に指定する

以上、css widthが効かない原因と解決方法でした。

関連記事