「html」カテゴリーアーカイブ

フロントエンドエンジニア御用達の MDN web docs を網羅した – Qiita

フロントエンドエンジニア御用達の MDN web docs を網羅した - Qiita

フロントエンドエンジニア御用達の MDN web docs を網羅した - Qiita

このリストは何? MDN web docs を、あたかも書籍の目次のように整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要なったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃...

はてなブックマーク - フロントエンドエンジニア御用達の MDN web docs を網羅した - Qiita はてなブックマークに追加

「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 – m31

「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31

「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31

web屋さんたちのTLで話題沸騰の「img要素、下から見るか?横から見pで囲うか?」問題について、Twitterでもやいのやいの言っていますが、件のツイートで挙がっている項目について、独自解釈ではなく、仕様についてきちんと解説したいと思います。 って書いたけどたぶんimg要素の話だけで終わる。 img要素の仕様を理解す...

はてなブックマーク - 「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31 はてなブックマークに追加

Googleがrel=nofollow属性の扱いを変更。sponsored属性とugc属性を新たに導入 | 海外SEO情報ブログ

Googleがrel=nofollow属性の扱いを変更。sponsored属性とugc属性を新たに導入 | 海外SEO情報ブログ

Googleがrel=nofollow属性の扱いを変更。sponsored属性とugc属性を新たに導入 | 海外SEO情報ブログ

[レベル: 上級] rel="nofollow" 属性の扱いを Google は変更しました。 従うべき命令としてではなく、手がかりのためのヒントとして利用するようになります。 また、nofollow の派生型として、link タグと用いる 2 種類の rel 属性を新たに導入しました。 nofollow 属性の扱いを変更 rel="nofollow" 属性が付いたリンク...

はてなブックマーク - Googleがrel=nofollow属性の扱いを変更。sponsored属性とugc属性を新たに導入 | 海外SEO情報ブログ はてなブックマークに追加

CSSを非同期ロードする最も簡単な方法 – Qiita

CSSを非同期ロードする最も簡単な方法 - Qiita

CSSを非同期ロードする最も簡単な方法 - Qiita

CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しか...

はてなブックマーク - CSSを非同期ロードする最も簡単な方法 - Qiita はてなブックマークに追加

実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方 | コリス

実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方 | コリス

実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方 | コリス

HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neog...

はてなブックマーク - 実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方 | コリス はてなブックマークに追加

Google Maps の検索結果から Yahoo! カーナビで経路案内できる iOS ショートカット – Qiita

Google Maps の検索結果から Yahoo! カーナビで経路案内できる iOS ショートカット - Qiita

Google Maps の検索結果から Yahoo! カーナビで経路案内できる iOS ショートカット - Qiita

Google Maps の検索結果から Yahoo! カーナビで経路案内できる iOS ショートカット …を作りました。 動作している様子 見て〜!これ良くない? pic.twitter.com/ORzK8uJtL6 — Otchy (@otchy) 2019年6月4日 ショートカットのインストール用リンク https://www.icloud.com/shortcuts/4bc792b730ad41ea9d1b8fc0177aa771 ※詳...

はてなブックマーク - Google Maps の検索結果から Yahoo! カーナビで経路案内できる iOS ショートカット - Qiita はてなブックマークに追加

HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に - Publickey

HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に - Publickey

HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に - Publickey

HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に W3CとWHATWGは、HTML標準仕様の策定について合意したことを発表しました。 いわゆるHTML5と呼ばれるHTMLの最新仕様には、WHATWGが公開しているものとW3Cが公開しているものが併存しており、しかも両者には...

はてなブックマーク - HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に - Publickey はてなブックマークに追加

HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に - Publickey

HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に - Publickey

HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に - Publickey

HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に W3CとWHATWGは、HTML標準仕様の策定について合意したことを発表しました。 いわゆるHTML5と呼ばれるHTMLの最新仕様には、WHATWGが公開しているものとW3Cが公開しているものが併存しており、しかも両者には...

はてなブックマーク - HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に - Publickey はてなブックマークに追加

