CSS– tag –
-
wordpress
[WordPress] ブロックエディターでパララックスを実装する方法
サイトの見た目がちょっとカッコイイ感じになるパララックス(Parallax)を実装するには、jsを使ったり結構手間がかかります。簡易版で良ければブロックエディタで手軽... -
tips
[CSS] 要素の幅を超えて横幅いっぱいにする方法
親要素の中の要素は横100%にしても親のサイズを超えられないので、画面の横いっぱい広げるには、親から出したり大変でした。CSSをちょっと追記するだけで横いっぱいにす... -
tips
[CSS] タイピングのアニメーションの作り方
CSSだけで、見出しなどをタイピングした様に一文字づつ表示させ、最後にカーソルを点滅させるアニメーションです。コピペで出来きます。ぜひやってみて下さい。 コード... -
tips
[CSS] Animista 簡単! CSSアニメーションとスクロールさせる方法
keyframesを使用したCSSアニメーションは重宝しますが、細かい設定が難しいですよね。書いては確認の繰り返し。Animistaなら、確認しながら細かい調整が出来ます。コピ... -
wordpress
[CSS] 否定擬似クラスnot()の使い方
この要素以外はこうしたい。と除外が出来る書き方です。あまり必要ないかな?と思いますが、そうでもないのでシェアします。意外と便利ですよ。 基本形 :not(ここに除外... -
wordpress
Minify(ミニファイ)圧縮して軽量化とサイトの高速化する方法
ファイルを圧縮し、軽量化する事でサイトの表示速度が上がり、SEO的にも有利です。閲覧する方にとってもスピーディーな表示は良い事ですよね。デメリットが見当たらない... -
wordpress
[WordPress] SWELL デザインのカスタマイズ あれこれ
このサイトで使用している人気のWordPressテーマ「SWELL」は、そのままでも十分なのですが、カスタマイズしたい事もありますよね。質問を頂いた内容をご紹介します。コ... -
tips
[CSS] box-sizingとボックスの横並びについて
Topページに新着3件など、ボックスを横並びにする事ってありますよね。高さが揃わない、はみ出るなど、なかなか上手にいかない事も。実際に横並びにするのは、display:f... -
tips
[CSS] 簡単!テキストリンク hover時のデザイン
基本的にはコピペでOK!CSSのみで出来るテキストリンクのhover(マウスを乗せた時)のデザインをいくつかご紹介します。ちょっと自分好みにカスタマイズするだけで、ガラ... -
tips
[CSS]border-radius 角丸でデザインに幅を
CSSでは、border-radius: X%で、角丸にする事が出来ます。例えば、border-radius: 50%で円を描く事が出来ます。角丸を使えば、デザインの幅が広がりますね!一部のブラ...