widthとmax-widthはどちらを100％にしても同じ…
今回はスタイルシートのお話です。
.sbox1 {
width:1000px;
max-width:100%;
}
と
.sbox2 {
max-width:1000px;
width:100%;
}
は同じ結果になるでしょうか。
それとも違う結果になるでしょうか。
これには既に考察された方がいらっしゃるので、記事を紹介します。
[CSS]要素の幅指定widthとmax-width、どちらに100%と固定幅を指定すべきか
https://coliss.com/articles/build-websites/operation/css/width-and-max-width.html
つまり、「同じ結果になる」が回答となります。
では、以下のサンプルをご覧ください。
サンプルを見る
ブラウザの幅を変えてみると、どう見えるでしょう。
「特に変わった所は無いよ？」
という方も多くいらっしゃるでしょうが、中には
「下はブラウザの幅に合わせて横幅が縮むが、上は固定されている。」
「上は固定デザインで、下側はレスポンシブデザインの例ですね。」
となる方もいらっしゃるかと思います。
では、そのサンプルのソースをご覧ください。
実は最初に提示した２つのCSSに違いがあるのかどうかというお話だったのです。
Google Chrome で見たとき、その「変わった現象」は発生します。
（確認したときのバージョンは 71と72 です。他のバージョンでは判りません）
確認した範囲では Edge , IE11 , Firefox ,ios Safari では発生しません。
実は、table を使わず、div でやった場合はこの現象は発生しません。
サンプルを見る
サンプルを見てピンとくる方もいらっしゃるかもしれませんが、これは問い合わせフォームなどでよく使われる「表」です。
この現象を発見したのも、問い合わせフォームを作って見栄えをチェックしていたときでした。
今回は@mediaによるブレークポイントを使わない指定方法で起きた現象でしたが、スタイルの指定方法は多種多様なので、どんな所でどんな現象が出るかは判りません。
動作チェックは念入りに行うようにしましょう。
「（事実上）IEがなくなったから、モダンブラウザは皆同じで、ＭＳと違ってヘンな動きはしないから、もうチェックなんてしなくて良い」
などど思ったら、大間違いというお話でした。
おまけ１ google検索
「同じはずが違う結果になる」はgoogle検索でも発生します。
複数のキーワードで検索する事もよくあると思いますが、キーワードの順番を変えると、結果も変わります。
例として「札幌 ホームページ作成」と「ホームページ作成 札幌」を検索してみると結果が異なるようです。
なぜそんなことになるのか。
ネットでは語順の違いから意味づけを推測しているのではないかという意見も見かけます。
おまけ２ ゲーム
似たような話に「同じだと思ったら全く違う」というものがあります。
Ａ．○○を題材にしたゲームを作ろうと準備を進めていたら、＊＊という技術を使うと効果的だと判った
Ｂ．＊＊という技術が話題なので、コレを使ったら○○を題材にしたゲームが作れると考えた
どちらも出来上がるのは一見すると「○○を題材にして＊＊という技術を使った」ゲームですが、そのデキは著しく違うことになります。
前者（Ａ）は傑作になる可能性がありますが、後者（Ｂ）は１００％駄作です。
この場合、順番の違いは重視している要素の違いや、準備にかけた時間の違いとなって現れます。
Ａはゲームデザイナー主導で内容を重視し、長期間にわたって準備をした内容に対し、Ｂは営業やプロデューサー、またはプログラマー主導で話題性や技術的挑戦を重視し、内容は思い付きレベルなわけです。
内容を軽視したゲームは、当然残念な内容の面白くないゲームになります。