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

グーグルのエンジニアが警告、「別タブで開く」リンクは実はヤバいんだって!?【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum

グーグルのエンジニアが警告、「別タブで開く」リンクは実はヤバいんだって!?【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum

グーグルのエンジニアが警告、「別タブで開く」リンクは実はヤバいんだって!?【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum

illustration by つきのあめだま リンクを別タブで開くためにHTML上でリンクにtarget="_blank"を指定することには「セキュリティとパフォーマンスの点で問題がある」と、グーグルのエンジニアが注意している。 一般的な書き方だと思うのだが、どういうことなのだろうか。何が問題なのか、どうすればいいのかを、わかりや...

はてなブックマーク - グーグルのエンジニアが警告、「別タブで開く」リンクは実はヤバいんだって!?【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum はてなブックマークに追加

仮想DOMは本当に“速い”のか? DOM操作の新しい考え方を、フレームワークを実装して理解しよう – エンジニアHub|若手Webエンジニアのキャリアを考える!

仮想DOMは本当に“速い”のか? DOM操作の新しい考え方を、フレームワークを実装して理解しよう - エンジニアHub|若手Webエンジニアのキャリアを考える!

仮想DOMは本当に“速い”のか? DOM操作の新しい考え方を、フレームワークを実装して理解しよう - エンジニアHub|若手Webエンジニアのキャリアを考える!

はじめまして、ダーシノ(@bc_rikko)です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか? そういったフレームワークで使われている...

はてなブックマーク - 仮想DOMは本当に“速い”のか? DOM操作の新しい考え方を、フレームワークを実装して理解しよう - エンジニアHub|若手Webエンジニアのキャリアを考える! はてなブックマークに追加

SVG形式のファビコンを設置しよう | Webクリエイターボックス

SVG形式のファビコンを設置しよう | Webクリエイターボックス

SVG形式のファビコンを設置しよう | Webクリエイターボックス

2020年2月13日 SVG, Webサイト制作 つ・い・に!ファビコンもSVG形式が対応されるようになりました!SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要は...

はてなブックマーク - SVG形式のファビコンを設置しよう | Webクリエイターボックス はてなブックマークに追加

SVG形式のファビコンを設置しよう | Webクリエイターボックス

SVG形式のファビコンを設置しよう | Webクリエイターボックス

SVG形式のファビコンを設置しよう | Webクリエイターボックス

2020年2月13日 SVG, Webサイト制作 つ・い・に!ファビコンもSVG形式が対応されるようになりました!SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要は...

はてなブックマーク - SVG形式のファビコンを設置しよう | Webクリエイターボックス はてなブックマークに追加

使いやすさを重視したHTMLスクレイピングライブラリを作った – 純粋関数型雑記帳

使いやすさを重視したHTMLスクレイピングライブラリを作った - 純粋関数型雑記帳

使いやすさを重視したHTMLスクレイピングライブラリを作った - 純粋関数型雑記帳

TL:DR レポジトリ https://github.com/tanakh/easy-scraper ドキュメント 背景 このところ訳あってRustでHTMLからデータを抽出するコードを書いていたのですが、 既存のスクレイピングライブラリが(個人的には)どれもいまいち使いやすくないなあと思っていました。 HTMLから望みのデータを取り出すのはいろいろやり方...

はてなブックマーク - 使いやすさを重視したHTMLスクレイピングライブラリを作った - 純粋関数型雑記帳 はてなブックマークに追加

HTML – 任天堂のHPにhタグが使用されていないのは何故でしょうか。|teratail

HTML - 任天堂のHPにhタグが使用されていないのは何故でしょうか。|teratail

HTML - 任天堂のHPにhタグが使用されていないのは何故でしょうか。|teratail

https://www.nintendo.co.jp/ 任天堂の公式ホームページのマークアップについて質問です。 このサイトに見出しで使用するhタグが1つも使用されていないのは、何故でしょうか。 また、ヘッダーでリストが横並びになっているレイアウトは、通常navタグ が使用されることが多いですが、navタグが使われていないのも何か理由...

はてなブックマーク - HTML - 任天堂のHPにhタグが使用されていないのは何故でしょうか。|teratail はてなブックマークに追加

jQuery愛好家のためのVue.js、React入門(いずれAngularも) – Qiita

jQuery愛好家のためのVue.js、React入門(いずれAngularも) - Qiita

jQuery愛好家のためのVue.js、React入門(いずれAngularも) - Qiita

まず、ことわっておきますが、jQueryは非常に優秀なライブラリです。自分がメインとするWEBシステムの世界ではかなり重宝していますので、時代の潮流だからといって理由もなくjQueryを切り捨てろとは一言も言いませんし、もっと技術は培養すべきです。 ですが、使用できる選択肢を増やす、武器を増やすためにVue.js、Rea...

はてなブックマーク - jQuery愛好家のためのVue.js、React入門(いずれAngularも) - Qiita はてなブックマークに追加

「会社の30歳前後の女性陣、なぜかみんなHTML書けるんだよな🤔」 – Togetter

「会社の30歳前後の女性陣、なぜかみんなHTML書けるんだよな🤔」 - Togetter

