簡単な手順で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ページの体感的な読み
What's new in web UI
Prepare to be dazzled by a symphony of fluidity, dynamism, and expressive power as we unveil the next generation of web UI. It’s a world where user experiences transcend the ordinary and developers become true visual orchestrators. Discover how you can turn 7,000 lines of JavaScript into a mere 7 lines of declarative HTML and CSS, unlocking unprecedented levels of efficiency and elegance. Resourc
CSSで文節の折り返しを！ br・wbrとauto-phraseの活用術 - ICS MEDIA
ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。 この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。 ▼固定幅で折り返し どこで生れたかとんと見当がつかぬ。何で も薄暗いじめじめした所でニャーニャー泣 いていた事だけは記憶している。 ▼文節での折り返し どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している。 本記事では、HTMLコーディングにおいて改行・折り返し方法の選択肢を整理し、最適な方法について考察します。 この記事で紹介すること <br />と<wbr />タグを使った改行指定 CSSのword-break: auto-phraseを使った自動折り返し JSラ
Outlookに勝てるHTMLメールコーディング vol.2「レスポンシブ設計編」 - Qiita
前回に引き続きメールコーディングのちょっとしたコツをつらつらと書いていきたいと思います。 ちなみに前回の投稿はこちらから。 Outlookに勝てるHTMLメールコーディング vol.1「table構成編」 あんまり関係ないけどファイル構成 特にレスポンシブ対応には関係ないのですが、HTMLメールのコーディングってとにかくコードが長く、インデントも煩雑になっていきませんか？ 今回長文のコードを書くに当たって、ファイル分割してコーディングしています。 共通化できる場所を別ファイルとして作成しておけば、一括でヘッダなどの内容も変えることが出来ますし、何よりコードの可読性があがります。 分割したファイル構成 <!-- ヘッダの設定 --> <%= render :partial => '/user_mailer/template_head' %> <body class="res" width="
Outlookに勝てるHTMLメールコーディング vol.1「table構成編」 - Qiita
メールコーディングをする上で重要なポイント <table>タグを組むときに colspanや rowspanを使わないように組み立てる 半角スペースは極力削る(Gmailは文字数やファイルサイズが大きいと制限で切られてしまうため、なるべく無駄な空白は削ったほうが良い) 画像のパス指定は 'http://' から記述 スタイルはインラインに記述、レスポンシブ対応はヘッダのCSSに記述する Outlook対策 画像のサイズは必ず width="size" height="size"を指定する(これを書かないと、元の画像サイズで表示されてしまう。どちらかをautoにしたい時は、 width="300" height="*"と書く。 pxは書かない 、 *はauto という意味になる。) 今回の記事で実機確認しているのは、以下の通り。 Mac Mail Gmail(Chrome/FF) Inbox
レスポンシブHTMLメールの作り方とは？【初心者向け】
レスポンシブHTMLメールとは、PCやスマートフォンなどのデバイスの画面サイズに応じて、自動的にレイアウトや画像サイズを最適化して表示するHTMLメールのことです。1つのソースで様々なデバイス表示に対応することができます。 しかしながら、HTMLメールのレスポンシブ化の方法や手順は、Webサイトのレスポンシブ化とは少し異なる点があります。既にレスポンシブデザインを理解しているWebサイト制作者の方でも、HTMLメール用のレスポンシブ化について学んでおく必要があるでしょう。 本記事では、多くのメールクライアントで正しく表示される、シンプルなレスポンシブHTMLメールの作成方法を具体的なコーディング方法も交えながら、初心者の方にもわかりやすく解説します。
レスポンシブ対応のHTMLメール用のシンプルなテンプレート（テキスト形式にも対応）
Responsive HTML Email Templateの使い方 使い方は簡単です。 「email.html」を使って、HTMLメールを作成します。 作成が完了したら、CSSをインラインにします。 これで、完了です。 CSSをインラインにする時は、下記のツールが便利です。 HTMLメール用のコードの完成 コードの下には、テキスト形式のメールでの表示も確認できます。 見出しの天地に罫線が自動で入るんですね、面白い！ Responsive HTML Email Template HTMLメールのベースとなるテンプレートです。 ※使用する際は、CSSをインラインにします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ
最近のCSSは進化が早く、またブラウザはエバーグリーン（自動で最新版にアップデートするブラウザ）になり月一ペースでアップデートされ、モダンCSSの機能もたくさんサポートされました。 CSSの新機能をはじめ、ブラウザのサポートが充実した機能を紹介します。2024年はこれらのモダンCSSを使用する機会が増えますね。 :has()疑似クラスがすべてのブラウザにサポートされました CSSのコンテナクエリ CSSのスタイルクエリ CSSのネスト CSSの@scopeはセレクタの適用範囲を設定できる CSSで三角関数が使用できるようになった スクロールをトリガーにしたアニメーションの実装が大きく変わる 今までは面倒だったことが簡単に実装できるようになった新機能 知っておくと便利なCSSの知識とテクニック HTML関連も少しだけ :has()疑似クラスがすべてのブラウザにサポートされました まずは、:h
CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack
当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。 CSSでCPUのようにデータを継続的に解析し、状態を再評価します。簡単に言うと、スクリーンの高さや幅を取得したり、マウスの座標を取得したり、さらにはブロック崩しなどのゲームもCSSのみで実装できます。 もう私が知っているCSSをはるかに超えたCSSです。 Expert CSS: The CPU Hack br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのエキスパート: The CPU Hack 5つの観測可能性 The CPU Hackの始まり The CPU Hack 終
Web パフォーマンスのための HTML 最適化 | メルカリエンジニアリング
Merpay Advent Calendar 2019 の2日目は @1000ch (id:hc0001) がお送りします。この記事は2019年11月16日に福岡で開催された Frontend Conference Fukuoka 2019 のセッション、HTML Optimization for Web Performance の書き起こし記事です。 docs.google.com なぜ HTML の最適化が重要なのか 先日公開された Chromium Blog: Moving towards a faster web をご覧になられたでしょうか。Google は Web ページのパフォーマンスの重要性を様々な形で啓蒙してきましたが、この記事では Chrome のもとになっている Chromium に、Web ページのパフォーマンスをブラウザ UI として表示する機能を追加し、ユーザーが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS と UI | CSS and UI | Chrome for Developers
Movable Typeの記事を一括で移行する手順 | Coding Methodology | CFニュース | CODING FACTORY - コーディング専門サービス