HTML

HTML

モーダルをdialog要素で実装してみる

主要ブラウザがdialog要素が対応してそろそろ1年経つので、そろそろ良いだろうと実際の制作で使用してみました。 dialog要素を使用することによって得られる...
2023.03.17
HTML
HTML

レスポンシブ画像のまとめ

ブラウザサイズや解像度（retinaディスプレイ / デバイスピクセル比）に応じて画像ファイルを振り分けるレスポンシブイメージ。srcset sizes などのタグを使ったレスポンシブ画像の記述方法についてまとめます。
2022.04.23
HTML
HTML

option名が長すぎて表示できない問題にはoptgroup

optionの名前が長すぎると、画面幅からはみ出た部分が表示されない問題が起こりますが、optgroupタグで入れ子にすると自動的に改行、または文字サイズが縮小され途中で省略されずに表示できるようになります。
2022.04.23
HTML
スポンサーリンク
HTML

schemaに関する備忘録

随時追加 itemtype="〜WebPage"をより具体的に指定する場合。 以下の値を使用できる。 ItemPageContactPageFAQPageQAP...
2022.04.23
HTML
HTML

abbrタグとrubyタグ

自分の無知を晒す話ですが、今の今まで< abbr >タグの意味を二重に取り違えていたので、反省の意味を込めて正しい意味と使い方をまとめておきます。利用頻度として...
2022.04.19
HTML
HTML

Google Font利用時の表示速度が遅い対策

使いやすくて便利なWebフォントの代表格「GoogleFont」ですが、フォントはどうしたって結構なデータサイズなので、PageSpeedInsightsなどで...
2022.04.23
HTML
HTML

住所からシンプルなGoogleMapを生成する

入力された住所からGoogleMapを表示させようと思い、どうすれば一番楽かなと調べてみるとapiを使った方法ばかり出てきたのですが、今回は単純に地図を表示させ...
2022.01.06
HTML
HTML

【備忘録】パンくずリストはolでつくる

最近コーディングするにあたり、WAI-ARIAを極力使うように個人的に気をつけています。先日更新したでも、アクセシビリティを意識しながら作りました。 WAI-A...
2022.01.06
HTML
HTML

SVGアイコンのアクセシビリティ

最近以前作ったサイトの見直しをしていて、svgアイコンのアクセシビリティはこれで大丈夫なのか？と気になりました。 アクセシビリティとは何？という方に簡単に説明す...
2023.08.30
HTML
HTML

SVGで基本の図形描写 – 1　

拡大/縮小しても描写が崩れないSVG。アイコンや背景素材としてもすっかりポピュラーになりました。 今回はpathなどを使う複雑なものではなく、丸や長方形のような...
2022.04.23
HTML
HTML

疑似要素のFont Awesomeが表示されない原因

つい先程「PayPayのネットショッピング対応まとめ」を書いたときに引っかかったので同じ問題につまずいた人の為に残しておきます。 疑似要素に指定したfont a...
2022.04.24
HTML
HTML

FontAwesomeの必要なアイコンだけを使いたい

FontAwesomeは汎用性の高いアイコンが豊富で非常に使い勝手も良いのですが、そのままダウンロードして使うとやりとりするデータ量が大きくなるのが難点です。 ...
2022.04.24
HTML
次のページ