【令和最新版】Google Fontsの読み込み最適化の結論 ｜ TAKLOG
当ブログで行ったGoogle Fontsの読み込み最適化を紹介します。CLSを大幅に改善できたので個人的にはこれが最適解だと思っています。 結論いきなり結論ですが、次のHTMLのhrefの値を使用しているGoogle Fontsのそれに変更し、head内で読み込んでください。 <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preload" as="style" fetchpriority="high" href="{href}" /> <link rel="stylesheet" href="{href}" media="print" onload='
Top Front-End Tools Of 2023 — Smashing Magazine
Who doesn’t love a good front-end tool? In this roundup, you’ll find useful front-end tools that were popular last year and will help you speed up your development workflow. Let’s dive in! Over the past 12 months, I’ve shared hundreds of tools in my newsletter, Web Tools Weekly. I feature tons of practical libraries, helpers, and other useful things for front-end and full-stack developers. These t
Squoosh
SmallSmaller images mean faster load times. Squoosh can reduce file size and maintain high quality. SimpleOpen your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files. SecureWorried about privacy? Images never leave your device since Squoosh does all the work locally.
Scroll progress animations in CSS | MDN Blog
Scroll-linked animations can often add a touch of class to a website, but have long been the preserve of JavaScript. Now a brand new specification is being implemented to enable us to create rich scroll-driven experiences with CSS! When we think of scroll-driven animations, we generally mean one of two things: An animation that occurs as the user scrolls, with the progress of the animation explici
CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法
2022年9月24日 CSS, JavaScript ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね。 ローディングアニメーションの設置手順 こんな感じで、最初にローディングアニメーションを表示させ、ページを読み込んだらコンテンツを表示させるページを作ってみましょう。よく「CSSだけで実装できる！」なんてうたわれている場面もありますが、多くの場合アニメーション部分のみのおはなしで、実際にページの読み込みを認識させるには簡単なJavaScriptも必要です。 1. ローディング画面の用意 まずはコンテンツを用意しましょう。上部にローディングアニメーションを表示させる d
prefers-reduced-motionでアニメーション（視差効果）を減らす設定をしたデバイスに対応させる
2023年2月7日 CSS, アクセシビリティ アニメーションのあるWebページって、見るのも作るのも好きなんですが、みなさんはいかがでしょう？中には動きが苦手で目が疲れてしまう、画面酔いしてしまう…なんていう方もいらっしゃるかと思います。今回はアニメーションが苦手な方のためにWebサイト側でできることを考えてみます。 ↑私が10年以上利用している会計ソフト！ アニメーションを減らす設定 アニメーションによって画面酔いしてしまったり、動きがつくと内容が理解できなくなるという方は、OS側で視覚効果を減らす設定をしているかと思います。そういった設定をしている場合は、CSSでWebサイトのアニメーションもなくす、あるいは軽減させる指定が可能です。 設定方法 まずはアニメーションを減らすためのOS側の設定方法から紹介します。 Windows 10: 設定 → 簡単操作 → ディスプレイ → アニメ
SEOに最適なキーワード調査ツール16選 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
SEOツールと呼ばれるツールは数多くあり、そのすべてを把握することは非常に難しいでしょう。機能も様々あり、用途に合ったツールを選択したいものです。SEOツールを使用するシーンは複数考えられますが、キーワード調査にツールを使用すると、効率よく進められるはずです。今回は、「キーワード調査」に用途を絞ったSEOツールを解説するSearch Engine Journalの記事を紹介します。 よく使うツールの無料版、「ビッグ3」と呼ばれる有料ツール、さらに、あまり知られていないツールを含め、我々はキーワード調査に最適なツールをレビューした。 SEO担当者であれば、調査ツールを使用しないでキーワード調査を行うことは、非常に困難であると理解しているだろう。また、月間の検索ボリュームのデータも含めた包括的なリストの作成となると、ほぼ不可能と言えるだろう。 キーワード調査はSEOの戦略の中でも重要な部分であ
【WordPress】カテゴリースラッグと画像ファイル名の重複で投稿記事が表示されないことがある！ - BtoBクリエイターズTIPS｜株式会社アドミューズ
ホーム> BtoBクリエイターズTIPS> BtoBサイト制作> 【WordPress】カテゴリースラッグと画像ファイル名の重複で投稿記事が表示されないことがある！ 特定のカテゴリの投稿記事のみ表示されないトラブルは、アップロードされた画像が原因だったお客様から実際に問い合わせがあった症状を、 ローカル環境に再現して検証してみました。 投稿カテゴリーが複数あり、あるカテゴリーに登録した投稿記事のみ アーカイブ（一覧）ページは表示されるのに記事詳細ページは表示されないといった症状でした。 該当カテゴリーのスラッグを変更したり、 登録カテゴリーを変更すれば表示されるのですが、 もちろん登録カテゴリーは変更したくないし、 カテゴリーのスラッグも変更したくないとのことで原因を探りました。 検証環境WordPress ver 5.5 PHP Version 7.4.2 MySQL 5.7.26 使用
【WordPress】親カテゴリーのテンプレートを子カテゴリーにも適用する方法
WordPressでは、カテゴリーごとにテンプレートファイルを用意することで、それぞれに個別のテンプレートを適用することができます。 しかしその場合、カテゴリーごとにひとつずつテンプレートファイルを用意しなくてはならず、子カテゴリーに親カテゴリーと同じテンプレートを使用したい場合(結構多いはず)には、それぞれのテンプレートファイルを別々に用意しなくてはなりません。 そういった場合に、子カテゴリー用のテンプレートファイルを用意しなくても、子カテゴリーに親カテゴリーのテンプレートファイルを適用する方法。 function.phpに下記ソースを追加します。 function.php //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //親カテゴリーのテンプレートを子カテゴリーに適用 add_filter( 'ca
ExcelからHTMLテーブル変換 Ver.2
インデント trとtdの改行 テーブル表現 セル内改行 thやdtの使用 セル内のタグ リンク 画像 class style width height valign align cellspacing cellpadding border class, style, width, height, valign, align, cellspacing, cellpadding, border 等はExcelコピーで保持される内容がそのまま出力されます。 borderやその他多くの書式はclassで定義されています。(スタイルシートは別途記述が必要)
【2秒】アイキャッチ画像をbackground-imageで出力する【WordPress】
こんにちは！フリーランスエンジニアののせっち@nosecchi01です。 ワードプレスのサムネイル（アイキャッチ）をbackground-imageで使う方法をご紹介します。 コードをコピペするだけなのなら一瞬で終了します。 というわけで、早速コードを紹介 $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo '<div style="background-image: url('. $url.')"></div>'; the_post_thumbnailは<img>タグを返しますが、どうしてもbackgroundでいきたいときがありますよね。 →urlを取得してあげればOKです。$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID)
クリッカブルマップのレスポンシブ対応はjQuery非依存の「image-map-resizer」が良い感じだった | ma-ya's CREATE / WEB DESIGN
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。 たまーに実装するクリッカブルマップ。 もう枯れた技術になりつつあるのか、レスポンシブ対応するとなるとプラグイン選びが意外と悩まかったりします。 定番の「jQuery RWD Image Maps」が正直微妙 長く定番だった「jQuery RWD Image Maps」ですが、時代は脱jQuery。 案件によってはパフォーマンスなどの観点から、jQuery非依存でレスポンシブなクリッカブルマップを実装したいんじゃ！ というシーンも少なからずあるんじゃないかと思います。 ただこのプラグインにはそれ以外にも（個人的に）致命的に使いづらい点があります。 jQueryのバージョンに依存する 「jQuery RWD Image Maps」は古いプラグインのため、jQueryのバージョンが新しいと動作しないケースがあります。 ※jQu
30 Practical Tips for Effective User Interface Design
A well-designed user interface can make a significant difference in the success of a product. I’ve compiled a list of 30 tips to help you improve your user interface design skills. These tips cover everything from layout and colour to typography etc.., and they’re suitable for both beginners & experienced designers looking to enhance their skills. So, let’s dive in 1. Linear gradient to show contr
Shuffling Typography Animation | Codrops
A shuffling type animation with various effects for a geeky terminal look. The other day, I stumbled upon a captivating type animation created by Andreas Gysin. I was immediately inspired and decided to experiment with similar effects. You can witness the brilliance of Andreas’ animation on his project site LCD 1 and also on his website. This totally geeky effect looks like some terminal applicati
Our top Core Web Vitals recommendations for 2023
Over the years, we at Google have made a lot of recommendations to web developers on how to improve performance. While each of these recommendations, individually, may improve performance for many sites, the full set of recommendations is admittedly overwhelming and, realistically, there's no way any one person or site could follow all of them. Unless web performance is your day job, it's probably
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】JavaScriptを使わずにハンバーガーメニューを作る
CSS Animation Libraries: 10 Popular Choices
Some More On-Scroll Typography Animations | Codrops
Safurai | Assistant for Developers - AI Coding Tool
ナッジ：野心のあるUXライターのための、6つの学び