WordPressを劇的に高速化、1秒以内に表示されるフロントエンドの構築方法 -Zero-latency WordPress Front-end

サーバーサイドのレンダリング(SSR)を使用して、数分の1秒以内にページが高速に表示されるWordPressのフロントエンドを構築するテクニックを紹介します。

バックエンドのキャッシュと組み合わせることで、非常に高速になり、しかも安価にWordPressサイトを構築できます。

待ち時間ゼロ!高速に表示されるWordPressを構築する方法

Zero-latency WordPress Front-end -GitHub

続きを読む

コリス限定で全員にプレゼント!春のデザインにぴったりな草花をあしらったベクター素材 -Spring Floral Designs

お馴染みの freepik.com 提供によるデザイン素材をコリス限定で全員にプレゼント!
もちろん個人でも商用でも無料で利用できます。

今回は、春のデザインにぴったりな草花をあしらったベクター素材です。

素材のキャプチャ

続きを読む

Vue.jsで実装された、サーバーサイドのバリデーションを自動表示するフォームのコンポーネント -FormVuelar

サーバーサイドのバリデーションを自動的に表示するようにVue.jsで実装されたフォームのコンポーネントを紹介します。

ベーシックなフォームをはじめ、ファイルアップロード、ドロップゾーンなど、最近よく利用されるフォームのコンポーネントが揃っています。

サイトのキャプチャ

FormVuelar
FormVuelar -GitHub

続きを読む

CSSリセットにも新しい動きが!最近の実装に合わせて、見直すきかっけになる新しいCSSのリセット -CSS Remedy

最近、CSSのリセットを見直す動きが少しずつあるようです。
2018年おすすめのCSSリセット!「Reboot.css」の特徴と使い方を解説CSSリセットの2019年用私流カスタマイズ方法など、当ブログでもCSSリセットの記事を公開しました。

今回紹介するのはMozilla Developerによる新しいプロジェクトで、後方互換性を備えつつ、現在のデスクトップやスマホの環境に合わせたCSSリセットです。

サイトのキャプチャ

CSS Remedy -GitHub

続きを読む

ついにこの時がきてしまった、、、Adobe Creative Cloudの価格改定が一斉に実施されています

先日、当ブログのAdobe Creative Cloud 価格改定のお知らせでもお知らせしたように、Adobe Creative Cloudの価格改定が、2/12に実施されました。

サイトのキャプチャ

Creative Cloudのプランと価格

続きを読む

スマホ対応の優れもの!クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト -instant.page

ユーザーがリンクをクリックする際のhoverとタップする際のtouchstartに合わせて、クリック・タップする直前にページのHTMLをプリロードし、高速に表示するわずか1kBの超軽量スクリプトを紹介します。

ページに外部スクリプトを1つ加えるだけの簡単実装です。

サイトのキャプチャ

instant.page
instant.page -GitHub

続きを読む

CSSの実践的なテクニックが参考になる!最近のCSSに追いつけていない人にお勧めの良書 -CSSレシピブック

Web制作の進化は本当にスピードが速く、中でもCSSの進化は非常に速く感じます。とは言え、CSSの場合はサポートブラウザのこともあり、最新のものだけを使用すればよいというものではありません。

CSSの最近の情報やテクニックを解説し、古いブラウザから新しいブラウザまで対応したさまざまな実装方法を詳しく解説した制作者必携の一冊を紹介します。

本の表紙

続きを読む

position: sticky;の仕組みや実際の使い方をやさしく解説

position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける(スティッキー)便利なプロパティです。

position: sticky;の基礎知識、機能の仕組み、そして実際にどのようなコードで機能し、機能しないのか、便利な使い方などを紹介します。

position: sticky;の使い方を解説

CSS Position Sticky - How It Really Works!
by Elad Shechter

続きを読む

top of page

©2019 coliss