グーグルが発表した新ウェブ技術「Portals」とは–「Google Chrome」向けのウェブナビゲーションシステム – ZDNet Japan

グーグルが発表した新ウェブ技術「Portals」とは--「Google Chrome」向けのウェブナビゲーションシステム - ZDNet Japan

グーグルが発表した新ウェブ技術「Portals」とは--「Google Chrome」向けのウェブナビゲーションシステム - ZDNet Japan

Googleは米国時間5月7日、年次開発者会議「Google I/O 2019」で、ウェブページのローディングやナビゲーションに新風を吹き込む「Portals」と呼ばれる新たなテクノロジーを発表した。 GoogleによるとPortalsは<portal>という新たなHTMLタグを使って動作するという。このタグの動作は、従来からある<iframe>タグとよく似...

はてなブックマーク - グーグルが発表した新ウェブ技術「Portals」とは--「Google Chrome」向けのウェブナビゲーションシステム - ZDNet Japan はてなブックマークに追加

意外と知らない?HTML/CSSを書く上で便利なデベロッパーツールの機能13選|Kazutaka Shimizu|note

意外と知らない?HTML/CSSを書く上で便利なデベロッパーツールの機能13選|Kazutaka Shimizu|note

意外と知らない?HTML/CSSを書く上で便利なデベロッパーツールの機能13選|Kazutaka Shimizu|note

こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、 起業する際にエンジニアがいなかったので、独学でWeb開発を勉強してプロダクトを作りそこから3年ほど運営し、最近はその経験をこちらのツイッターで発信しています...

はてなブックマーク - 意外と知らない?HTML/CSSを書く上で便利なデベロッパーツールの機能13選|Kazutaka Shimizu|note はてなブックマークに追加

Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート | コリス

Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート | コリス

Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート | コリス

Google ChromeのEngineering ManagerであるAddy Osmani氏による、Chrome 75でリリース予定のloading属性についての解説を紹介します。 loading属性とはブラウザがネイティブで遅延ロードをサポートするもので、img要素やiframe要素を簡単に遅延ロードさせることができます。以前は、lazyload属性として開発されていまし...

はてなブックマーク - Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート | コリス はてなブックマークに追加

Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート | コリス

Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート | コリス

Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート | コリス

Google ChromeのEngineering ManagerであるAddy Osmani氏による、Chrome 75でリリース予定のloading属性についての解説を紹介します。 loading属性とはブラウザがネイティブで遅延ロードをサポートするもので、img要素やiframe要素を簡単に遅延ロードさせることができます。以前は、lazyload属性として開発されていまし...

はてなブックマーク - Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート | コリス はてなブックマークに追加

Webフロントエンドとサーバーサイドの技術動向をざっくり整理する/JavaScript – “BOKU”のITな日常

Webフロントエンドとサーバーサイドの技術動向をざっくり整理する/JavaScript - "BOKU"のITな日常

Webフロントエンドとサーバーサイドの技術動向をざっくり整理する/JavaScript - "BOKU"のITな日常

今回は、WEBフロントエンドとサーバーサイドあたりの技術動向を、ざっくりとアウトラインだけ整理してみようかと思います。 整理の目的 今のところ。 自分的には、jQueryで困っていることは特にありません。 なんですが、久々に既存システム縛りの無いWeb開発の話があり、「せっかくだから、jQuery以外のJavaScriptフレ...

はてなブックマーク - Webフロントエンドとサーバーサイドの技術動向をざっくり整理する/JavaScript - "BOKU"のITな日常 はてなブックマークに追加

W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます – 水底の血

W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血

W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血

まえがき W3C(とWHATWG)からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG(Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます)がブログエントリーのタ...

はてなブックマーク - W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血 はてなブックマークに追加

HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS | コリス

HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS | コリス

HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS | コリス

CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS(CSS4までサポート)を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCS...

はてなブックマーク - HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS | コリス はてなブックマークに追加

HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS | コリス

HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS | コリス

HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS | コリス

CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS(CSS4までサポート)を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCS...

はてなブックマーク - HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS | コリス はてなブックマークに追加

未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく – Qiita

未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita

未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita

エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラ...

はてなブックマーク - 未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita はてなブックマークに追加

未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく – Qiita

未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita

未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita

エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラ...

はてなブックマーク - 未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita はてなブックマークに追加

未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく – Qiita

未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita

未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita

エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラ...

はてなブックマーク - 未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita はてなブックマークに追加

CSS フレームワークを使いたくない – ジンジャー研究室

CSS フレームワークを使いたくない - ジンジャー研究室

CSS フレームワークを使いたくない - ジンジャー研究室

CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今...

はてなブックマーク - CSS フレームワークを使いたくない - ジンジャー研究室 はてなブックマークに追加

ドキュメントサイトの管理にはNetlify+静的サイトジェネレーターが便利 – Cybozu Inside Out | サイボウズエンジニアのブログ

ドキュメントサイトの管理にはNetlify+静的サイトジェネレーターが便利 - Cybozu Inside Out | サイボウズエンジニアのブログ

ドキュメントサイトの管理にはNetlify+静的サイトジェネレーターが便利 - Cybozu Inside Out | サイボウズエンジニアのブログ

こんにちは!開発部テクニカルコミュニケーショングループの仲田(@naoh_nak)です。 最近WeWorkみなとみらいに出没し始めました。おしゃれ過ぎて少し落ち着かないのですが、慣れたら自分もそちら側の人間だと思うようになるのかもしれません。 前回はヘルプサイトをマークダウンで制作する話をしました。そのサイトのホ...

はてなブックマーク - ドキュメントサイトの管理にはNetlify+静的サイトジェネレーターが便利 - Cybozu Inside Out | サイボウズエンジニアのブログ はてなブックマークに追加

制作者のためのHTML

制作者のためのHTML

制作者のためのHTML

主にユーザー側の視点から語られることが多いアクセシビリティですが、制作という側からはどのように捉えることができるのでしょうか。2つの切り口から考えてみます。 # アクセシビリティという文脈において、何のためにHTMLを書くかという話になると マシンリーダビリティのため スクリーンリーダーのアクセシビリティ...

はてなブックマーク - 制作者のためのHTML はてなブックマークに追加

📃 Webページを完全な状態でローカルに保存するツールを作った話 – Qiita

📃 Webページを完全な状態でローカルに保存するツールを作った話 - Qiita

📃 Webページを完全な状態でローカルに保存するツールを作った話 - Qiita

はじめまして。yamaimo (@yarnaimo) です。Qiita 初投稿...というかネット上にちゃんとした記事を上げるの自体初めてな気がします。 https://github.com/yarnaimo 1998 年生まれでプログラミングとか Web デザインは独学で 3 年ぐらいやってます。TypeScript / Firebase / Node.js / Vue.js あたりが特に好きです。ちな...

はてなブックマーク - 📃 Webページを完全な状態でローカルに保存するツールを作った話 - Qiita はてなブックマークに追加

阿部寛のホームページ並にはっや~い! FC2ブログ、一瞬でブログが開く「爆速テンプレート」を開発 – ねとらぼ

阿部寛のホームページ並にはっや~い! FC2ブログ、一瞬でブログが開く「爆速テンプレート」を開発 - ねとらぼ

阿部寛のホームページ並にはっや~い! FC2ブログ、一瞬でブログが開く「爆速テンプレート」を開発 - ねとらぼ

ブログサービス「FC2ブログ」に、「爆速テンプレート」が導入されました。これを利用して制作されたブログは、「回線が速度規制中でも一瞬で開くほど軽い」ことで有名な、「阿部寛のホームページ」並に高速で表示されます。冗談みたいな話ですが、試しに公式のサンプルブログを開くと、割とマジで体感できます。 本当に...

はてなブックマーク - 阿部寛のホームページ並にはっや~い! FC2ブログ、一瞬でブログが開く「爆速テンプレート」を開発 - ねとらぼ はてなブックマークに追加

