どうも。
WEBおじさんです。
先日、レスポンシブについてのお話を書きました。
ちょっと勉強不足というか、まだ経験が少ない下請けさんが勘違いしたレスポンシブコーディングをしていたお話しですね。
まぁ、これについては実は悪いことではありません。
個人的に、プロフェッショナルとしてレスポンシブの定義に沿った作り方ではない、と私が思っただけです。
でも、サイトデザイン上どうしても部分的にこのような技を使わないといけないケースもあります。
それはもうしょうがないってことですねｗ
ということで、今回はこれに少し関係するお話です。
上でも言っている通り、サイトデザイン上どうしてもPC用のHTMLとスマホ用のHTMLを書いてどちらかをデバイス幅によってdisplayで表示制御しなければいけないケースということも多々あります。
その場合に、気付かないというか少し考えればすぐにわかることなんですが、注意点が一つあります。
それは何かというと、displayの値です。
デバイス幅で表示させたり非表示にさせたり、としたい場合、やり方を検索すると、メディアクエリを使ってdisplay:blockとdisplay:noneを指定のデバイス幅で入れ替える、といった方法になります。
ここで勘の良い方は気付いたでしょう。
これだと値は「block」と「none」なのですが、これがコーディングによってはレイアウトが崩れてしまう原因となるのです。
何を言ってるかわからない方の為に。
displayの値には上の2つ以外に「inline」や「inline-block」などがあります。そしてそれぞれで表示イメージが異なります。
ざっくりいうと、pタグやdivタグなどのデフォルト値は「block」、spanタグやaタグのデフォルト値は「inline」です。
それぞれのタグをdisplayで指定せずに使うと違いがわかると思います。
ピンとこない方は、こちらのページの説明がわかりやすいのでご参考にしてください。
では、なぜこれがレイアウト崩れの原因となるのか？
それは、意図してないところで改行になってしまったり、改行させたいのに改行にならないのでbrタグを追加したり、と余計なことを考えなくてはいけなくなってしまったりします。
これはCSSの本来の仕様を理解していれば考える必要のないこともないし余計なタグを追加する必要もないのです。
メディアクエリでデバイス幅により表示を変更したりする場合はご注意ください。
そして、使うべきCSSの仕様がどういうものなのか、使用するスタイルによっては「なぜか隙間ができる」など、そのスタイルの変な仕様があり、思わぬところで時間を食ってしまうことがあります。
とはいえ、私は「基礎以外の座学は必要ない」と考えている人間なので、わざわざ勉強する必要はありません。
制作を続けていると必ず「仕様」という壁にぶつかることがあります。
その壁にぶつかった時に、時間はかかると思うけど「どうしてそうなるのか」ということについて調べ、自分の経験にしてその後の業務に役立てるようにしましょう。
以上、説教臭くなってしまいましたが、おじさんなので許してくださいねｗ
WEBおじさんでした。
