Web 技術解体新書「第二章 Cache 解体新書」リリース Intro 「Web 技術解体新書(Web Anatomia)」の第二章として「Cache 解体新書(Cache Anatomia)」をリリースしました。 これで予定している八章のうち二章が終わりました。 第一章: Origin 解体新書 第二章: Cache 解体新書 Cache 解体新書 以下の Response Header Field がどういう意味を持つか正確に説明できますか? おそらく多くの Web 開発者が一度は見たことがあり、これを「1 時間キャッシュする」という意味で指定している人もおおいでしょう。 では、どこから 1 時間で、 1 時間経ったらなにが起こるのか、これが Response でなく Request に付与されたらどう変わるのか、きちんと把握できていますか? そもそも、一般的にキャッシュ機構における

完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — ウェブの構造化HTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化マルチメディアと埋め込みマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML 表HTML 表HTML の表の基本HTML 表の高度な機能とア

アクセシビリティとは可能な限りの多くの人々が利用できるようにする状態のことを指します。 ウェブサイトで言えばスクリーンリーダーを利用している人や、モバイルデバイスで見る人、キーボード操作のみ行う方などすべての人が利用できるような状態です。 例えば、ハンバーガーメニューで「≡」のアイコンデザインをよく見かけませんか？あのアイコンにtabキーで移動でき、キーボード操作だけでメニューの開閉ができるサイトはアクセシビリティを意識しているのだなと思います。 首相官邸ホームページを見てみるとtabキーでメニューを移動できます。また画像の黄色い線で引いたところは、WAI-ARIAを使用していました。 アクセシビリティを高めて、多くの人に情報を届けようとしているなあと思いました。 首相官邸ホームページ アクセシビリティの向上には、HTMLの適切タグを使用したマークアップやWAI-ARIAの手法が挙げられま

WAI-ARIAとはなにか 「Web Accessibility Initiative - Accessible Rich Internet Applications」 の略で、 「ウェイ・アリア」 と読みます。 WAI-ARIAをつかえば、HTMLだけでは不足している セマンティクス（意味） を属性で補完することができ、 支援技術（スクリーンリーダーなど）を通じて、障害をもつ人に対し適切な情報を伝えられる ようになります。 WAI-ARIAの注意点 あくまでも 「必要な場合のみ使用する」 技術です。 HTML5タグのセマンティクスで解決できるのであれば、 HTMLで対応するのが基本 です。 WAI-ARIAのつかいかた 決められた 「属性」 をHTMLタグに追記して使用します。 以下、すぐにでも導入が可能で効果が期待できそうな項目を挙げてみました。 （その他、詳細については参考サイトをご

URLを入れるだけでサイト内部の問題を一括検出 Googleと同じ視点でサイトをクロールして、 大規模サイトでも手軽に高度なSEO分析ができます！ まずは無料デモクロールを試して、あなたのサイトの問題点を一括検出！ 通常の検索結果と比較して、視覚的・操作的な機能が追加された検索結果をリッチリザルトと呼びます。 自社サイトのCTRを高めるため、獲得が推奨されるリッチリザルトですが、構造化マークアップの知識と技術が必要になるため、すぐには実装できないというWEB担当者も多いようです。 今回は、構造化データの基礎情報や、構造化データを構成する2つの要素について確認するとともに、自社サイトの保有ページがリッチリザルトに対応しているかどうかの検証方法を解説します。 まずは構造化データにどのような役割があるのかを知り、構造化マークアップが自社サイトに必要な施策かどうかを検討しましょう。 構造化データと

Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数

フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5

あくまで有効日数はW3C仕様の名目上のステータスであり、参考情報にしか過ぎないわけですが、HTML5とそれよりも前に策定された(X)HTML仕様は、2018年3月に一斉に廃止され、HTML Review Draftと入れ替わるタイミングでHTML 5.1とHTML 5.2が同時に廃止されました。Second Editionを含んでいますが、HTML5シリーズがいずれも勧告から3年で廃止されているのは何とも興味深いところではあります。 また、古い話ですが、当時HTML5のEditorを務めていたHixieことIan Hickson氏が2008年に「HTML5の完成は2022年ごろになる」と発言していたことがありました（HTML5の完成は2022年！？ | Web標準Blog | ミツエーリンクス）。2012年にW3CとWHATWGのHTMLが分裂[1]し、結局今年になってWHATWG HTM