「会社の30歳前後の女性陣、なぜかみんなHTML書けるんだよな🤔」 - Togetter

@asami_vtj キラキラサイトに夢中だった学生時代。平成のインターネット文化が、私の働き方の原点になっている - はたらく気分を転換させる|女性の深呼吸マガジン「りっすん」 e-aidem.com/ch/listen/entr…

はてなブックマーク - 「会社の30歳前後の女性陣、なぜかみんなHTML書けるんだよな🤔」 - Togetter はてなブックマークに追加

マイクロソフト、「Blazor WebAssembly」正式版を5月にリリース。BlazorでPWAやデスクトップアプリも開発へ - Publickey

マイクロソフト、「Blazor WebAssembly」正式版を5月にリリース。BlazorでPWAやデスクトップアプリも開発へ - Publickey

マイクロソフト、「Blazor WebAssembly」正式版を5月にリリース。BlazorでPWAやデスクトップアプリも開発へ - Publickey

マイクロソフト、「Blazor WebAssembly」正式版を5月にリリース。BlazorでPWAやデスクトップアプリも開発へ マイクロソフトは1月14日(日本時間1月15日未明)にオンラインインベント「.NET Conf Focus on Blazor」を開催、同社が開発中のWebアプリケーションフレームワーク「Blazor」の最新動向と今後について明らかにし...

はてなブックマーク - マイクロソフト、「Blazor WebAssembly」正式版を5月にリリース。BlazorでPWAやデスクトップアプリも開発へ - Publickey はてなブックマークに追加

「Webデザイナーはコーディングできるべきか」という議論に対する私の考え | Stocker.jp / diary

「Webデザイナーはコーディングできるべきか」という議論に対する私の考え | Stocker.jp / diary

「Webデザイナーはコーディングできるべきか」という議論に対する私の考え | Stocker.jp / diary

Webデザイン 「Webデザイナーはコーディングできるべきか」という議論に対する私の考え Wednesday, January 15th, 2020 【平日夜開催】スマートフォン時代のWebデザインスクール 体験レッスン開催!モダンなWebデザイン制作・Adobe XD・Photoshop・UI/UXなど基礎から学べる講座です。 【日曜開催】WordPress でWebサイト...

はてなブックマーク - 「Webデザイナーはコーディングできるべきか」という議論に対する私の考え | Stocker.jp / diary はてなブックマークに追加

よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ | コリス

よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ | コリス

よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ | コリス

Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub...

はてなブックマーク - よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ | コリス はてなブックマークに追加

HTMLとCSSも進化している!JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ | コリス

HTMLとCSSも進化している!JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ | コリス

HTMLとCSSも進化している!JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ | コリス

以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You ca...

はてなブックマーク - HTMLとCSSも進化している!JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ | コリス はてなブックマークに追加

管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス

管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス

管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス

商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべ...

はてなブックマーク - 管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス はてなブックマークに追加

プレーンテキスト Markdown 時代の終焉 – portal shit!

プレーンテキスト Markdown 時代の終焉 - portal shit!

プレーンテキスト Markdown 時代の終焉 - portal shit!

なぜ Day One は Markdown を捨てたのか Day One が Markdown をやめて WYSIWYG に移行した話は前書いた。 Day One がクソになった Day One 、このブログでも度々言及していて、 Markdown で日記が書けて便利だったんだけど、最近のバージョンアップ( Mac は 2.8 以降 、 iOS は 3.0 以降)でプレー... portalshit.net ...

はてなブックマーク - プレーンテキスト Markdown 時代の終焉 - portal shit! はてなブックマークに追加

HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス

HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス

HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス

シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。 デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。 Izmir Izmir -GitHub Izmirの特徴 Izmirのデモ Izmirの使い方...

はてなブックマーク - HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス はてなブックマークに追加

2019年時点で僕のVSCode(Visual Studio Code)に入ってるプラグインや設定を紹介します – Shibajuku

2019年時点で僕のVSCode(Visual Studio Code)に入ってるプラグインや設定を紹介します - Shibajuku

2019年時点で僕のVSCode(Visual Studio Code)に入ってるプラグインや設定を紹介します - Shibajuku

こんにちは、実は久しぶりの投稿の、どうもしばおです。 さて、僕(フロントエンドよりのWebデザイナー)は普段からメインのテキストエディターにVSCodeを使っているのですが、今日は僕のVSCodeに入っている、プラグインや設定を公開したいと思います。 僕のオンラインサロンでも、VSCodeを結構使ってて、サロンメンバーに...

はてなブックマーク - 2019年時点で僕のVSCode(Visual Studio Code)に入ってるプラグインや設定を紹介します - Shibajuku はてなブックマークに追加

HTML5のLocal Storageを使ってはいけない(翻訳)

HTML5のLocal Storageを使ってはいけない(翻訳)

HTML5のLocal Storageを使ってはいけない(翻訳)

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 HTML5のLocal Storageを使ってはいけない(翻訳) 本気で申し上げます。local s...

はてなブックマーク - HTML5のLocal Storageを使ってはいけない(翻訳) はてなブックマークに追加

フロントエンドエンジニア御用達の 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属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート | コリス はてなブックマークに追加