[CSS] 簡単!テキストリンク hover時のデザイン

基本的にはコピペでOK!CSSのみで出来るテキストリンクのhover(マウスを乗せた時)のデザインをいくつかご紹介します。ちょっと自分好みにカスタマイズするだけで、ガラリと見栄えが変わります。 CSSだけでいろいろ出来る…

[CSS]border-radius 角丸でデザインに幅を

CSSでは、border-radius: 〇%で、角丸にする事が出来ます。例えば、border-radius: 50%で円を描く事が出来ます。角丸を使えば、デザインの幅が広がりますね!一部のブラウザやレスポンシブデザイン…

[CSS] @media メディアクエリ まとめ

レスポンシブ対応のサイト制作で不可欠なのがメディアクエリ(@media)の記述です。私自身、曖昧なまま使っていた所があり、すんなり思い通りにならない、コンパクトに書けなかったしています。実践しやすい様に、まとめてみました…

[wordpress] MW WP Form セレクトボックスにfocus

MW WP Form というよりは、CSSのお話です。 フォームを[Tab]キーを使って項目を移動させる方がいらしゃいます。便利だからという理由でそうされている方もいらっしゃいますが、体が不自由な方もお使いになっています…

[CSS] Flexbox(フレックスボックス)で横に並べる

バナーなどを横に並べたい時、float:leftの回り込みを使っていませんでしたか?それも正解なのですが、Flexboxなら、もっと簡単に実装できるのでご紹介します。うん、楽なはず。 共通 html 背景があって、白い部…

[CSS] 便利!擬似クラスで〇番目を指定する

liでリストを作ったとします。2番目だけに装飾を加えたいとか2番目以外の全てに何かをしたい場合に使える便利なコードです。上手に説明が出来ないので、サンプルを見て下さい。 使用する擬似クラスについて 一般的には、「:fir…

[CSS] ラインマーカーを引いてみる

CSSを使って、ラインマーカーで線を引いたようなデザインにしてみようと思います。文中のちょっと目立たせたい箇所に引けば、そこだけ文字自体に色を付けるよりも見た目にも良く、注意を引く事が出来ます。一般的なタイプと太さが調節…

[CSS] 背景を斜めにカット (レスポンシブ)

背景色や画像を斜めに切り貼りした感じの企業のキャンペーンページなどでよく見かけるアレです。ちょっとカッコよく、動きがある感じのランディングページにする事が出来ます。レスポンシブにも対応したCSSで三角を作る方法を使った応…

[CSS] Animate.css v4 スクロールで動かす (初心者も)

Animate.cssのバージョンが4になり、思いっきり変更がありました。以前のままの状態でアニメーションが追加出来ないのでやり直しが必要です。スクロールするとアニメーションが始まる様にするには、wow.jsとの組み合わ…

[CSS] :before 擬似要素で番号表示

以前、[CSS]:befor や :after 擬似要素を活用する をご紹介しました。今回は、<ol> でなくても番号表示をCSSのcounter-increment: title;で振る方法を紹介します。 …