レスポンシブ画像のまとめ
ビューポートや解像度など、デバイスに応じて最適な画像を表示させるレスポンシブ画像。WordPressなど自動でやってくれるものもあるので、しばらく自分で触ってなかったら記憶が曖昧になってしまったので、まとめておきます。 […]
HTML
option名が長すぎて表示できない問題にはoptgroup
selectタグ内で選択肢を定義するoptionタグですが、長過ぎるオプション名はiPhoneだと、はみ出た部分の表示が・・・で省略されてしまい途切れてしまう問題があります。 そんなときはoptgroupタグを使ってやる […]
schemaに関する備忘録
随時追加 itemtype=”〜WebPage”をより具体的に指定する場合。 以下の値を使用できる。 ItemPage ContactPage FAQPage QAPage SearchResul […]
abbrタグとrubyタグ
自分の無知を晒す話ですが、今の今まで< abbr >タグの意味を二重に取り違えていたので、反省の意味を込めて正しい意味と使い方をまとめておきます。利用頻度としては少ないとは言え、これは本当に恥ずかしい。 略語 […]
Google Font利用時の表示速度が遅い対策
使いやすくて便利なWebフォントの代表格「GoogleFont」ですが、フォントはどうしたって結構なデータサイズなので、PageSpeedInsightsなどで表示速度をテストしてみると、「レンダリング（ブラウザがページ […]
住所からシンプルなGoogleMapを生成する
入力された住所からGoogleMapを表示させようと思い、どうすれば一番楽かなと調べてみるとapiを使った方法ばかり出てきたのですが、今回は単純に地図を表示させたいだけなのでもっとシンプルでいいんだよと作りましたので備忘 […]
【備忘録】パンくずリストはolでつくる
最近コーディングするにあたり、WAI-ARIAを極力使うように個人的に気をつけています。先日更新した[seoplus_inline/]でも、アクセシビリティを意識しながら作りました。 WAI-ARIAを使うにあたり個々の […]
SVGアイコンのアクセシビリティ
最近以前作ったサイトの見直しをしていて、svgアイコンのアクセシビリティはこれで大丈夫なのか？と気になりました。 アクセシビリティとは何？という方に簡単に説明すると、視覚的ハンデ（盲目や弱視）等のためスクリーンリーダーな […]
SVGで基本の図形描写 – 1
拡大/縮小しても描写が崩れないSVG。アイコンや背景素材としてもすっかりポピュラーになりました。 今回はpathなどを使う複雑なものではなく、丸や長方形のような基本的な図形をsvgで描写しようという記事です。cssとはあ […]
疑似要素のFont Awesomeが表示されない原因
つい先程「PayPayのネットショッピング対応まとめ」を書いたときに引っかかったので同じ問題につまずいた人の為に残しておきます。 疑似要素に指定したfont awesomeが表示されない 普段は自分が必要な分だけ用意した […]
FontAwesomeの必要なアイコンだけを使いたい
FontAwesomeは汎用性の高いアイコンが豊富で非常に使い勝手も良いのですが、そのままダウンロードして使うとやりとりするデータ量が大きくなるのが難点です。 そもそもよく使うアイコンなんて大体数種類に決まっているわけで […]
h1タグの扱いについて
当ブログの検索キーワードにしばしば「ｈ1タグ」が入っています。おそらく、ネットショップを運営していたり、ブログサイトを運営していたりする人でしょう。ｈ1タグの扱いころころ変わりますもんね。お気持ち分かります。   […]