Prerenderingを使った表示速度の改善 〜速く、一貫性のあるWebを目指して〜 | CyberAgent Developers Blog
すでに知られているように、Webページの表示速度は重要です。利用者はいつでもどこでも素早くページが表示されて欲しいと思うでしょう。Core Web Vitalsの指標でも表されているように、表示速度は一時的に速いだけでなく、安定していることが求められます。 本記事では、安定した表示速度を実現する手段の一つとして考えられるPrerenderingをオリジン・トライアルで試してみた結果をご紹介します。 Prerenderingとは Prerendering実装前に注意すること Quicklinkを使ったPrerenderingの実装 Prerenderingのヒット率を計算する Prerenderingの結果 Prerenderingとは Prerenderingは次に表示されると思われるページを事前にレンダリングします。レンダリングが完了している場合には、利用者がそのページに遷移するリンクを
HTMLの属性値をCSSから参照できるattr()関数は、これまで::beforeや::afterといった疑似要素のcontentプロパティで使える機能として知られていました。 attr()関数の拡張構文は、CSSの値や単位の扱いを定義する仕様書「CSS Values and Units Module Level 5」で定義されています。さらに、Chrome・Edge 133（2025年2月）以降では、この拡張構文をcontentプロパティ以外でも利用できるようになりました。 拡張されたattr()関数には、次のようなメリットがあります。この記事では、デモを交えながら紹介します。 個別のstyle属性やクラスを減らせる HTMLの属性値をCSSの値として直接利用できる ※注意：本記事のデモは、Chrome・Edge 133以上でご覧ください。 1. HTML属性で色・サイズを指定するデモ
2025年のCSSの新機能のまとめは、いよいよ最終回。 今回はCSSのワークフローがより便利になる新機能が盛りだくさんです！ attr()関数の進化 テキストの配置をより細かく制御できるtext-boxプロパティ ついにCSSで使えるようになったif()関数 関数を自分で定義できる@function スタイルクエリとif()における範囲構文 width: 100%;より便利なstretchキーワード など、2026年はこれらの機能を使用していきたいですね。 CSS Wrapped 2025 -Google Blog CSS Wrapped 2025 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスとApache 2.0に基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに エルゴノミクス: CSSのattr()関数がパワーアップ エル
前回、以下の記事でリンクテキストをホバーした際のアニメーション実装例をご紹介しました。 『HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選』 さて、今回は少しだけ複雑になりますが、HTMLとCSSのみでより凝った表現をする方法を紹介します。 リンクテキストといえば、ヘッダーなどのメニューとして小さめのフォントサイズでデザインされていることも多いでしょう。 そんな小さいサイズのテキストでもホバー時に目を引くような、1文字ずつ区切ったテキストアニメーションのアイデアを紹介します。よりサイトの雰囲気に合う演出をしたい、またアイデアの引き出しを増やしたいデザイナーやエンジニアの参考になれば嬉しいです。 ▼ 今回紹介する実装例一覧はこちらです。 記事前半では、実装方法について基本となるアニメーションの仕組みと実装時に気をつけたいことを解説し、後半はバリエーションの実装例を掲載
Filed underCSSoninSeptember 13th, 2021.Sep 2021.Last updatedoninApril 27th, 2026.Apr 2026. IntroductionIn my humble opinion, the best websites and web applications have a tangible “real” quality to them. There are lots of factors involved to achieve this quality, but shadows are a critical ingredient. When I look around the web, though, it's clear that most shadows aren't as rich as they could be.
複数要素の a:hover と a:focus にスタイルをあてたいとき、次のようなコードを書いていませんか？ .section1 a:hover, .section1 a:focus, .section2 a:hover, .section2 a:focus { color: lightpink; } :is() という擬似クラス関数を使えば、短く、重複のないコードが書けます。 :is(.section1, .section2) a:is(:hover, :focus) { color: lightpink; } また、:is() と同時期に、:where() や :not() の複数要素指定といった便利な機能も使えるようになりました。 本記事では、各機能の基礎から使い方までを、実例を交えて紹介します。 :is()とは何か？ :where()とは何か？ :not()とは何か？ :is()
Rethinking DOM from first principles Browsers are in a very weird place. While WebAssembly has succeeded, even on the server, the client still feels largely the same as it did 10 years ago. Enthusiasts will tell you that accessing native web APIs via WASM is a solved problem, with some minimal JS glue. But the question not asked is why you would want to access the DOM. It's just the only option. S
chat.openai.com 上でマークアップを試行錯誤するための Chrome 拡張を試作してみた。 例えば html+preview のコードブロックを見つけるとその隣に HTML として挿入する。後述するが React Component もプレビューできる。 📎 をクリックすると展開したHTMLを画像としてクリップボードに入れることができる。 いい感じにコードを生成してくれるプロンプトのサンプル集はここに置いてる なぜ作ったか GPT-4 はそこそこ賢いコードを生成できるのだが、細かい修正は行うにはやはりプレビューしながら対話的に行う必要がある。 また、人間がその結果を言語化するより、生成されたHTMLを画像入力として修正プロンプトに使うのが精度がでる。 (備考: まだChatGPT Plus の一部ユーザーに開放されてない機能) react-component の生成: ts
新しい本を電子書籍ファイルフォーマットのEPUBで公開したところ、楽天の電子書籍リーダー・Koboでのみ「破損している」と報告があったため調査した結果、KoboではなくAdobeのソフトウェアに問題があったという経緯とトラブルの詳細について、ライターのアンドレ・クライン氏がまとめています。 Your EPUB Is Fine. Kobo Disagrees. Blame Adobe - André Klein Dot Net https://andreklein.net/your-epub-is-fine-kobo-disagrees-blame-adobe/ クライン氏はデジタル著作権管理(DRM)フリーのEPUBファイルを直接読者に配布するため、電子書籍フォーマットのファイルが公式使用に準拠しているか検証するオープンソースツール「EPUBCheck」を使用しました。HTML要素や文書が
September 24, 2021 Stimulus 3 + Turbo 7 = Hotwire 1.0 For so long, it felt like I could only tell half the story of how we make software for the web at Basecamp. Too many of the chapters about our front-end approach were missing key pages. Sure, we had some of it out there. Turbolinks, for example, hark back to 2012, when I was inspired by Chris Wanstrath's ideas in pjax, and took them further. An
Frontend engineer @lapras_inc / TypeScript / Vue.js / Firebase / 元消防士
Here’s a piece of HTML: <html> <body> <p>Hello, world</p> </body> </html> Imagine this was the only piece of HTML you’ve ever seen in your life. If you had complete freedom, which features would you add to HTML, and in what order? Where would you start? #Server Tags Personally, I’d like to start by adding a way to define my own HTML tags. It doesn’t need to be complicated. We can just use JavaScri
HTMLファイルをパースして、 特定の文字列を抜き出したり 特定の属性を書き換えたものを書き出したり ってことをやりたい時、今までは`cheerio`を使うことが個人的には多かった。 GitHub - cheeriojs/cheerio: Fast, flexible, and lean implementation of core jQuery designed specifically for the server. 懐かしい`jQuery`的な記法で操作できる・・とはいえ、もはや`jQuery`のことぜんぜん覚えてなくて、生DOMのAPIばっか使っちゃったり。 かといって、`cheerio`が内部で使ってるHTMLのASTパーサーである`parse5`や`htmlparser2`をそのまま使うのは、ローレベルすぎて乗り気じゃなかったり。 というところで、なんか代用できるものはないかな
春です。入社式のニュースが流れてくる季節ですが、当社もこの4月に多くの新入社員を迎えることができました。 そんな若者について、そもそもXHTMLという単語は何だろうという反応をするかもしれない一方で、長らくHTMLと付き合ってきた人は、XHTMLについて複雑な想いを抱く方も多いだろうと思います。そんな往年のXHTML1時代を過ごしてきた方に改めてお伝えしたいことは、XHTML（HTML Standardでは正確にはXML構文）でHTMLを書くことが推奨されないことが仕様に明示されるようになるというものです。 これは、HTML Standardを管理しているGitHubにWarn that the XML syntax is not recommendedというプルリクエストが作成されたことによります。 このプルリクエストは、XML構文が記載されている14章に次のWarningを追加するとい
Webフロントエンド基礎研修 ~歴史から学ぶ、現場のスタンダードな開発~ 2022年デジタル新卒研修 デジタル編成ユニット Yuta IDE
「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能 | レバテックラボ（レバテックLAB）
「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能 2025年1月7日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主
HTMLはそのままで、classを加えるだけですべてが魅力的に変わるモーションファーストのCSSフレームワーク -AliveUI
HTMLによるマークアップはそのままで、classを加えるだけで、あらゆる要素に奥行き、モーション、インタラクションを与えて、WebサイトやスマホアプリのUIに新たな息吹をもたらすCSSのフレームワークを紹介します。 各要素はより明確に構造化され、カードやタブには深度コンテキストが加わり、ボタンにはクリックを促すアクションが加えられ、フォームには息吹が与えられます。 AliveUI AliveUI -GitHub AliveUIの特徴 AliveUIのデモ AliveUIの使い方 AliveUIの特徴 AliveUIは、モーションを最優先にしたCSSのフレームワークです。WebサイトやスマホアプリのUIインターフェイスは視覚的に構造化されていますが、時間的な動きには乏しいのが現状です。 AliveUIはclassを一つ加えるだけで、あらゆる要素にモーション、奥行き、インタラクションを与えて
Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol
AI World Clocks
× About AI World Clocks Every minute, a new clock is displayed that has been generated by nine twelve different AI models. Each model is allowed 2000 tokens to generate its clock. Here is its prompt: Create HTML/CSS of an analog clock showing ${time}. Include numbers (or numerals) if you wish, and have a CSS animated second hand. Make it responsive and use a white background. Return ONLY the HTML/
ウェブの見た目を整えるのにCSSはなくてはならないものですが、そのCSSの記述方法やツールは多種多様です。そしてそれらは進化したり、変化したりしています。本記事ではSassとCSSの関係性の変化を題材に、他のCSSツールにも応用できるような中長期的なCSSとの向き合い方、そしてネイティブの利点について解説します。 CSSを書く手法の変化について スタイリングを記述する手法やツールは変化しています。この記事ではスタイリングを記述する手法のことをCSSを書く手法と呼びます。中には直接CSSを書かないものもありますが、最終的にはCSSとして表現されるので含むことにします。 HTML1.0が登場した1993年にまだCSSはなく、タグや属性を用いてスタイリングしていました。その後、1996年にCSSが勧告され文書構造とスタイリングが分離し、スタイリングはCSSが担当するようになります。なお、この頃の
リバーシ 警視庁
head内に記述する要素の順番はページのパフォーマンスに影響を与える可能性があります。記述の順番が間違っている要素を特定し、プライオリティが高い順にしてくれるツールを紹介します。 指定したページのhead内の各要素とその重みをリスト化し、プライオリティが高い順に並び替えたものもリスト化してくれます。 2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ capo.jsの使い方 capo.jsを実際に使ってみた capo.jsの使い方 capo.jsを使用するには、2通りの方法があります。 デベロッパーツールのスニペットで実行する ブックマークレットで実行する 手順は簡単です。 capo.jsのJavaScriptをコピーします。 コピーしたJavaScriptをデベロッパーツールのスニペットで実行するか、ブックマークレットを作成します。 ※ブックマークレットは
WordPressテーマ変更でSEOに影響する5つのポイント【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum
1週間かかった作業が1日に！ Gemini Notebookを無料で使い倒す活用術8選 7月29日 7:05 日本マイクロソフト、サイバーエージェント、文藝春秋、電通などが登壇！ 「生成AI × マーケティング フォーラム 2026」【8/27オンライン開催】 7月9日 13:20
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる）
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる） これまでの何年間か、Webアクセシビリティまわりのことをやってきた中で、「Webアクセシビリティに取り組む」上でいろいろな障壁を感じてきました。 「なぜWebアクセシビリティをやるのか」の理解を得る・得てもらうまでの障壁 イノベーター層・アーリーアダプター層な開発者（エンジニアやデザイナー）が取り組みを始める上での障壁 マジョリティ層が取り組みを始める上での障壁 今回はこの3つめの「マジョリティ層が取り組みを始める上での障壁」の話です。 残りの2つについては、私が執筆に参加したWebアプリケーションアクセシビリティが網羅的なガイドになってくれるはずです。しかしコイツは内容的にも物理的にもゴツすぎる問題があると思っていて、導入編としては見えにくい、読みにくい
HTMLの新しい要素「<install>」はJavaScriptなしで、Webアプリのインストールが簡単にできるようになります
安定版のサポートはまだ先ですが、Chrome 148+でフラグを有効にすることで、HTMLの新しい要素「<install>」が利用できるようになっています。 <install>でインストールボタンを設置すると、JavaScriptなしで、Webアプリ（複数可）のインストールが簡単にできるようになります。 Install web apps with the new HTML install element by Patrick Brosset install-element -GitHub 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに これまでの問題点 HTMLの新しい要素「<install>」 フォールバック：代替コンテンツの提供 イベントの処理 <install>要素のデモペ
Moi! UXエンジニアのヨーナスです。今回は、フロントエンドエンジニアに向けて、アクセシビリティに関する3つの誤解について解説したいと思います。 ITイベントやミートアップに参加するとき、業界の仲間たちにアクセシビリティについての印象を積極的に聞くことにしています。そして次のようなことをよく耳にするのです。 アクセシビリティは特別な知識が必要 アクセシビリティは、時間の余裕ができたら対応してもいい アクセシビリティは、限られた人にしかメリットがない 正直にいうと、このような誤解がずっと残り続けているのは非常に残念ですが、アクセシビリティに触れる機会がないままフロントエンドエンジニアとしてIT業界に入った者として、こうした考え方をよく覚えています。まず、開発者として、何をいつどうすればいいかという問いに簡単に答える内容のコンテンツはまだまだ少ないですし、（自分の活動も含めて）アクセシビリテ
Web制作者・デベロッパー向け、ポートフォリオ用のテンプレートを紹介します。 オープンソースで、HTML, CSS, JavaScript, Sassで実装されており、フレームワーク・ライブラリは必要ありません。自己紹介、スキル、プロジェクト、連絡先など、ポートフォリオに必要なコンテンツが用意されており、簡単にポートフォリオを用意できます。 Dopefolio -GitHub Dopefolioは、デベロッパー向けポートフォリオ用のテンプレートです。 セットアップが簡単 💯 商用でも無料 🥳 GNU General Public License v3.0で、オープンソースです。 フレームワークは必要なし 🤘 ライブラリも必要なし 🙌 マルチページ 💎 レスポンシブ対応 🚀 超高速で、SEO最適化 ⚡ Auditsのスコアも高得点 🎖️
先日リリースされたChrome 108で「メモリセーバー（Memory Saver）」と「省エネモード（Energy Saver）」が導入されました。これらは、Chromeがシステムリソースをどのように利用するかをユーザーがより詳細に制御できる機能です。 ユーザーとしてはメモリ節約モードのメモリセーバーも省エネモードも嬉しい機能ですが、Web制作者は認識しておくべき重要なことがいくつかあります。 What developers need to know about Chrome's Memory and Energy Saver modes メモリセーバーと省エネモード メモリセーバーと省エネモードの確認方法 メモリセーバーと省エネモード 先日リリースされたChrome 108のデスクトップ版で、2つの新しいパフォーマンス設定が導入されました。 メモリセーバー（Memory Saver）
HTML Living StandardとモダンCSSに完全対応、読みやすい分かりやすい使いやすいと三拍子揃ったリファレンス本 -HTML＆CSS全事典
HTMLの標準仕様は2021年にHTML5が廃止され、HTML Living Standardになりました。そしてCSSの仕様はW3Cによって策定されており、CSS2.1をはじめ、CSS3やCSS4の策定も進み、モダンCSSが現在の主流となっています。 HTML Living StandardとモダンCSSに完全対応したWeb制作者必携、読みやすい分かりやすい使いやすいと三拍子揃ったリファレンス本を紹介します。 IEのサポートが終了した現在、手元にあるリファレンス本が古いぞ、と思った人には特にお勧めします！ 本書は2015年に刊行されて以来、ベストセラーを続けている「HTML＆CSS全事典」の最新版、改訂3版です。2022年8月現在の仕様にあわせて全面改定されており、HTMLとCSSのリファレンスだけでなく、新機能の解説、今時の記述方法、@ルールのさまざまな使い方、CSSの関数など、Web
HTMLのマークアップを通じて、情報へのアクセスしやすさ＝「アクセシビリティ」を向上させる手段として、「WAI-ARIA（ウェイ・アリア）」が挙げられます。 「aria-*属性」は、WAI-ARIAで定義される技術の1つであり、HTML要素に付加的な情報を与えます。適切に設定された aria-*属性により、ブラウザーやアシスト技術に補足情報を提供し、とくに「スクリーンリーダー」による音声読み上げの精度を高められます。 ※ スクリーンリーダー……コンピューターの画面情報を音声で読み上げたり、点字ディスプレイに出力したりするソフトウェア。視覚障がいを持つユーザーへのアシスト技術の1つ。 この記事では、「aria-*属性を利用した実装例」と、「スクリーンリーダーでの読み上げられ方」を紹介します。スクリーンリーダーの音声読み上げ検証では、以下のソフトウェアを使用しました。 VoiceOver（Ma
新たなセキュリティテスト手法、バグバウンティプログラムのすすめ（後編） - NTT docomo Business Engineers' Blog
こんにちは。マネージド&セキュリティサービス部セキュリティサービス部門の閏間です。総合リスクマネジメントサービス「WideAngle」の新サービスの企画を担当しています。 本記事では、私がセキュリティの知識・技術向上のために業務外で取り組んでいるバグバウンティプログラムについて、3回にわたって紹介します。 本記事により、バグバウンティプログラムの有効性と、脆弱性探しのおもしろさの両方を伝えられれば幸いです。 （前編）バグバウンティプログラムの有効性について （中編）脆弱性探しの魅力と調査方法について （後編）実際に発見した脆弱性の詳細について【本記事】 なお、バグバウンティに関する記事としては、NTT Com社内バグバウンティのご紹介もありますので、ぜひそちらもご覧ください。 脆弱性の実例：3つの問題が重なってXSS(Cross Site Scripting)が発生 本記事では、私が過去に
@_yuheiyによる当エンジニアブログで実施したアクセシビリティ改善の方法についての解説は全体的に丁寧に説明しているだけに、下記の記述がちょっと気になったという話です。 これがimg要素であればalt属性を使って代替テキストを設定すべきですが、svg要素ではそれができません。そこで、WAI-ARIAの出番です。次のようにすることで、alt属性と同様に代替テキストが設定できます。 SVGネイティブに代替テキストを設定する方法は（SVGの）title要素だ、ということはおさえておくべきかなと。SVG2仕様書訳（原仕様書）に次のように書かれています。 title 要素は、 その親要素用の短いテキスト代替を表現する。 つまり、aria-labelを使うことなく、次のように書けます。（HTML解体新書のp.339にもあります。） <a href="..."> <svg role="img"><ti
2025年もCSSをはじめ、Web制作関連の進化は止まらないですね！ Google I/O 2025で、これからのWebを実装するための新機能が発表されました。先日の記事でも紹介したCSSのみでカルーセルを実装する疑似要素のサポート、宣言型ポップオーバー、デベロッパーツールにAIが搭載など、Web制作者がチェックしたおきたい10個の新機能を紹介します。 10 updates from Google I/O 2025 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 1. カルーセルは数行のCSSで簡単に実装できるようになりました 2. 宣言型ポップオーバー: Interest Invoker API 3. いくつかの組み込みAIは利用可能で、Prompt APIにはマルチモーダル機
CreatorZine：サービス終了
CreatorZine サイトサービス終了のお知らせ 2026年3月31日をもってCreatorZineは終了しました。 長い間、CreatorZineをご利用およびご購読いただき、ありがとうございました。 翔泳社では複数のデジタルメディアを運営しております。よろしければご覧ください。 翔泳社のメディア：https://www.shoeisha.co.jp/media
簡単な手順でWebページの読み込み時間を高速化！ クリティカルCSSを抽出してくれるツール -Critical CSS Generator
クリティカルCSSとは、Webページで最初に表示される部分（ファーストビュー）をレンダリングするために必要な最小限のCSSです。このクリティカルCSSを既存のWebページから抽出し、HTMLにインラインのCSSとして記述することでファーストビューで使用するCSSのリクエストがなくなり、ブラウザはすべてのCSSを読み込むのを待たずにWebページをより速くレンダリングできます。 既存のWebページからクリティカルCSSを抽出して、インラインで記述する用のCSSを書き出してくれるオンラインツールを紹介します。 Critical CSS Generator クリティカルCSSを使用する主な利点 Critical CSS Generatorの使い方 クリティカルCSSの記述方法 クリティカルCSSを使用する主な利点 クリティカルCSSを使用する主な利点は、下記の3つです。 Webページの体感的な読み
先日、前面に必ず出したい要素のz-indexにはcalc(infinity)をつけるとよい旨の情報を見ました。 確かに「無限」を指定すれば単純なz-indexの値の勝負では勝てそうな気がします。一方でz-indexマニアの間ではz-indexの上限値は2147483647[1]というのが常識になっています。ではこの「無限」と「2147483647」のどちらが強いのか検証しました。 結果 結論から言うとどちらも同じ値の扱いでした。calc(infinity)を指定しても上限値の2147483647でカンストするようです。 右の図のようにHTMLの順において後に書けば、「2147483647」が「無限」の上に来ました。 検証方法の説明 ここからは検証方法について軽く説明します。z-indexの強さは同一スタッキングコンテキスト上にある必要があります。そしてその中でz-indexが同じ値の場合は
WebUIについて調べた - laiso
WebUIはデスクトップアプリを作るためのライブラリ。HTML, CSS, JavaScriptでフロントエンドを作り、バックエンドをC, C++, Python, Go, TypeScriptなどの言語で開発できる。システムにインストールされているWebブラウザで動作する https://webui.me/webui.me 2023年にhassandragaさんが公開し、V言語コミッタのttytmさんらも参加した 本体はCで開発されていて、Python, Go, TypeScriptにバイディングが提供されている 似た技術としてはElectronやTauri、Gluonなどが存在する laiso.hatenablog.com zenn.dev アーキテクチャについて ElectronやTauriと比較すると、WebUIのアーキテクチャはWebアプリをブラウザで開くだけなのでより単純かつ制
これは本当に、かなりお勧めの解説書です。 カピバラのかわいいイラストに癒やされながら、しっかりした知識が身につくHTMLとCSS、そしてWebデザインの解説書を紹介します。内容はかなり本格派。 HTML Living Standardに準拠したマークアップから、CSS GridやFlexboxなど、実務に役立つWebの知識がていねいに分かりやすく解説されています。 初心者向けの解説書ですが、Web制作を仕事にしたい人向けなので、中級者でもかなり学びのポイントがあると思います。一から学び直したい、現状のワークフローを強化したい、最近の知識を身につけたい人にもお勧めします。 版元様より画像をいただきました。 この「さまざまな工夫」というのがポイントです。私もいろいろな解説書を読んできましたが、非常によくできていると思います。詳しくは後述します。 普通の入門書だと短期間で卒業してしまうかもしれま
世界中にQwikを紹介した前回の記事では、 多くの要素についてざっと触れるに留まり、詳細については後で説明するとお約束していました。 Qwikとその背景にある設計思想を知る前に、まず私たち（業界）が現在の場所までどのようにたどり着いたかを理解しておくことが重要です。 現代のフレームワークはある前提のもとに成り立っており、 それが優れたTime to Interactive（TTI）スコアの実現を妨げているのですが、 その前提とはどのようなものなのでしょうか。 現行世代のフレームワークの現時点における限界を理解することで、 Qwikの設計思想がなぜ最初は驚くべきものに思えるのか、より深く知ることができるでしょう。 TTIについて TTIは、URLに遷移してからページがインタラクティブになるまでの時間を測定したものです。 レスポンシブなサイトとしての体裁を整えるには、サーバーサイドレンダリング
systemd は Linux の標準的なシステム・サービスマネージャで、sysvinit の代替の init プロセスとなることを目指して開発されたソフトウェアである。長らく色々論争が行われ、紆余曲折はあったものの、現在ではほとんどの Linux ディストリビューションが標準的に init として採用している。SysV のサービスが秘伝の起動スクリプトにより管理されてきたのに対して、systemd ではサービスを記述するユニットファイルによりサービスを管理する。黎明期は systemd の方は様子見で、SysV 用の起動スクリプトだけを提供するプロジェクトも多かったが、現在は systemd ユニットを標準的に提供するプロジェクトも増えている。 さて、サービスを管理する上で重要なことの一つがセキュリティだ。サービスは基本的に長期間動くプロセスで、権限も大きく、他のサービスとの連携も行われ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのattr()関数が進化！ HTML属性値を参照する新しい使い方 - ICS MEDIA
2025年、Web制作者がチェックしておきたいCSSの新機能のまとめ: CSSのワークフローがより便利になる新機能編
HTMLとCSSでつくる! 1文字ずつ変化するテキストのアニメーション - ICS MEDIA
Designing Beautiful Shadows in CSS • Josh W. Comeau
使ってますか? CSSの:is()と:not()で複数セレクタ管理をラクにしよう
HTML is Dead, Long Live HTML — Acko.net
ChatGPT にHTMLをプレビューさせるChrome拡張を作ってみた
EPUBファイルに何も問題がないのにKoboで非対応となるのはAdobeが原因だった
Stimulus 3 + Turbo 7 = Hotwire 1.0
Resumable な JavaScript フレームワーク Qwik を学ぶ | ドクセル
Functional HTML — overreacted
html-rewriter-wasmでHTMLをパースする - console.lealog();
もうHTMLをXHTMLで書くことは推奨されないという話 | フロントエンドBlog | ミツエーリンクス
Webフロントエンド基礎研修 ~歴史から学ぶ、現場のスタンダードな開発~
HTML attributes vs DOM properties
Sassの歴史から考える、ネイティブなCSSの利点 - ICS MEDIA
head内の各要素とその重みをリスト化し、プライオリティが高い順に並べ替えてくれるツール -capo.js
フロントエンドエンジニアに伝えたいアクセシビリティの基本 | 株式会社ヌーラボ(Nulab inc.)
Web制作者・デベロッパー向け、ポートフォリオ用のHTMLテンプレート -Dopefolio
Chromeの新機能「メモリセーバー」と「省エネモード」Web制作時に認識しておくべき重要なことを解説
アクセシビリティーに考慮するHTMLコーディング - WAI-ARIAでスクリーンリーダーの読み上げがこう変わる - ICS MEDIA
<svg>ではaltが使えないからaria-labelはロジックをすっ飛ばしている - 水底の血
Web制作者はチェックしておきたい！ モダンCSSやデベロッパーツールなど、これからの実装に役立つ新機能のまとめ
z-indexの値は「無限」と「2147483647」どちらが強いの？
Web制作者にかなりオススメの解説書！ HTMLとCSSの今のテクニックを基本からしっかり学べるカピバラ本
クロージャによる死（とQwikによる解決方法） | POSTD
Systemd ユニットのセキュリティスコアを改善する
oniiwa.net
www.smartnews.com
www.smartnews.com
note.com/light_squid9820
oniiwa.net
www.nicovideo.jp