些細な日常
サイトの画像をデバイス毎に振り分けてレスポンシブに表示するには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属性を特定の仕方で値を付けて追加す…
サイトで他のページを表示するiframeタグはYouTubeの埋め込み動画などで良く使われるけれども画像のimgタグと異なり、コンテンツの縦横比をレスポンシブで維持することができない。なのでデバイスの画面幅に一杯で表示するようにすると訪問者の異なるデバイスの画面幅によってコンテンツの縦横比が変わってしまうのが厄介だった。 以前からCSSのaspect-ratio要素がiframeの縦横比を一発で指定する方法として出ていて理想的だったけれども対応するブラウザが少なかった。しかし最近になって漸く主要なブラウザの多くが対応するようになった（ Can I Use ）からついに自分のブログでも取り入れることに決めた。 aspect-ratioのマークアップ 10 modern layouts in 1 line of CSS｜Google Chrome Develop…
ブログにSearch Consoleのモバイルユーザビリティの赤い文字のエラーで、モバイルユーザビリティの問題として「コンテンツの幅が画面の幅を越えています」というのが出た。 モバイルユーザビリティ｜ Search Console ｜ Google 問題のページは一つだけで、確認してみるとスマホで画像などのコンテンツの一部が画面の端から抜けてしまっていて正しく、エラーの文言の通りの状況だった。 このエラーは、ページの CSS 宣言で絶対値を使用している場合や、ページの画像が特定のブラウザ幅（980px など）で最適に表示されるように設計されている場合に発生します。このエラーを修正するには、ページの CSS 要素に対して相対的な幅と位置の値を使用し、画像も同様にスケーリングできるようにします。 モバイル ユーザビリティ レポート｜ Search Console ヘル…
アドセンスの自動広告は一つの広告コードで幾つもサイト広告を表示できて便利だし、基本的にコンテンツの隙間に上手く挿入されてサイトのレイアウトが崩れることはないと思っていたらやられた。 ある日、突然、ブログの記事が右端から抜けてしまって行毎の折り返しを解除したような状態になっていた。画像や文章の一部、そして自動広告も右に少しずれて何なのかと調べてみて自動広告を外したら直ったので、原因はこれしかないと分かった。 Googleでアドセンスの自動広告の出し方が変更されれば今までにないことが起きる可能性は十分にあるし、または自分のサイトのテンプレートの変更も影響しないとはかぎらないから注意しなくてはならない。 アドセンスの自動広告がどういうふうに表示されるかは良く分からないし、たとえ分かっても広告コードを非公式に変更するとペナルティーを食らう恐れが全くないわけではな…
サイトのコンテンツをサイト全体とは別に子要素として上下左右に移動して表示できるスクロールボックスをデザインのCSSを使ってパソコンやタブレットやスマホなどの様々なデバイスの画面幅に合わせられるレスポンシブな作り方を纏めた。 目次 スクロールボックスに必要なCSS 縦スクロールボックスの作り方 縦スクロールボックスのサンプル サンプルのソースコード 横スクロールボックスの作り方 min()を使った横幅一杯の指定 縦スクロールボックスのサンプル サンプルのソースコード スクロールボックスに必要なCSS 紫陽花の大きな写真が縦横のスクロールで表示される。 画像や文章などのコンテンツを入れるボックスの大きさとスクロールの指定がなくてはならない。 その他に横スクロールで文章のコンテンツは行毎の折り返しを解除するための指定も必要になる。 縦と横のスクロールボックスの作り方は基本的に同じだ…
サイトにヘッダーへの戻るボタンなどをスクロールしても変わらない位置にCSSのposition:fixedで普通に貼り付けると大画面でサイトの幅を越えてしまうので、コンテンツからはみ出さず、サイトの表示領域の範囲内に収める方法を考える。 calc()によるposition:fixedの位置の算出 CSSのposition:fixedはtopかbottomで縦、leftかrightで横の少なくとも二つの値で位置を決める。ただし値の基準がサイトではなくて画面になっているからサイズがサイトよりも大きな画面だとコンテンツの表示領域からはみ出してしまう。 position:fixedの振る舞いについて 要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。ビューポートによって定められた初期の包含ブロックに対して相対配置されますが、…
YouTube 動画の埋め込みコードにはHTMLのiframeタグが使われていてデバイスの画面毎にレスポンシブ対応でデザインを揃えるのが難しい。特にモバイルのスマホやタブレットで画面の横幅一杯に表示する場合に埋め込み動画の縦幅を一定の割合で維持できず、画像比が崩れる。写真などに使われるimgタグのようにコンテンツの画像比がiframeタグでは固定されないんだ。 デザインのCSS のコーディングで解決できて僕としては CSS関数のcalc()を使って iframeタグの画像比を計算して表示するのがスムーズだとブログの些細な日常でも取り入れている。 追記：CSSで iframeの縦横比を一発でレスポンシブに指定できるaspect-ratio が多くのブラウザで対応して来てたので、calc()のコーディングに置き換えて新しく使うようになった。 Bloggerブログでどうや…
HTMLの iframe タグのコンテンツは画像比がデバイスの画面幅に レスポンシブ で統一できない。およそスマホで画面の横幅一杯に表示したりすると縦幅が変わらないためにコンテンツの画像比が変わってしまうのが厄介なんだ。YouTubeやドライブなど、Webサービスの埋め込みコードにはiframeタグが良く使われるけれども画面の横幅一杯に広がらないように注意して記載しないとレスポンシブで画像比が崩れる。 以前、何とかならないかと悩んで YouTube動画をレスポンシブで正確に表示する方法 を見付けた。CSSのpaddingやpositionを使ってiframeタグのコンテンツの画像比を整えることができると分かって助かった。親ボックスに内側の余白を特定の高さとして確保しながら子の埋め込みを重ね合わせるように移動させると上手く行く。 しかし近年はもう一つの方法が可能で、…
Bloggerの公式テーマのテンプレートで記事の抜粋のスニペットがインデックスページやサイドバーに置かれる場合に画像なしの投稿については文章だけしか載らない。専用のサムネイル画像を予め用意しておいて画像ありの投稿と変わらずに表示するようにスニペットのデザインを変えるカスタマイズの方法を考えてみたい。 新テーマのContempoとSohoとEmporioは注目とブログと人気の投稿の三つのウィジェット、Notableは注目かブログと人気の投稿の二つのウィジェットのスニペットでサムネイル画像が別々の仕方で表示される。そしてテーマ毎にデザインも違うので、それぞれにカスタマイズためのソースコードを取り上げる。 旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行は注目とブログの投稿と人気の投稿の三つのウィ…
HTMLのsvgタグを使うとサイトに描画できる。色も塗れるし、線や丸や四角や三角や弧を繋げて簡単なアイコンから非常に複雑な絵まで作成できる。マークアップは座標系の数値を入力して行われる。 SVGはScalable Vect Graphics（スケーラブルベクターグラフィックス）の略語で、画像データを格納するファイル形式の一つなんだ。たとえ拡大縮小しても他の 一般的なjpgやpngやgifの画像 のように画質が変わらない特徴を持っている。サイトではアイコンに使われる場合が多い。画像のサイズが小さくても劣化しないし、輪郭も崩れないから見映えに相当に優れる。 サイトにSVGファイルの画像を表示するにはimgタグで <img src="画像URL"> とマークアップするけど、しかしもう一つの方法としてsvgタグでも可能なんだ。 画像データ…
サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えて レスポンシブ でデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法は グリッドデザイン ：displayのgridで、画像と文字のスペースを合わせて表示できるから正確だ。 目次 グリッドデザインで画像に文字を重ねるソースコード 画像の中央に文字を重ねる 画像の右上に文字を重ねる 画像の左上寄りに文字を重ねる 文字の位置取りを余白で調節する 区分けしたレイアウトで画像に重なる文字を整序させる 画像の中央の下のスペースの中央に文字を重ねる 文字を整序して位置取りを余白で調節する 文字の幅を確保しながら画像に重ねる グリッドデザインで画像に文字を重ねるソースコード 画像に文字を配置するスペースの割合を計算する 計算されたスペースの中に文字を実…