ウェブアクセシビリティ導入ガイドブック｜デジタル庁
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま
【613人に聞いた】個人サイトどう作ってる？個人サイトのいいところ・悩んでいることは？【アンケート結果発表】 | 創作・同人サイト制作支援メディア do
でシェア content_copy 記事タイトルとURLをコピー 【613人に聞いた】個人サイトどう作ってる？個人サイトのいいところ・悩んでいることは？【アンケート結果発表】 - https://do.gt-gt.org/questionnaire-0331/ 昨今は創作をする人の中で脱・SNSや個人サイトへの移行が話題になっています。しかし、個人サイト制作に興味はあっても実際どんな感じか分からなくて、なかなか手を出せない……という人は多いでしょう。 また、今現在個人サイトを運営している人も、他の人たちが個人サイトをどうやって作っているのか、どんなことを考えて個人サイトを運営しているのか、気になることも多いと思います。 そこでこの記事では、実際に個人サイトを運営している人たちを対象に実施したアンケートの結果を発表します！ 個人サイトを運営している人たちの生の声を聞くことができるので、個人サ
KIYAC | わずか数分でプライバシーポリシーや利用規約を簡単作成
KIYACは、弁護士が監修する法律文書ジェネレータです。いくつかの質問に答えるだけで、プライバシーポリシーや利用規約など、ウェブサイト運営に必須の法律文書を生成できます。さらに、KIYACで生成された文書のリーガルチェックを弁護士に依頼することもできます。
Figmaでbootstrapを作ったので無料配布します。｜hikaru-takase /Loglass
仕事でbootstrapを使う機会があったので、これを機にfigmaでbootstrapデザインテンプレートを構築しました。Figmaとbootstrapの相性と生産性はめちゃくちゃ良いと感じてます。 エンジニアさん御用達！みんな大好きbootstrapは優れたコンポーネントを提供しており、その優れたbootstrapコンポーネントを共有&共同作業に特化したFigmaで事前にコンポーネント化しておく事で、デザイナー以外の人でもパーツの組み合わせを考えるだけで実際の画面に近いプロトタイプを構築することが可能になります。 細かなデザインやパーツ製作に注力しなくて良くなる分、プロジェクトの課題であるビジネス課題やシステム構成にフォーカスする事ができるのが特長です。優れたコンポーネントがデザインされていれば、デザイナー以外でも（チームで）UI/UX課題に対してアプローチしやすくなる思想や考え方は素
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
HTMLコーダーにとっての2020年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第6回目となる本記事ではウェブ業界の「HTMLコーダーにとっての2020年」と題してアンケート結果を紹介します。 HTMLのエディター HTML制作によく使われるエディターはどれでしょう？ アンケートで質問してみました。 805票の回答があり「VS Code」が64.5%、「Atom」が8.8%、「WebStorm」が8.2%、「その他」が18.5%でした。 VS Codeは圧倒的な人気ですね。ICS MEDIAでは記事『VS Codeの拡張機能7選』で紹介しているとおり、無料のソフトウェアなのに開発を便利にする機能がたくさん揃っていて魅力的です。 WebStormの回答者数は
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 - ICS MEDIA
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 2020年初め、Chromium版のMicrosoft Edge（以下新Edge）がリリースされました。新Edgeは「Microsoft Edge Legacy」（以下Edge Legacy）と比べて多くの機能が使えるようになっており、Chrome・Firefox・Safariのモダンブラウザと遜色ないレベルになっています。 先日5月29日にリリースされた「Windows 10 May 2020 Update」では、Edge Legacyの開発が終了することもアナウンスされており（参考記事「Windows 10 features we’re no longer developing - Windows Deployment」）、今後のWindows標準ブラウザは新Edgeとなっていくでしょう。 ウ
様々なファビコンを一括生成
favicon.ico,apple-touch-iconなど様々なブラウザやデバイスに対応したファビコンをまとめて生成。 使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。 favicon.ico、icon*.png、android-chrome*.png、apple-touch-icon*.png、site-tile*、manifest.jsonを一括生成します。 エラーログに余計な404 not foundを記録させない対策としても有効。PWAのアイコン作成にも。 <meta name="msapplication-square70x70logo" content="/site-tile-70x70.png"> <meta name="msapplication-square150x150logo" content="/site-tile-150x150.png"> <
HTML5 入れ子チートシート | 吉川ウェブ
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
gzip圧縮でCSSやJSなどの転送量を減らす方法
ブラウザに表示するためのデータ転送の際、その内容を圧縮することで転送量を減らし、表示速度を高めるための手法としてgzip圧縮があります。今回はこの方法を解説します。例えば、当ブログの各ページはgzip圧縮に対応していて、本来なら25kbほどのファイルサイズが4kbほどにまで軽量化されています。 「gzip」とは、ファイルを「圧縮」する方法の1つです。圧縮というのは、独自のデータ形式でファイルサイズを一時的に小さくすること。つまり、ウェブページのサーバーとユーザーのパソコン間で通信しているデータサイズを少なくするのが、今回設定する「gzip圧縮」の効果なんです。サイズが小さくなることで、ページの表示がより高速になることはもちろん、転送量が減るので利用しているサーバによっては、料金の節約にも繋がります。 技術的・専門的な内容については、下記の、t32kさんのページが分かりやすいので、興味のある
細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）
BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM
Yaku Han JP - 約物半角専用のフォント
ゴシック体 明朝体 丸ゴシック すべて カッコのみ Hiragino Noto 横書き 縦書き w100 w200 w300 w400 w500 w600 w700 w800 w900 0.625rem 0.75rem 0.875rem 1rem 1.125rem 1.25rem 1.5rem 2rem Before 「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは9種類。Noto Sans JPに沿っています。 <!-- HTML：CDNリンクを貼り付け --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist
「御社のスマホサイト、遅いから19%離脱してるよ」グーグルのわかりやすい測定サービス登場 | 初代編集長ブログ―安田英久
今日は、スマホサイトの表示スピードをチェックして、読み込みの遅さが原因で離脱している訪問者がどれぐらいいると推定されるかを教えてくれる、グーグルのサービスを紹介します。 読み込みが遅いと離脱する。スマホならなおさらね「モバイルでのページ読み込みが遅いせいで、これぐらいの人を逃してるよ？ 改善しないともったいないよね？」という切り口で、モバイルに特化したページ表示速度の改善を促すサービスを、グーグルが提供しました。 オンラインで利用できる「モバイルサイトの読み込み速度とパフォーマンスをテストする」というサイトなのですが、正式名称は「Test My Site」のようです（実際にサイト上でその名前が使われてるのはドメイン名だけですが）。 モバイルサイトの読み込み速度とパフォーマンスをテストするGoogle の新ツール「Test My Site」を活用してモバイルサイトの読み込み速度を改善しましょ
Google Analytics完全連携A/Bテストツール『Google Optimize 無償版』ついにリリース | Ledge.ai
Google『お ま た せ』 ついに来ました。以前Ledgeでも紹介し、リリース予告だけで業界を激震させたABテストツール『Google Optimize』無償版公開です。（ベータ版だけど誰でも使える） とりあえずLedge編集部でソッコー触ってみたので、以下「何ができるのか？」と「どう活用するのか？」のまとめとなります。 できない事って逆に何？至れり尽くせりな無償開放 まずは気になる「何ができるんだっけ？」てとこですが、なんと『有料版とほぼ遜色なし』て感じでした。つまり、以前の記事でお知らせした以下の機能がほぼフル装備状態での無償開放になったようなんです。 ※作れるエクスペリエンス数に制限はあるけれど とりあえずできることリストGoogle Analyticsタグにちょっと加工してURL指定すればOK表示された画面をドラッグ＆ドロップ、直接コード編集でいじってテスト作成変更履歴は全部残
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
do | 創作・同人サイト制作支援サイト
Buffer
個人サイトつくろう！
HTML Standard 日本語訳
ごめんなさいね。 - Lopan.jp
ロリポップ！テクニカルスクール - ロリポップレンタルサーバー