一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと – 一休.com Developers Blog

一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog

一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog

一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 なぜjQueryを取り除いたのか? どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した...

はてなブックマーク - 一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog はてなブックマークに追加

OpenAPI GeneratorでRESTful APIの定義書から色々自動生成する #OpenAPI – こまどブログ

OpenAPI GeneratorでRESTful APIの定義書から色々自動生成する #OpenAPI - こまどブログ

OpenAPI GeneratorでRESTful APIの定義書から色々自動生成する #OpenAPI - こまどブログ

APIの定義を書く:Excel仕様書はもういやだ RESTful APIを提供するサーバと、そのAPIを利用するクライアント(たとえばSPA)とを並行で開発しようとするとき、まずAPIを定義して、それに基づいてサーバ/クライアント双方の実装を進めようと考えるのは自然だと思う。 そうと決まれば、「API仕様書_20190110.xlsx」と題す...

はてなブックマーク - OpenAPI GeneratorでRESTful APIの定義書から色々自動生成する #OpenAPI - こまどブログ はてなブックマークに追加

CSSリセットの2019年用私流カスタマイズ方法 | コリス

CSSリセットの2019年用私流カスタマイズ方法 | コリス

CSSリセットの2019年用私流カスタマイズ方法 | コリス

Webサイトを制作する際、CSSリセットを使用されている人が多いと思います。Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssが登場しました。 Eric MeyerのCSS Resetをベースに、marginやpaddingなどのスペースを上か下かのどちらかに統一できるようにカスタマイズされたCSSリセ...

はてなブックマーク - CSSリセットの2019年用私流カスタマイズ方法 | コリス はてなブックマークに追加

[CSS]知っておくと便利な論理プロパティ、ボックスモデルにおける古い方法とこれからの方法 | コリス

[CSS]知っておくと便利な論理プロパティ、ボックスモデルにおける古い方法とこれからの方法 | コリス

[CSS]知っておくと便利な論理プロパティ、ボックスモデルにおける古い方法とこれからの方法 | コリス

現在のところ、margin-top, padding-bottomのように物理プロパティをボックスモデルで使用していると思います。しばらくはそのままで問題ないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会が増えるでしょう。 CSSの論理プロパティにおける考え方、注意点、そして英語や日本語など言語で変化する...

はてなブックマーク - [CSS]知っておくと便利な論理プロパティ、ボックスモデルにおける古い方法とこれからの方法 | コリス はてなブックマークに追加

HTMLのinputタグ[type=file]の仕様について少し調べてみた – Qiita

HTMLのinputタグ[type=file]の仕様について少し調べてみた - Qiita

HTMLのinputタグ[type=file]の仕様について少し調べてみた - Qiita

はじめに みなさんHTMLタグの一つであるinputタグはご存知だと思います。 その中でもtype="file"についてぼくはこんな疑問を持ちました。 選択したファイルはどこのファイル?コピーとかされているの? これみなさん知っていますか? ちょこっと調べたんですがなかなか情報がなかったので いろいろ自分で調査してみまし...

はてなブックマーク - HTMLのinputタグ[type=file]の仕様について少し調べてみた - Qiita はてなブックマークに追加

HTMLのinputタグ[type=file]のブラウザごとの挙動について調べてみた – Qiita

HTMLのinputタグ[type=file]のブラウザごとの挙動について調べてみた - Qiita

HTMLのinputタグ[type=file]のブラウザごとの挙動について調べてみた - Qiita

はじめに みなさんHTMLタグの一つであるinputタグはご存知だと思います。 その中でもtype="file"についてぼくはこんな疑問を持ちました。 選択したファイルはどこのファイル?コピーとかされているの? これみなさん知っていますか? ちょこっと調べたんですがなかなか情報がなかったので いろいろ自分で調査してみまし...

はてなブックマーク - HTMLのinputタグ[type=file]のブラウザごとの挙動について調べてみた - Qiita はてなブックマークに追加