[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…

[CSS] Animate.cssでアニメーション効果をつける-1

Animate.cssはclassを付けるだけで簡単にアニメーション効果を付ける事が出来ます。簡単と言っても、何だかんだ作業が必要になるので、初心者にも分かる様にもう少し細かく書こうと思います。 追記:この方法の他、スク…

[CSS] CSSを使って半透明にする方法いろいろ

CSSで、背景や画像、文字を半透明にする方法です。重ねた背景を半透明、バナーボタンを半透明などなど。これを使えば、表現の幅が広がりますね!素材の制作の手間も省けます。 rgbaを使って半透明にする rgbaとは、R,G,…

[Bootstrap 4] cardの写真がIEで伸びてしまう件

Cardを使う機会って多くないですか?便利だなぁって使うのですが、何だかIEで画像が縦に長くなってしまって・・・バグの様です。 ソースコードはこんな感じになると思います。 いろいろ方法があるようですが、以下のCSSを追加…