CSS– tag –
-
tips
[CSS] Flexbox(フレックスボックス)で横並べ、他
バナーなどを横に並べたい時、float:leftの回り込みを使っていませんでしたか?それも正解なのですが、Flexboxなら、もっと簡単に実装できるのでご紹介します。うん、楽... -
tips
[CSS] 背景を斜めにカット (レスポンシブ)
背景色や画像を斜めに切り貼りした感じの企業のキャンペーンページなどでよく見かけるアレです。ちょっとカッコよく、動きがある感じのランディングページにする事が出... -
tips
Visual Studio Code (VSC)とSASSの環境とコンパイル
SASSを使うなら、エディターは Visual Stidio Code (VSC)が超簡単!無料ですし、初心者でも怖がらずにインストールできるのでお勧めです!Atomよりも軽い様にも思います... -
tips
[Bootstrap] 表示/非表示の制御 Display property
Bootstrapでサイトを作る際、ブレークポイントで表示/非表示を分ける事も出来ますが、プロパティーを記述する事で表示/非表示を分ける事も出来ます。 使い方はいたって... -
wordpress
[WordPress] MW WP Form セレクトボックスにfocus
MW WP Form というよりは、CSSのお話です。フォームを[Tab]キーを使って項目を移動させる方がいらしゃいます。便利だからという理由でそうされている方もいらっしゃいま... -
tips
[CSS] 簡単!テキストリンク hover時のデザイン
基本的にはコピペでOK!CSSのみで出来るテキストリンクのhover(マウスを乗せた時)のデザインをいくつかご紹介します。ちょっと自分好みにカスタマイズするだけで、ガラ... -
tips
[CSS]border-radius 角丸でデザインに幅を
CSSでは、border-radius: X%で、角丸にする事が出来ます。例えば、border-radius: 50%で円を描く事が出来ます。角丸を使えば、デザインの幅が広がりますね!一部のブラ... -
tips
[CSS] @media メディアクエリ まとめ
レスポンシブ対応のサイト制作で不可欠なのがメディアクエリ(@media)の記述です。私自身、曖昧なまま使っていた所があり、すんなり思い通りにならない、コンパクトに... -
tips
[CSS] 便利!擬似クラスで〇番目を指定する
liでリストを作ったとします。2番目だけに装飾を加えたいとか2番目以外の全てに何かをしたい場合に使える便利なコードです。上手に説明が出来ないので、サンプルを見て... -
tips
[CSS] ラインマーカーを引いてみる
CSSを使って、ラインマーカー(ハイライト)で線を引いたようなデザインにしてみようと思います。文中のちょっと目立たせたい箇所に引けば、そこだけ文字自体に色を付け...