プログラミング - CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

IE11 で使えない CSS プロパティ：値（メモ）普段ほとんど IE のことは頭から落ちてしまっていますが、時々 IE ではどんなんかな？と見てびっくりすることがあります。で、IE っていつまでサポートされて...

rgba の16進数表記 #rrggbbaa はダメだって!？通常、ブラウザは Chrome か Firefox を使っていますので、IE はもとより Edge も、チェック時以外はほとんど立ち上げることもあり...

タッチデバイスでもないのに ontouchstart でタッチデバイスの振りをするノートがある別ブログ「そんなには褒めないよ。映画評」のトップページのデザインで、マウスオーバーのイベントをタッチデバイスの場合に...

モーダルの背景のスクロールを止めるはてなブログのテーマをレスポンシブで作る際に、あれ？ なぜ？ と、ちょっと手間取った CSS ２題です。どちらもモバイルのメニューなど、モーダルウィンドウに関してです。...

はてなブログ／touch, mouse を振り分け、hover イベントを統一する:hover のないタッチデバイスで同等のイベントをどう実装するかの記事です。タッチデバイスでの実装については、すでに「...

はてなブログ／スマホなどタッチデバイスの :hover イベント対応映画のレビューを書いている別ブログ「そんなには褒めないよ。映画評」のデザインを変更しようとしているのですが、スマホの UI で停滞しています。...

CSS3 の Flex レイアウトをご存じですか？当サイトでも、過去記事、www.imuza.comで紹介しているのですが、Flex レイアウトとは、これまでレイアウトに floatを使っていた...