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

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

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

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

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

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

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

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

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

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

Google Adsenseでレスポンシブタイプの広告ユニットは、デフォルトではスマホ版で表示した際に、横幅が100%になります。 だったら<div>で囲ってpaddingを指定...

サイトのロゴやサイドバーのタイトルなどに、Google FontsでWebフォントを読み込み文字を装飾することがあるかと思います。 しかし、そのフォントを一箇所でしか使わないという場合は、S...

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

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

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

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

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

記事タイトルが長くなって折り返され、２行になってしまっている…だけど、文字サイズを小さくしてでも１行にきっちり収めたい…！！Webサイトをデザインしているときに、そんな場面に遭遇したことはありま...

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

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