CSS– tag –
-
tips
[CSS] Animate.css v4 スクロールで動かす (初心者も)
Animate.cssのバージョンが4になり、思いっきり変更がありました。以前のままの状態でアニメーションが追加出来ないのでやり直しが必要です。スクロールするとアニメー... -
tips
[CSS] :before 擬似要素で番号表示
以前、[CSS]:befor や :after 擬似要素を活用する をご紹介しました。今回は、<ol> でなくても番号表示をCSSのcounter-increment: title;で振る方法を紹介します... -
tips
[CSS]コピペで出来る見出しデザイン 10種
見出しデザインでサイトの印象がガラリと変わります。CSSで実装するレスポンシブデザインでも崩れにくく、スタイリッシュな見出しを10種類ご紹介します。 font-size,col... -
tips
[CSS] 基礎 paddingやmargin 値をまとめる
marginやpaddingを指定する際、top,bottom,right.leftの値を個々に書く事もできますが、まとめて書けば もっとすっきり!時短にも繋がりますね。 【そもそもmargin、pa... -
tips
[CSS]レスポンシブで見やすいtable(表)
Tableで作った表を小さなデバイスで見るのって大変ですよね。画面を横にしてみたり画面を広げてみたり。CSSで見やすい表にする事が出来ます。Bootstrapの様な@mediaでレ... -
tips
[Bootstrap] ブレイクポイント @media
レスポンシブのブレイクポイント(Responsive breakpoints)の書き方。レスポンシブサイトを作る際には必要不可欠な設定ですが、慣れないとなんともややこしい。 【考え... -
tips
[CSS] Animate.cssでアニメーション効果をつける-2
※Animate.cssがv4になり、変更がありました。[CSS] Animate.css v4 スクロールで動かす (初心者も) で紹介しています。 Animate.cssでを使って、スクロールのタイミン... -
tips
[CSS] Animate.cssでアニメーション効果をつける-1
※Animate.cssがv4になり、変更がありました。[CSS] Animate.css v4 スクロールで動かす (初心者も) で紹介しています。 Animate.cssはclassを付けるだけで簡単にアニ... -
tips
[Bootstrap 4] メニューをTopに固定する
前提として、wordpressのテーマWP Bootstrap Starter フレームワークを使用しています。 navigationを固定するには、flex-top?それとも、stickey-top? 【公式サイトで... -
tips
[CSS] CSSを使って半透明にする方法いろいろ
CSSで、背景や画像、文字を半透明にする方法です。重ねた背景を半透明、バナーボタンを半透明などなど。これを使えば、表現の幅が広がりますね!素材の制作の手間も省け...