エスエムティの愉快な仲間たち

こんばんはばさっちです。
最近背景やちょっとした装飾をするのによくグラデーションを使用するのですが、
最近良く使うジェネレーターをご紹介したいと思います。

https://cssgradient.io/

このサイトの良いところは直感的に操作できるところとプレビューが大きいのでわかりやすいところです。（もちろんIE対応のcssも書き出ししてくれます。）
グラデーションの配色に困った時は簡単で使いやすいのでぜひお試しを!!

こんばんはばさっちです。
今日コーディングしていたらまたIE+flexのバグが発生してしまいました…

テキストを真ん中に配置するために「justify-content: center」と「align-items:center」を指定してうまくいったと思ったらIEでバグ



何を指定してもうまく行かなくて色々調べてたのですが、どうやら「align-items:center」が良くなかったみたいです…（外したらうまく行きました。）



flex使う時のIEは神経使いますね…

こちらのサイトを参考に対応することができました!
flexboxのバグに立ち向かう（flexboxバグまとめ）

こんにちはばさっちです。
フォントアイコンと言えば、Font Awesomeなどが有名でだと思うのですが、

最近私がよく使っているのが、「material.io」です。
こちらmaterial.ioはGoogleが提供しているのでGooglefontのcssを読み込むだけで使用できます。

＜link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”＞

アイコンも豊富だし、svg、pngをダウンロードしても使用することが可能です。

Googleが提供しているので、いちいち利用規約や商用利用など確認する手間も無いのがいいですね!!
Googlefontとセットで使ってみてはいかがでしょうか!!

こんばんはばさっちです。

今回は完全に私の趣味の話になるんですが、
昔からプロレスが好きで去年まではいろんな団体を見に行ってたのですが、今年はまだ行けてないので残念です…

DDTプロレスとNOAH、どちらの団体もサイバーエージェントの傘下なのは知っていましたが、今回経営統合して「サイバーファイト」として再出発することになり、その記者会見で発表になったロゴが結構印象的だったのでご紹介したいと思います。

そのデザインがこちら

めちゃめちゃサイバーチックじゃないですか?
ロゴの制作したのは以前にもDDTプロレスのロゴを制作したNIGO氏

DDTプロレスのロゴはフラットデザインなのに対し、
今回のサイバーファイトのロゴは近未来を予感させる重厚感のある素敵なデザインですね!!

またこういったメタルチックのロゴデザインが流行るのでしょうか？
フラットデザインも好きですが、こういった作り込んだようなデザインも私は大好きです!!

こんばんはばさっちです。
flexboxのspace-between使ってますか?

汎用性の高いbox03とかのクラスしてスタイル当てておけば、簡単に横並びになってくれるので使い勝手が良くてすごくお世話になっています。
ただ3列などに並べて、5個しかない場合このようになってしまいます。



こんなときにわざわざmarginなど再指定したりするのめんどくさいですよね?
そんな時はflex要素のafter疑似要素にスタイルを当ててやると簡単に左寄せになってくれます。

.box03::after {
content:"";
display: block;
width:31.5%;
}




簡単ですね?
これも1個スタイルを準備しておけば簡単に使うことができます!
最近はまたコーディングが楽しくなっているので、こういった技を使って時短しちゃいましょう!!