『作れる人』から『分かる人』への途
cssを勉強し直してサイトをより良く作り直す
浅い知識を深く理解しなおす
レスポンシブ対応にちゃんと向き合う
今日は
表示幅によって設定を切り替える方法として、これを使用してきました。
@media screen and (max-width:1000px)
概ね合っていますが、古いブラウザでメディアクエリをサポートしていない場合は余計なことをしないようにキャンセルさせた方が良いということで、
@media only screen and (max-width:1000px)
とすると良いらしいです。
また、レスポンシブルの方では表示エリアをwidth=100%とすることで、幅違いに対応させます。
もちろん、
< meta name="viewport" content="width=device-width, initial-scale=1" >
これをhtmlの先頭に入れてあるので、幅がデバイスの幅とぴったり合うようになります。
PCの方では動く背景を設定してありますが、スマホではこれが見られないのは残念ですが仕方ない。
細かい作業に入ります
実はhtmlのmainの外側をdivで囲ってあって、左右に境界となる枠を設置しています。なのでこれを100%とし、mainをそれよりちょっと幅を狭くします。98.5%にしたらちょうどよくなりました。
背景画像は左右に縦線で境界が分かるようにしてあるので、画像が横幅いっぱいになるように
background-size:100%としました。
次に画面下のボタンを調整します。これまではpxで数値で指定していましたが、割合に変えます。
レスポンシブルの方ではボタンが７個並んでいるのでそれぞれ14%に設定しました。14*7=98なので、丁度よいでしょう。
左右のマージンをこれまでは-360pxとしていたので、これも割合で変えるように変更します。
半分の値をマイナスで設定していたので、単純に-50%としました。
ボタンはflexで並べてあるので14%でいいのですが、その上のサブメニューが展開するツールバーはulで作ってあるので、このulが幅100%であればその中身は100%を個数で等分されるってことなのでしょうか？
確認のため、ちょっと試してみるのと同時に、ちょっとここでulの再確認をしてみます。
ul（リスト）をいろいろ試してみる
勉強においてアウトプットが重要、これを実感できる最たるものがプログラミングでありコーディングですね。目と耳だけでは分からない、指に教えてやらないと。というわけで、flexで横並びにリストを配置してみます。
- 青龍
- 玄武
- 白虎
- 朱雀
ulに黒背景を、liそれぞれをborderで枠を付けています。こんな感じの配分になるんですね。
ちなみに、青龍の左が黒いのは、おそらくブラウザの標準のパディングによるものと思われます。
paddind:2pxにして試してみると、
- 青龍
- 玄武
- 白虎
- 朱雀
このように、妙な空間は無くなります。分かりやすくするために色を変えました。妙な空間がなくなったのでリストの幅は狭くなっているように見えますが、青龍～朱雀の部分は同じ幅です。
余談ですが、ulをpタグの中に入れるとpが強制的に閉じられてしまいます。
また、リストの文字数が変わるとこのようになります。
- 赤髭ハイレディン
- フランシス・ドレーク
- 東郷平八郎
- ホレーショ・ネルソン
均等に配置されるようですね。
では、横に収まらない場合はどうなるかというと、
- 赤髭バルバロス・ハイレディン
- フランシス・ドレーク＆ゴールデン・ハインド号
- 東郷平八郎＆戦艦三笠
- ホレーショ・ネルソン＆ヴィクトリー号
このように、次の行に逃げられてしまいます。
また、レスポンシブルにすると収まりきらなければ改行されてしまうので、予め幅を指定してみます。
各要素を20%にしてみました。
- 赤髭バルバロス・ハイレディン
- フランシス・ドレーク＆ゴールデン・ハインド号
- 東郷平八郎＆戦艦三笠
- ホレーショ・ネルソン＆ヴィクトリー号
レイアウトは悪くないですが改行位置が気持ち悪いですね。
一般社団法人ピンタニーニャ・プログラミング学習協会
最後まで読んでいただきありがとうございます