横幅を固定する方法を解説します。【結論】width:○px幅を固定するにはCSS「width:○px」と指定します。○には数字がはいります。pxはブラウザや親の幅に関わらず一定の固定幅にする単位です。逆に言うと親やブラウザをはみ出ることがあるためレスポンシブ対応のときは注意が必要です。height【要素の幅と高さを指定】CSSのwidth(幅)とheight(高さ)の指定について説明します。あわせて注意点、min-width(最小幅)、max-width(最大幅)についても説明します。この記事を読むこのwidthで固定する方法ですが、要素によって対応が異なる場合があります。ここから要素ごとのwidthの動きを解説します。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読むdivなどブロック要素の場合divなどのブロック要素にはwidthが問題なく効きます。class="example">ブロック要素</div>「ブロック要素って何?」という方はこちら↓htmlのブロック要素とインライン要素とは?htmlタグは大きくブロック要素とインライン要素に分かれます。このブロック要素とインライン要素を理解していないとCSSで装飾するときにつまづきますし、html構築でも間違ってしまいます。この記事を読むinline-blockの場合inline-blockはインライン要素とブロック要素両方の特徴を合わせもった要素です。「display:inline-block」を指定することで実現可能です。inline-blockにはwidthが問題なく効きます。class="example2">inline-block</div>aタグなどインライン要素の場合aタグなどのインライン要素にはwidthが効きません。href="#">インライン要素</a>インライン要素にwidthを効かせるには「display:inline-block」か「display:block」でinline-blockかブロック要素にしましょう。画像を表示するimgタグはインライン要素ですが、widthが問題なく効きます。alt="">heightはauto(初期値)にしておくと画像の縦横比を保った高さになります。tableの場合tableにはwidthが問題なく効きます。</tr></table>【html・CSS】table・tdの幅(width)の仕様と指定方法tableやtdの幅って縮んだり伸びたり、指定した通りの幅にならなかったりとよくわからないですよね?table・tdの幅の仕様と調整方法についてまとめました。この記事を読むtdの場合tdは基本的にwidthが効きます。</tr></table>ただし、IEでかつ特定条件下ではtdの幅が指定したとおりに効かないことがあります。そんなときはtableにauto以外のwidthとtable-layout:fixedを指定しましょう。IEもサポート切れ寸前で利用率が少ないためそこまで気にしなくてもいいかもしれません。下記はwidthが効くdivなどのブロック要素inline-blockimgtabletdは基本的にwidthが効くが例外的に効かないこともあるaタグなどのインライン要素はwidthが効かない→「display:inline-block」でinline-blockにする以上、横幅を固定する方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。