CSS:max-widthとfloatをセットで使う時の注意点

はい。
今回は、max-widthを指定する際の注意点について。

ここ最近、ブログ記事を書いていない時は、新しいテーマの作成を行っています。現在のテーマは、PC用とスマホ用の2種類を作成しており、デバイス判定を行い出し分けています。

ただ、PHPを使って処理させるより、CSSで切り替えた方が処理が早いだろうという事で、以前話していたように次回のテーマはmedia screenを使って構造を一本化。デバイスでは無く、画面サイズによって出し分けるように進めています。

media screenを使うのは今回作っているテーマが初めてなので、色々と戸惑う部分はありましたが、現在は随分慣れてきました。

ただ、一点だけ詰まった部分が…。

max-widthとfloatをセットで使う

久しぶりにガッツリとハマってしまい、思い通りに機能させるまで半日以上費やしてしまった部分が「max-widthとfloat」をセットで使った際の挙動です。

最終的に、基本は2カラムで作り始めた新しいテーマですが、コーディング作業も順調に進み、記事周りはコメント欄をデザインすれば終わりといった状況になった頃、何気なく見ていると、確保してあったハズのスペースが潰れていたり、floatの隙間に要素が入り込んだりと挙動がおかしい。

最初は「display: block;」辺りを疑ったんですが、結果は変わらず。

色々と確認してもおかしな部分は無かったので、仕方無しに要素内の記述を消して、フレームだけを残したプレーンな状態で確認する事に。すると、固定幅では問題無かった要素が、max-widthを指定してfloatさせた時だけおかしな事になる。

現在のブログデザイン

2015/03月現在のブログデザインは、max-widthを使っているものの基本的には固定幅。コンテンツとサイドバーを包む要素だけにmax-widthを指定し、コンテンツとサイドバーの隙間だけを可変させるイメージで作ってあります。

こんな感じ

HTML

<div id="main-contents">
  <div id="content"> コンテンツ </div>
  <div id="sidebar"> サイドバー </div>
</div><!--メインコンテンツ終わり-->

CSS

#main-contents {
    min-width: 940px; /* 最小幅 */
    max-width: 1050px; /* 最大幅 */
    width: expression(document.body.clientWidth < 941? "940px " : document.body.clientWidth > 1051? "1050px" : "auto"); /* IE対策 */ 
    margin-right: auto;
    margin-left: auto;
}

#content {
    float: left;
    max-width: 620px; /* 最大幅 */
}

#sidebar {
    float: right;
    width: 300px;
}

こんな感じで、メインコンテンツ(外枠)に対して、コンテンツ部分とサイドバーをフロートさせて作ってあります。「min-width」も指定しているので、カラム落ちする事無く、コンテンツ部分とサイドバーの間も、一番狭い状態で20pxの隙間が出来ています。

次回のテーマイメージ

現在作っているテーマは、メインコンテンツ(外枠)に対して、コンテンツ部分も可変とし、画面サイズが小さくなれば、サイドバーのフロートを解除してコンテンツ下に降ろしてあげる。といったシンプルな物なんですが…。

こんな感じ

変更CSS部分

#content {
    float: left;
    max-width: 620px; /* 最大幅 */
}

これで作業を進めていると、コンテンツ内の余白が縮んでしまったり、他の要素が隙間に入り込んだりと、おかしな挙動になる事が発覚。

解決策は『width: 100%;』

max-widthとfloatについて調べた結果、解決策は凄く簡単で、float要素にwidth: 100%;を追記しておくというもの。

最終CSS

#content {
    float: left;
    max-width: 620px; /* 最大幅 */
　　width: 100%; /* コレが答え */
}

これだけで、問題解決。要は、定数を持たないmax-widthに対して、幅一杯に表示させるwidth: 100%;を指定しておけば良いとの事。

max-widthとfloat・まとめ

今まではmax-width指定部分にfloatの絡みが無かったので気になりませんでしたが、今回ガッツリとハマってみてると…。解決策が単純過ぎて、気がつかなかった自分に怒りを覚えました(汗

半日近く確認しながら悩んで、floatが原因だと分かってからは早かった…。

何を弄っても意図しない結果になっていたので、途中からはデザイン自体を変えて無理やり解決してやろうかとも思いましたが、こんな簡単な部分で詰まってたとは…。まぁ、最終的には思い通りのレイアウトで作業が進んでいるので良しとします。

とりあえず、次回の新テーマに関しては、記事ページ部分がほぼ出来上がったので、あとはトップページや記事一覧を作成すれば完成予定です。いつ公開出来るかは分かりませんが、今後も時間がある時に作業を進めたいと思います。

最後まで読んで頂き、ありがとうございます！！

今回の投稿と同じ「WordPress」にある前後の記事は、下記のようになっております。お時間がある時にでもチェックして頂けると嬉しいです！！

また、11月1日現在「 ガジェット 」には「 174 件」の投稿があります。カテゴリー内での人気記事や、ブログの最新記事リストも記載しておきますので、宜しければ合わせてご覧くださいませ。

• 
  【実録】Windows11アップグレードが99%で停止！ライセンス条項エラーの原因と直し方！！
• 
  ありがとう！オーシャントリッパーズ！！全てを「まころぐ」が受け継ぎます【ブログ統合】
• 
  新シリーズ『 #今日のつぶやきから』開始！Xの内容を少しだけ深堀り！！
• 
  ネットで購入した馬券の画像を表示＆保存する方法
• 
  ノートパソコンのWiFi（ワイヤレス）カードを交換する手順
• 
  古いパソコンを無線LANアダプターでWi-Fi 6に対応させる方法
• 
  リモコンを押すとテレビの電源が落ちる原因はAmazon Fire TVだった！
• 174件の投稿

  ガジェット今回の投稿と同じカテゴリー「ガジェット」の記事一覧を見る記事一覧を見る

• 
  WPtouch
• 
  スマホサイトでは背景動画の自動再生が出来ない？！
• 
  WordPressでコメント通知などのメールが届かない時の確認項目
• 
  ロリポップが遅い時代は終了！モジュール版PHPでWPが爆速化！！
• 
  WordPress・勝手に挿入される＜/P＞をピンポイントで撤去
• 
  ロリポップやチカッパでWordPressの高速化にチャレンジ！！
• 
  重いプラグインを見直してWordPressを高速化するまとめ
• 47件の投稿

  WordPress今回の投稿と同じジャンル「WordPress」の記事一覧を見る記事一覧を見る

• 
  【実録】Windows11アップグレードが99%で停止！ライセンス条項エラーの原因と直し方！！
• 
  【京セラAJP-2030レビュー】コンパクト＆柔らかホースで高圧洗浄機選びの悩みを解決！
• 
  小学生がスナップエンドウを種から育てて収穫する観察日記
• 
  ありがとう！オーシャントリッパーズ！！全てを「まころぐ」が受け継ぎます【ブログ統合】
• 
  【写真で徹底比較】デカパトス有料席ガイド！新設『センターテラス席』の広さ・日陰・当日の様子
• 
  【2025年版】ラグナシアプールを小・中学生が遊び倒す！新くじらプール＆変なホテルで満喫する1泊2日徹底レポ
• 
  【口コミ】潮芦屋温泉『水春』体験レビュー｜アメニティ充実の高級スパにリピート必至！！
• 1880件の投稿

  新着一覧11月1日現在、当ブログにある1880件の記事一覧を見る記事一覧を見る