HTML

HTML5 CSS

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

ビューポートや解像度など、デバイスに応じて最適な画像を表示させるレスポンシブ画像。WordPressなど自動でやってくれるものもあるので、しばらく自分で触ってなかったら記憶が曖昧になってしまったので、まとめておきます。 […]

HTML5 CSS

abbrタグとrubyタグ

自分の無知を晒す話ですが、今の今まで< abbr >タグの意味を二重に取り違えていたので、反省の意味を込めて正しい意味と使い方をまとめておきます。利用頻度としては少ないとは言え、これは本当に恥ずかしい。 略語 […]

preloadによる表示速度改善

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

使いやすくて便利なWebフォントの代表格「GoogleFont」ですが、フォントはどうしたって結構なデータサイズなので、PageSpeedInsightsなどで表示速度をテストしてみると、「レンダリング(ブラウザがページ […]

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

入力された住所からGoogleMapを表示させようと思い、どうすれば一番楽かなと調べてみるとapiを使った方法ばかり出てきたのですが、今回は単純に地図を表示させたいだけなのでもっとシンプルでいいんだよと作りましたので備忘 […]

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

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

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

最近以前作ったサイトの見直しをしていて、svgアイコンのアクセシビリティはこれで大丈夫なのか?と気になりました。 アクセシビリティとは何?という方に簡単に説明すると、視覚的ハンデ(盲目や弱視)等のためスクリーンリーダーな […]

SVG サンプル

SVGで基本の図形描写 – 1 

拡大/縮小しても描写が崩れないSVG。アイコンや背景素材としてもすっかりポピュラーになりました。 今回はpathなどを使う複雑なものではなく、丸や長方形のような基本的な図形をsvgで描写しようという記事です。cssとはあ […]

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

つい先程「PayPayのネットショッピング対応まとめ」を書いたときに引っかかったので同じ問題につまずいた人の為に残しておきます。 疑似要素に指定したfont awesomeが表示されない 普段は自分が必要な分だけ用意した […]

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

FontAwesomeは汎用性の高いアイコンが豊富で非常に使い勝手も良いのですが、そのままダウンロードして使うとやりとりするデータ量が大きくなるのが難点です。 そもそもよく使うアイコンなんて大体数種類に決まっているわけで […]

heading 見出し

h1タグの扱いについて

当ブログの検索キーワードにしばしば「h1タグ」が入っています。おそらく、ネットショップを運営していたり、ブログサイトを運営していたりする人でしょう。h1タグの扱いころころ変わりますもんね。お気持ち分かります。 &nbsp […]