![見出しにまつわるエトセトラ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4168888b517684700098bbffcfe18541f8c502ef/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--rrc-7n7R--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E8%2525A6%25258B%2525E5%252587%2525BA%2525E3%252581%252597%2525E3%252581%2525AB%2525E3%252581%2525BE%2525E3%252581%2525A4%2525E3%252582%25258F%2525E3%252582%25258B%2525E3%252582%2525A8%2525E3%252583%252588%2525E3%252582%2525BB%2525E3%252583%252588%2525E3%252583%2525A9%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Aheesaid%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzdmNmEyMTBiNmMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AYAMAP%252520%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2IyZDg3MmFlN2YuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
これ何なの? もともと私が社内メンバー向けに書いていたドキュメントで、 UIパーツ毎のアクセシビリティを考慮したHTMLコーディングTips集です。 社内のドキュメント置き場に眠っていたものですが、知見として社外にも共有出来る内容だなと思ったのと、アクセシビリティをこれからやっていこう!という方の参考になればと思い共有させて頂きます。 ※そもそもアクセシビリティって何なの?という方は、ウェブアクセシビリティ基盤委員会のサイトを見てみてください🔍 目次 おすすめVSCode拡張機能 🕹ボタン 📷 画像 🔍 ナビゲーション 💻 フォーム おすすめVSCode拡張機能 axe Accessibility Linter をインストールしておくとimgタグのalt忘れなど警告が表示されるので、アクセシブルでない書き方を未然に防げるので便利です! 🕹ボタン buttun タグを使いましょう
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース(住所フォーム)は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能(郵便番号による住所補完)は、住所フォームの改善方法として最も効
Disclosure: Our content is reader-supported, which means we earn commissions from links on Digital. Commissions do not affect our editorial evaluations or opinions. Hypertext markup language (HTML), has come a long way since Tim Berners-Lee invented it in 1991. The rise of e-commerce websites in the previous years resulted in the continuous innovation of the programming language. HTML5 is the late
ウェブブラウザはネットワークから様々なリソースを集め、それらを処理して組み合わせてウェブページをレンダリングします。リソースが揃わないとレンダリングできないので、この一連の処理のどこかが遅れるとページの表示も遅くなります。レンダリングをすみやかに開始できるようにウェブブラウザはリソースの取得やその処理を最適化するための API を提供しています。本記事ではそれらを網羅的に紹介し、ウェブアプリの性能改善を図る上でどのようなブラウザ機能が使えるのかを知ってもらうことを目的としています。各機能の具体的な適用事例については他の記事に委ねます。 本記事の内容は記事公開時点での情報に基づいており、閲覧時点では既に古くなっている可能性があります。最新の正確な情報は一次情報源を参照してください。また特定のブラウザ実装について言及する場合は、断りがない限り Chrome を想定しています。誤りや補足、質問な
Write modern websites using only HTML. This site is made from vanilla HTML and the default new.css theme. View Source new.css is a classless CSS framework to write modern websites using only HTML. It's ~4.5kb. It's perfect for- A dead-simple blog Collecting your most used links Making a simple "about me" site Rendering markdown-generated HTML The web was made for semantic HTML—let's start using it
レスポンシブイメージとは 画面幅や端末(パソコン、スマホなど)に応じて表示するイメージを切り替えること なぜ重要なのか スマホみたいな小さな画面で表示する時に5000x2500みたいな巨大画像を送りつけてしまうと、意味もなく通信時間がかかり、ユーザが可哀想 逆にスマホ用の小さな画像をPCで開くと、画像がボケる なので表示端末に応じて画像を切り替える必要がある そのために何を理解する必要があるのか HTML5でimgに追加されたsrcset属性, sizes属性 ブラウザがどうやって画像を選択しているのか Retinaについて 凄まじく短いですが、今回の記事用にGitHubのレポジトリ作っときました 早速実装してみよう サイズが異なるフラミンゴの画像を4つコチラから拝借しました。 普通にimg srcを指定して表示する まずは普通にimgにsrcを設定します。
サッポロクリエイティブキャンプ 2016 #3で使った資料を増補改訂したものです。HTML5 VideoとかHLSとかDASHとかのことについてです。Read less
こんにちは!dely でフロントエンドの開発をしています @all__user です。 今回は kurashiru のフロントエンド開発に導入されたビジュアルリグレッションテストについてご紹介したいと思います。 【反応を多くいただいた点について記事の最後に追記しました】 目次 目次 ビジュアルリグレッションテストとは 導入の背景 フロントエンドのテスト? SPA移行前後の比較 ツール reg-suit Loki Wraith BackstopJS テストのフロー GitHub + CodeBuild + BackstopJS ステージング環境 テストケースは Google スプレッドシートで管理 結果を S3 にアップロードして Slack に通知 まとめ 【追記】 運用が大変ではないか? 1pxの違いにそこまで工数かける? 広告が差し込まれたり変わっただけでテストが壊れるのでは? ビジュ
iOS 10で変わったこと これまでのMobile Safariでは、HTML<video>タグでembedした動画を自動再生させることができませんでした。これはHTML5ではなくApple社による制約事項です。 そのため、アウトストリーム動画広告(インフィード, インバナー等)ではCanvasにレンダリングするなど、<video>タグを使用しないワークアラウンドが一般的でした。 これがiOS10からは、条件付で<video>タグを自動再生できるようになりました。 https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html 記述例 デフォルトの挙動
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素&文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く