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

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

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

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

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

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

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

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

[CSS]コピペで出来る見出しデザイン 10種

見出しデザインでサイトの印象がガラリと変わります。CSSで実装するレスポンシブデザインでも崩れにくく、スタイリッシュな見出しを10種類ご紹介します。 font-size,color,paddingなどはお好みで調整して下…

簡単!SASSの環境。 Visual Studio Code

SASSを使うなら、AtomよりVisual Stidio Code 通称VS Codeが超簡単!初心者でも怖がらずにインストールできるのでお勧めです!Atomよりも軽い様にも思いますので、メモリが厳しいPCをお使いの方…

[CSS] 基礎 paddingやmargin 値をまとめる

marginやpaddingを指定する際、top,bottom,right.leftの値を個々に書く事もできますが、まとめて書けば もっとすっきり!時短にも繋がりますね。 そもそもmargin、paddingとは? 文字…

[CSS]レスポンシブで見やすいtable(表)

Tableで作った表を小さなデバイスで見るのって大変ですよね。画面を横にしてみたり画面を広げてみたり。 CSSで見やすい表にする事が出来ます。Bootstrapの様な@mediaでレスポンシブ対応の設定がなされら、とても…

[Bootstrap] ブレークポイント @media

レスポンシブのブレークポイント(Responsive breakpoints)の書き方。 レスポンシブサイトを作る際には必要不可欠な設定ですが、慣れないとなんともややこしい。 考え方 min-widthと、max-wid…