最も簡単にwebフォントの読み込みを遅延させる方法
web フォントは <head>タグ内で読み込むため、web ページのレンダリングを遅延させてしまいますが、デザイン面においてフォントは重要な要素です。 今回は Google Fonts を使用したフォントの読み込みを遅延させ...
Web
!important な CSS を上書きする
デフォルトの CSS を上書きしたくても !important で宣言されてしまっている場合、どうやって上書きすれば...と思っていましたが、結構簡単にできるんですね。
Node.js 上のウェブサイトで HTML, CSS 等を読み込む
Node.js で HTML ファイルからレンダリングするのは難しいことではありませんが、Python + Flask のときと同じ感じで書いたらはまりました。
WordPress の DDoS 攻撃対策
WordPress を使い始めて二年半になりますが、Jetpack からよく「ダウンしています」と通知が来ます。たぶん前にも書きましたね。毎度 CPU 使用率とディスク I/O が高まり、とうとうさくらの VPS が CPU リソース制限を...
Bootstrap でサイト構築の高速化
Bootstrap v4.0 を使ってホームページを作り直しました。コンテンツが大したことないためにメリットを最大限に活かしきれてないのが悲しいですが、これはめちゃいいです。
HTML の記述で謎に思ったこと 8 選
HTML を始めて書いた頃には、なぜどんなときに必要なのか、どうしてそう書いてるのかがわからないような記述がたくさんありました。今でもありますが。 基本的なことばかりですが、ざっとまとめてみたので軽く読み流してください。
CSSで鉛直方向に位置を調整する
CSS で左右中央にする場合は margin, width や text-align を指定すればいいですが、上下中央にする場合は height を指定しても何も起きません。 いつも padding で頑張っていたのですが、Faceboo...
Firebaseを利用したログインシステムの実装
Google の BaaS である Firebase を使うと、自分でサーバ上にデータベースを構築することなく簡単に会員サイトのログインシステムが作れます。 今回は Firebase Authentication と Cloud Fire...
WebサイトをPWAに対応させてみた
ユーザーエクスペリエンスを向上させる方法の一つとして、Progressive Web Apps の導入が考えられます。つい最近知ったのですが面白そうだったので、開発中の Web アプリに適用してみました。
Chrome DevToolsを用いて実機のAndroidスマホでデバッグする
Google Chrome には開発者ツールが付いているのをご存知の方はたくさんいると思いますが、スマホサイトのデバッグをしようと思ったら、このツールにある疑似的なエミュレータで済ませる人も多いのではないでしょうか。 私も普段はそうですが...