編集や校正の基本として、疑問符（？）や感嘆符（！）の後に空白をいれる（スペースを空ける）という慣習があります。この慣習の意図とは何か、またスペースがあいていれば全角アキでも半角アキでもどちらでもいいのかを解説していきます。ブログや小説など表記する媒体によって使い方こそ変われど、大事なのは「読者さんにとって、わかりやすいか・読みやすいか・理解しやすいか」であることに変わりはありません。 今日は、編集者っぽく「日本語の文章の書き方」について。あなたは、疑問符（？）や感嘆符（！）の後に空き（スペース）を入れてますか？ なぜアキを入れるのでしょうか？ それは……。 疑問符（？）や感嘆符（！）のあとにはアキをいれるのがオススメ編集の基本として、疑問符（？）や感嘆符（！）のあとにはアキをいれる（スペースをいれる）という慣習があります。 編集者としては納得して受け入れている、ある意味ルールなのです。しか

こんにちは、ペンギン男です🐧 珍しく受け身でなく、主体的に不明な点の解明に乗り出した今回。しかし、それにしてもGoogleはそういったニーズにも応えられるように、きちんと情報発信を怠らないものですね💦 このトピックに関する、前回の記事↓ ———————————————————————— 【目次】 おさらい 構造化データテストツール 構造化データのメンテナンス サーチコンソール上で「このサイトでは構造化データが見つかりません」と表示される場合の、アルアル 最後に ———————————————————————— おさらい 構造化データとは 検索エンジン理解促進対策 リッチスニペットの充実にもつながる ウェブページ上、どういう構造のコンテンツになっているかをより明確に表示させる機能 「構造」「マークアップ」というくらいなので、「HTML」を意識したもの なので、求人情報などのコンテンツには

Note: Read about past updates to this technology in other blog posts about Intelligent Tracking Prevention, and the Storage Access API. The beta releases of iOS 12.2 and Safari 12.1 on macOS High Sierra and Mojave include an updated version of Intelligent Tracking Prevention (ITP). For purposes of developer communication, we’ll refer to it as ITP 2.1. With this update we further reduce trackers’ a

まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感

XMLこそがウェブの未来であるという見方が支配的だったために、2004年のOperaとMozillaの共同提案は却下され、W3CでHTMLを改良する道が閉ざされました。そこでブラウザーベンダーが集まってW3Cとは別の組織でHTMLやHTMLに関連する仕様の改良を行う、というのがWHATWGのはじまりです。 以来今日に至るまでずっと、WHATWGはHTMLの開発を（ある期間はW3Cと共同で、ある時期からはW3Cとは別に）し続けています。「WHATWG HTMLこそが実装者とウェブ開発者によって参照されるべき最新の仕様であり、欠陥フォーク（W3C HTMLのこと）は答えではない」というのはWHATWG HTMLのエディターであるAnne van Kesterenの言葉の通り、WHATWG HTMLを第一に参照すべきでしょう。 HTML5勧告以降のW3Cの動向 さて、W3Cに話を戻します。HTM

Web ブラウザーは通常 HTTP 要求の Referer: ヘッダーに参照元ページの URL を入れますが (あるいは document.referrer で参照元ページの URL を取得できますが)、 Web サイト側でこれを制御したいことがあります。 例えば、次のような場面が想定されます。 URL にユーザー名や秘密の ID などを含めざるを得ない時は、プライバシーやセキュリティーの観点から、この URL を外部に漏らしたくありません。 社内システムに URL を貼りたいことがありますが、社内システムの URL を外部に漏らしたくありません。 Web アプリケーションの開発用サーバーは、その所在を外部に漏らしたくありません。 投稿者と友達のみに公開される SNS の投稿にリンクが含まれる時、その個別 URL を漏らしたくありません。 (SNS 全体の URL が漏れることは問題ありま

#schema.orgとは schema.orgの仕様通りにHTMLにマークアップする事で、Google,Yahoo!,Microsoftなどの検索エンジンに正確な情報を収集してもらい、ユーザーに最適な検索結果を提供するというものです。 例えば本について書かれたHTMLがあったとします。その情報に対し「ここには本の題名が書いてあります」「ここには本の出版日が書いてあります」「ここには著者の名前が書いてあります」などの、HTMLでは伝えきることができない、より詳しい情報をクローラーに伝えることを目的としたものです #schema.orgのメリット ##1. 検索エンジンでリッチスニペットが表示される schema.orgではmicrodataという方式でマークアップすることで、クローラーがページの内容を解析しやすくなります。その結果、検索エンジンにリッチスニペットを表示することができます。

Resources for Developers, by DevelopersDocumenting web technologies, including CSS, HTML, and JavaScript, since 2005. ////////////   ////////////   ////////////   ////////////   ////////////   ////////////   ////////////  ++++++  ++++++  ++++++  ++++++  ++++++  ++++++  ++++++{{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}     ../../    ../../    ../../    ../../    ../../    ../..