サイケデリックで目の痛いデザインで有名な旧愛生会病院のホームページをCSSアニメーションで再現してみるサンプル。 旧愛生会病院のホームページ（Wayback Machine）https://...

このブログの記事内で使っているアラート表示の装飾。ブログ記事作成に役立つ。 デモ ボタンを押してください この記事は2年以上前に書かれたものです。 乾燥剤は食べないでください。 ...

CSSアニメーションはロード直後に0%から開始するが、ページを開いていつも同じ場所から始まるのはつまらないのでJavaScriptで開始位置をランダムにしてみる。 デモ15秒周期でグラデー...

CSSのGridでレイアウトを組んでいて、グリッドアイテムにcodeブロックが含まれている場合に、横幅がGridの横幅をはみ出し制御できなくなる現象を解決する方法。 前提条件<div...

このブログの文字サイズはすべて調和数列に基づいて設定している。これについては下記のサイトで提言されているものを参考にした。 文字サイズの比率と調和 - シフトブレイン／スタンダードデザインユ...

リセットCSSといえば、destyle.cssとかnormalize.cssとかress.cssなどいろいろあります。 当ブログではressを使っているのですが、これを当てると<sel...

Twitterは公式アカウントを情報収集目的で見るくらいで、他人の反応とかトレンドとか1ミリも興味ねえよ！って方向けの、PC版Twitterをカスタマイズする記事です。 Twitterの右カ...

このブログのトップページのページャーで、disabledになっているボタンにhoverしたとき、cursorをnot-allowedにしようとしたらうまく適用されず、気になって調べたことのメモ。...

CSSを動的にセットしたいときに便利なJavaScriptの関数の雛形です。 動的にセットしたいという際には、<style>タグの中に書いたCSSをhead間に差し込みたいときと...

ページ上のコードにシンタックスハイライトを適用するのに、highlight.jsというプラグインがあります。 ハイライトのスタイルもたくさんの種類が用意されていて、当ブログでは今までatom-o...

Google Adsenseは広告が表示されるまでに時間がかかります。空白の部分にいきなり広告が現れるとなんかびっくりするというか… ということで、広告が表示される前にローディングスピナーを...

サイトを開くたびに色が変わったらなんか面白いのでは？と、ふと思いついたので、JavaScriptでランダムに生成したカラーコードを、CSS変数に代入して遊んでみます。 半分お遊びですね。 デ...

目に見えるところに貼るほど重要ではないけど、開閉メニューでリンクを格納しておきたいというケースがあるかと思います。 今回はボタンクリックで開閉するシンプルなドロップダウンメニューを、HTML...

最近はブログにリンクを貼る手段として、テキストリンク以外にも、カード型のリンクを埋め込むことが増えてきました。 よく見るブログカードは、サムネイルや投稿日時などのメタデータが盛り込まれていて...

昨年(2019年)あたりからダークモードが流行しているということで、様々なデバイスやアプリでダークモードが実装されています。というわけで、少し前にこのブログもダークモードに対応させました。そのと...

サイトをレスポンシブデザインに対応する際には、メディアクエリを使って書き分けたり、上書きしたりする必要があります。 しかしメディアクエリを書くのは、たとえSassやStylusのmixinを...

HexoではHelperという機能が備わっており、よく使う機能は簡単に出力できるようになっています。その機能を利用すると下のように記述することで、簡単にカテゴリー一覧を出力できます。 &lt...

Lightboxという単語は死語感が漂っており、今どき需要もなさそうですが…。 というのはさておき、このブログで画像拡大プラグインを導入するにあたり、Photoswipeが候補に挙がったので...

HTML5で追加された属性にcontenteditableというものがあります。これを付けることで、あらゆる要素のテキストノードの編集が可能になります。ブラウザ版Twitterのツイート入力フォ...

今回はHTMLとCSSのみでコンテンツの開閉、いわゆる「続きを読む」を再現してみます。 CSSだけでクリックイベントを扱うには、主にtargetを使う方法とチェックボックスを使う方法がありま...