記事の表示は投稿日時順です
WordPressのCSSにFLOCSSを導入する
2024.01.15
現在、3つのサイトを運用しているのですが、やっと最後のサイトを完全オリジナルテーマに変更しました。サイト「＠半径とことこ60分」公開はてなブログから WordPress に移行したのが...
画像をSVGで切り抜く clip-path, mask
2023.12.16
前記事「GIMP 初期状態に戻す、パスツールを使う」では、GIMP で葉っぱの SVG ファイルをつくり画像を切り抜く過程を記事にしましたが、その際、CSS のプロパティ clip-path がなかなか思うような結果を...
SassとFLOCSSでテーマ開発を効率化
2023.11.17
WordPress のテーマ開発をプラグインの wp-scss から node.js 上で gulp を走らせる方法に変えましたので、この際、CSS の設計思想に FLOCSS というものを取り入れてみようと思います。...
scroll-behavior:smoothは履歴に残る
2023.08.30
CSS だけでスムーススクロールが実装できる scroll-behavior: smooth は簡単でいいのですが、デメリットも多く、一番抵抗のあるのはブラウザの履歴に残ることです。スムーススク...
CSS：scroll-behavior:smooth を使わないわけ
2021.07.12
ページ内のリンクをスムーズに移動するには、CSSのみ、jQuery、素の Javascript といろいろ方法があり、とにかく一番簡単なのは一行ですむ CSS による方法ですが、残念ながらイージングが指定できません。...
CSS：クラス名にnth-of-type, nth-child を指定する場合の注意
2021.06.29
CSSの擬似クラス、nth-of-type は nth-child とともにリストの中の何番目などと指定する場合によく使います。その２つの違いは理解していても、クラス名に対して指定する場合は要注意です。今回ハマったケー...
CSS：文字を一文字ずつ表示する（タイプライター）
2021.06.26
CSSの小ネタです。文字を一文字ずつ表示するCSSだけで文字を一文字ずつ表示するアニメーションです。おお、やった！Javascript使わなくてもできるじゃんと思ったんですが、どうやらネット上に...
CSS：fixedの要素をスクロールバーなしでスクロールさせる
2021.06.06
サイトのメニューをオーバーレイで出す場合には、その要素に position:fixed を指定する場合が多いと思いますが、要素の長さがデバイスの表示高よりも長い場合にスクロールさせ、かつ非タッチデバイスの場合にスクロー...
はてなブログ：フォントサイズを動的に変化させる min(), max(), clamp()
2020.11.27
そろそろこのサイトのデザインを変えようかと思い始めての tips チップス（２）。フォントサイズをビューポート（表示幅）に応じて自動で変化させます。表示幅によってフォントサイズを可変に...
CSSでデバイスの縦長横長を判別 @media(orientation)
2019.12.27
デバイスの表示領域が縦長か横長かで CSS を変更したいと思ったことはありませんか？CSS メディア特性 orientationメディアクエリのメディア特性に orientation ...
CSS opacity: 0 のリンクを消す
2019.10.08
aタグやクリックイベントを持った要素の領域を保持したまま、css だけでフェードインしたりフェードアウトしたりする方法です。必要なときはさほど多くないと思いますが、これが一番簡単かなという方法を思いつきましたの...
はてなブログに CSS Grid Layout を使ってみる
2019.09.23
実はもうすでにこのブログやテーマストアで公開しているテーマでも基本レイアウトには Grid Layout を使っているのですが、もっと活用できないかといろいろやってみましたら、はてなブログのコンテンツ内でもかなり便利に...
CSS・画像の縦横比を維持してレスポンシブデザイン
2019.09.17
サイトをレスポンシブでデザインする際、画像をいくつか並べて、その縦横比を維持しながら、どんな画面サイズでも指定の横幅いっぱいに美しく並べる方法です。こういうことです。サイト：そんなには褒...
IE11 で使えない CSS プロパティ：値（メモ）
2018.11.07
IE11 で使えない CSS プロパティ：値（メモ）普段ほとんど IE のことは頭から落ちてしまっていますが、時々 IE ではどんなんかな？と見てびっくりすることがあります。で、IE っていつまでサポートされて...
rgba の16進数表記 #rrggbbaa はダメだって!？
2018.10.05
rgba の16進数表記 #rrggbbaa はダメだって!？通常、ブラウザは Chrome か Firefox を使っていますので、IE はもとより Edge も、チェック時以外はほとんど立ち上げることもあり...
タッチデバイスでもないのに ontouchstart でタッチデバイスの振りをするノートがある
2018.06.24
タッチデバイスでもないのに ontouchstart でタッチデバイスの振りをするノートがある別ブログ「そんなには褒めないよ。映画評」のトップページのデザインで、マウスオーバーのイベントをタッチデバイスの場合に...
モーダルの背景のスクロールを止める
2018.04.22
モーダルの背景のスクロールを止めるはてなブログのテーマをレスポンシブで作る際に、あれ？ なぜ？ と、ちょっと手間取った CSS ２題です。どちらもモバイルのメニューなど、モーダルウィンドウに関してです。...
はてなブログ／touch, mouse を振り分け、hover イベントを統一する
2018.04.16
はてなブログ／touch, mouse を振り分け、hover イベントを統一する:hover のないタッチデバイスで同等のイベントをどう実装するかの記事です。タッチデバイスでの実装については、すでに「...
はてなブログ／スマホなどタッチデバイスの :hover イベント対応
2018.03.30
はてなブログ／スマホなどタッチデバイスの :hover イベント対応映画のレビューを書いている別ブログ「そんなには褒めないよ。映画評」のデザインを変更しようとしているのですが、スマホの UI で停滞しています。...
CSS3 の display: flex がスゴイ！ はてなブログのカスタマイズに活用！
2016.11.12
CSS3 の Flex レイアウトをご存じですか？当サイトでも、過去記事、www.imuza.comで紹介しているのですが、Flex レイアウトとは、これまでレイアウトに floatを使っていた...