Web制作に役立つ情報一覧

ふくろ文字

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/

色々な色の名前、日本語と英語での名前、伝統色の名前が分かるサイトのまとめ

2020/01/22(Wed) 09:56

いろいろな色の日本語での名前、英語での名前、日本の伝統色の名前をはじめ世界の伝統色の名前などが分かるサイトを紹介します。

https://coliss.com/articles/build-websites/operation/design/what-the-color-name.html

ビジュアルで勝負！2020年に確認しておきたい重要デザイントレンド7個まとめ

2020/01/21(Tue) 10:01

トレンドは入れ替わりが激しく、すぐに古くなってしまう恐れがあるため、ここではビジュアル面に関連する、2020年に確認しておきたいトレンド7個をまとめてご紹介します。

http://photoshopvip.net/120168

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

【比較】FAQシステムのおすすめ12選！問い合わせの顧客満足度を向上させよう

2020/01/20(Mon) 09:56

FAQシステムとはユーザの抱える質問に対して、的確な回答を提供するシステムです。FAQシステムを導入して、顧客満足度のアップや作業を効率化させたいと考えている企業は多いでしょう。

https://creive.me/archives/28010/

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