background-imageの表示ラグ問題を（ほぼ）CSSのみで実装するCSS遅延読み込みで解決
ベストプラクティスとも限らないですが、プレーンなHTML・CSSサイトでも手軽に実装できる方法を紹介します。 background-imageの一瞬表示されない問題 CSSのbackground-imageはその画像が表示されるまで読み込まれません。例えばユーザーのアクションに応じてbackground-imageを変える場合、変更後の画像はユーザーアクションが行われてから初めて読み込まれます。（この読み込みは初回のみ行われるので、2回目以降は発生しません） 遅延表示のサンプル より具体的な現象としては、独自デザインのラジオボタンやチェックボックスをクリックした時、初回のみ一瞬遅れて表示される、というのがあります。他にもdisplay: noneで非表示にしている要素を表示させた場合でも同様の表示ラグが発生します。 ▼初回のみ表示が遅くなっている様子（分かりやすくするためにネットワーク速度
レンダリングを妨げるリソースの除外/CSSを非同期で読み込む PageSpeed Insights や Chrome の拡張機能 Lighthouse を使ってページをテストすると「レンダリングを妨げるリソースの除外」という項目が表示されることがあります。 この項目が表示される原因の1つは CSS ファイルの読み込みなどのレンダリングブロックによる表示の遅延です。 以下はレンダリングをブロックする CSS ファイルの読み込みを最適化してページの表示速度を改善させる方法と WordPress で CSS を非同期で読み込む方法の覚書です。 レンダリングのブロック 以下はあるサイトのページを PageSpeed Insights でテストした結果の一部抜粋です（同様のテストは Chrome の拡張機能 Lighthouse でも可能です）。 「改善できる項目」が複数表示されていて、その中に「レ
【CSS？ 良いCSS？ 悪いCSS？】 新人プログラマー必見！CSS設計の基本 公開日 : 2021.07.28 最終更新日 : 2022.10.05 コーディング はじめにこんにちは！AndHA新人コーダーのタイガです！ Webコーダーとして働き始めて、二ヶ月が経ち、ちょっとずつ仕事にも慣れてきました！ しかし、まだまだ必要な知識は盛り沢山、、、、。 前回は「新人プログラマーがセマンティック・マークアップを学習してわかったこと。」と題しHTMLのセマンティック・マークアップについて記事にしました！ 読んでくれましたか？ 今回はすごく大切なスキル「CSS設計」について書いていこうと思います。 CSSとは？知ってるよ！と言われそうですがあらためておさらいです。(私個人のためにも) CSS(Cascading Style Sheets、カスケーティング・スタイルシート)とは、Webページの見
hover時などに使えるcssアニメーション集7選
ここ最近は前以上にアニメーションをcssに頼るようになってきた気がします。 今回は主にhover時のアニメーションのコードを配布してくださっているサイトをご紹介します。 使用時の注意事項などは各サイトをご覧ください。 Hover.css サイトへ お馴染みHover.cssです。嫌味がなく使い勝手のいいアニメーションがそろっています。 CSS ANIMO サイトへ hoverとローディングのアニメーションがそろっています。 要素をクリックするとコードのコピーができます。hoverした時に下線を引くアニメーションなどでもいくつかパターンを用意してくれています。 Magic Animations CSS3 サイトへ hoverだけじゃなくてスクロール時などにも使えそうなアニメーションがそろっています。 ちょっと癖は強めですが、インパクトがあります。 Css Effects サイトへ hover
教科書にはのっていないCSSテクニック5選
CSS、参考書や講座で登場してくるセレクタやプロパティ以外にも、たくさん便利そうなモノがあるってご存知でしょうか？ 今回は特に最近各種ブラウザーが対応はじめたセレクタやプロパティをご紹介させて頂きます。 「おっ、それやったら JavaScript を組まなくても良さそうやな」というところもあると思いますので、参考にしてみてください。 【ご紹介するセレクタ】 scroll-snap sticky filter prefers-color-scheme grid "CodeCampus"はオンラインプログラミングスクール No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアです CodeCampとは？（受講生体験記） 「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。元バレエダンサーの挑戦普通の文系大
Jekyllについて Jekyllは、GitHub Pagesに組み込まれている静的サイトジェネレータで、ビルドプロセスを容易化できます。 JekyllはMarkdownおよびHTMLファイルを取り込み、選択したレイアウトに基づいて、完成された静的ウェブサイトを作成します。 Jekyllは、Markdownと、サイトに動的コンテンツを読み込むテンプレート言語のLiquidをサポートします。 詳細については、「Jekyll」を参照してください。 Windows は、Jekyll を公式にはサポートしていません。 詳細については、Jekyll ドキュメントの「Jekyll on Windows」を参照してください。 GitHub Pages ではJekyllを使用することをおすすめします。 お好みに応じて、別の静的サイトジェネレータを使用することも、ローカルまたは別のサーバーにおけるビルドプロ
プログラミングの独学をしようと考えたとき、「どっから勉強すればいいんだ…？」と早速壁にぶち当たる人も多いのではないでしょうか？ 「プログラミング学習」といっても、知識”0”の状態でこれから独学で身に着けようと考えている人には、何を勉強したらいいのかイメージが難しいと思います。 今回はプログラミングを独学するのに、具体的にどんな学習が必要なのかをご紹介していき、少しでもプログラミング学習のイメージを持ってもらえたらと思います。 初心者はプログラミング学習のイメージが難しい どんな勉強をすればいいの？ フロントエンドの学習 サーバーサイドの学習 DB(データベース)の学習 オブジェクト指向の学習 フレームワークの学習 開発工程の学習※転職を考えるのであれば 目的別の勉強種類 ブログ・サイト運営 ゲーム・アプリ開発 サーバー構築・インフラ整備 プログラミングの独学は無理ではないが難しい オンライ
jQueryでほぼ一行で、ページを開くとスクロールして一番下の文章を表示させるテキストエリアを作成 - なるの備忘録
ページを開くとスクロールして一番下の文章を表示させるテキストエリアを作ります。 履歴一覧など、ユーザには基本的には最新の情報を見せたいけど、過去の内容も見せたいってときに使えそうですね。 jQueryでほぼ一行で実装可能です。 動作イメージ ページを開いた瞬間からテキストボックスの中が自動的にスクロールされます。 あっという間に一番下の文章が表示されます。 テキストボックスの中でスクロールすると一番最初の文章まで見られます。 論よりコード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charaset = "utf-8"> <title>勇者とモンスター</title> <link rel="stylesheet" type="text/css" href="style.css?<?php echo date("YmdHis"); ?
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レンダリングを妨げるリソースの除外/CSSを非同期で読み込む
【CSS？ 良いCSS？ 悪いCSS？】 新人プログラマー必見！CSS設計の基本 | AndHA Blog
GitHub PagesとJekyllについて - GitHub Docs
プログラミングを独学で身に着けるおすすめの手順 - うさぎ日和