CSS

ふくろ文字

2020/01/22(Wed) 09:57

CSSで文字にフチを付けてふくろ文字にする方法。ちょっと前までは画像でやるしかなかったふくろ文字ですが、CSSでできるならCSSでやっちゃいたい。古いにしえの方法と、新いまどきの方法と、SVGを使って再現する方法のメモ。

https://lopan.jp/outline-text/

絶対配置をレスポンシブしたいとき

2020/01/22(Wed) 09:56

キービジュアルのところとか、デザインによっては、要素を絶対配置してアニメーションしたい時とか。デスクトップのデザインとモバイルのデザインはあるけれど、タブレットのデザインがない時とか。デスクトップのレイアウトのまま、タブレットサイズに収めたい時とか。そんな時に応急措置として使えるレシピ。

https://lopan.jp/absolute-responsive/

CSS Flexboxでナビゲーションを実装する時に役立つ、オートマージン（margin: auto;）の便利な使い方

2020/01/21(Tue) 10:00

ナビゲーションを実装する時、アイテムを左端に詰めて配置したいけど、1つだけ右端に配置したい、そんな時はFlexboxでオートマージン（margin: auto;）を使用すると簡単です。また、論理プロパティの効果的な使い方にも触れられているので、勉強になります。

https://coliss.com/articles/build-websites/operation/css/how-auto-margins-work-in-flexbox.html

HTML/CSSで表現できる、すごいテキストエフェクト用スニペット44個まとめ

2020/01/17(Fri) 10:02

この記事では、CSSで表現できる新作テキストエフェクト用HTMLスニペットをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。

http://photoshopvip.net/120163

CSSは奥が深い！グラデーションとシャドウをこれまでより美しく実装するテクニック サイト構築 -CSS

2020/01/17(Fri) 10:01

WebサイトやスマホアプリのUIデザインでよく使用されるグラデーションとシャドウをより美しく実装するスタイルシートのテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/using-easing-for-gradient-and-shadow.html

2020年、モダンブラウザに適したCSSリセットのまとめ

2020/01/16(Thu) 09:53

Web制作でモダンブラウザをターゲットにした場合、CSSにおけるブラウザによる互換性の問題は以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットやすべてをリセットする必要は全くありません。

https://coliss.com/articles/build-websites/operation/css/css-reset-for-modern-browser.html

HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ

2020/01/15(Wed) 09:47

カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。

https://coliss.com/articles/build-websites/operation/css/css-only-carousel.html

超便利！確認しておきたい最新CSSツール、リソースガイド厳選65個 2020年度

2020/01/10(Fri) 09:51

CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。

http://photoshopvip.net/119995

2019年間ベスト！Web制作を変える便利オンラインツール厳選85個

2020/01/06(Mon) 09:52

この記事では、今年紹介したツールのなかでも特に話題になった2019年の便利オンラインツールベスト85個をまとめてご紹介します。実際に制作フローに取り入れて便利だったツールを選りすぐったこのコレクションには、「無料で利用できることを基本としたツール」を揃えています。これらのツールやサービスを活用して、より快適なWeb制作ライフを過ごしましょう。

http://photoshopvip.net/119896

CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方

2019/12/24(Tue) 10:10

Flexboxも、margin: auto;も、CSSでよく使うプロパティです。このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。

https://coliss.com/articles/build-websites/operation/css/flexbox-aligning-with-auto-margins.html