CSS

現在、3つのサイトを運用しているのですが、やっと最後のサイトを完全オリジナルテーマに変更しました。サイト「＠半径とことこ60分」公開はてなブログから WordPress に移行したのが...

前記事「GIMP 初期状態に戻す、パスツールを使う」では、GIMP で葉っぱの SVG ファイルをつくり画像を切り抜く過程を記事にしましたが、その際、CSS のプロパティ clip-path がなかなか思うような結果を...

WordPress のテーマ開発をプラグインの wp-scss から node.js 上で gulp を走らせる方法に変えましたので、この際、CSS の設計思想に FLOCSS というものを取り入れてみようと思います。...

CSS だけでスムーススクロールが実装できる scroll-behavior: smooth は簡単でいいのですが、デメリットも多く、一番抵抗のあるのはブラウザの履歴に残ることです。スムーススク...

テーマをゼロから作ってみる（7）です。忙しくてなかなか進みません（笑）。現在運用しているサイト、このサイトもそうなんですが、Genesis Framework を使っています。それをゼロから自作してみようという...

ページ内のリンクをスムーズに移動するには、CSSのみ、jQuery、素の Javascript といろいろ方法があり、とにかく一番簡単なのは一行ですむ CSS による方法ですが、残念ながらイージングが指定できません。...

CSSの擬似クラス、nth-of-type は nth-child とともにリストの中の何番目などと指定する場合によく使います。その２つの違いは理解していても、クラス名に対して指定する場合は要注意です。今回ハマったケー...

CSSの小ネタです。文字を一文字ずつ表示するCSSだけで文字を一文字ずつ表示するアニメーションです。おお、やった！Javascript使わなくてもできるじゃんと思ったんですが、どうやらネット上に...

サイトのメニューをオーバーレイで出す場合には、その要素に position:fixed を指定する場合が多いと思いますが、要素の長さがデバイスの表示高よりも長い場合にスクロールさせ、かつ非タッチデバイスの場合にスクロー...

やっとこのブログのテーマを変えることができました。変えようと思い始めて数ヶ月、なのに印象はあまり変わらない結果となりました（笑）。白ベースを基本にしていますのでまあこんなもんでしょう。変更のポイントをあ...

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス（4）。正月休み中にもほんとど触れずいっこうに進んでいません。今回はサイドバーモジュールを本文下に横並びで並べた時に高さを揃えようと思い...

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス（3）。なのに忙しくて一向に進みません（笑）。レスポンシブデザインのブレイクポイントについて考えてみます。まず...

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス（２）。フォントサイズをビューポート（表示幅）に応じて自動で変化させます。表示幅によってフォントサイズを可変に...

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス。パンくずリストのカスタマイズこんなイメージです。パンくずリストの最後の項目、つまり表...

デバイスの表示領域が縦長か横長かで CSS を変更したいと思ったことはありませんか？CSS メディア特性 orientationメディアクエリのメディア特性に orientation ...

aタグやクリックイベントを持った要素の領域を保持したまま、css だけでフェードインしたりフェードアウトしたりする方法です。必要なときはさほど多くないと思いますが、これが一番簡単かなという方法を思いつきましたの...

実はもうすでにこのブログやテーマストアで公開しているテーマでも基本レイアウトには Grid Layout を使っているのですが、もっと活用できないかといろいろやってみましたら、はてなブログのコンテンツ内でもかなり便利に...

サイトをレスポンシブでデザインする際、画像をいくつか並べて、その縦横比を維持しながら、どんな画面サイズでも指定の横幅いっぱいに美しく並べる方法です。こういうことです。サイト：そんなには褒...

オフキャンバスメニュー付はてなブログテーマ（開発環境）前記事「はてなブログをグリッドレイアウトとDOM操作モジュールでカスタマイズ」で予告しておきました「はてなブログDOM操作モジュール imzModules...

CSS Grid Layout の auto-fit を @mixin で実現「CSS Grid Layout の auto-fit を擬似的に IE11 で実現させる」の続きです。IE11 では対応し...

WordPress のCSSにFLOCSSを導入する