些細な日常
サイトの画像をデバイス毎に振り分けてレスポンシブに表示するにはimgタグにsrcset属性でそれぞれの画像URLを設定するのが簡単だ。 目次 imgタグのsrcset属性のマークアップ 画像を画面幅で切り替える場合 画像を解像度で切り替える場合 srcset属性の画像のレスポンシブ配信の内容 画像は画面幅と解像度を加味して表示される 画面幅で画像を確実に振り分ける方法 srcset属性の幅記述子の省略は画像選択に影響し得る sizes属性のレスポンシブ配信の役割 imgタグのsrcset属性のマークアップ Person sitting on top of gray rock overlooking mountain during daytime by Denys Nevozhai / Unsplash imgタグはそのままで、srcset属性を特定の仕方で値を付けて追加する。 画像を画面幅で切り替える場合 <…
些細な日常のウェブバージョンで考え通りのデザインがついに掴めた。というのは 画像を元のサイズでカラム一杯まで合わせる ことができるようになったためなんだ。 やればできるというか、BloggerはデフォルトのCSSで勝手にデザインが付けられるからそれを踏まえながら変更しないと駄目だったし、一般的な方法だけではサイト作成も追い付かなかったと思う。 さらに文字サイズも調節してブログ全体がスマートになったと驚いた、咄嗟に。ウェブバージョンは画面一杯ではないし、しかも二列だからほっそり受け留められるせいではないか。纏まりが加わってスマートブログという印象を与え出した。 気に入ったので、どうすれば実際に可能だったのか、纏まりによってブログをスマートに生み出し得る具体策を明らかにしておきたいと思う。 見出しがちゃんと目立つ コンテンツが整理されている 端々の位置が揃っている 最初に本文の文字サイズを大きめに変えていだけ…
デバイスでサイトのレイアウトを保持するにはmetaタグでviewportを設定すれば良い。 サイトのレスポンシブ対応のソースコード <meta name="viewport" content="width=device-width, initial-scale=1.0"> HTML編集のhead内に追加すると画面幅に合わせてサイトが表示されるので、デバイスが変わってもデザインが崩れることはなくなるんだ。 レスポンシブ対応といわれ、ソースコードを、一行、追加するだけで、とても容易い。 metaタグのviewportとレスポンシブデザイン viewportとは viewportは、HTMLの <head> タグ内に記述するメタタグで、ウェブページを表示する領域を指定するものです。特に、スマートフォンやタブレットなどの様々なデバイスで、ページがどの…
