Web制作に役立つ情報一覧

Web制作者は要チェック！Instagramに使用されているCSSのテクニック

2021/04/20(Tue) 10:11

Instagramに使用されているCSSのテクニックを紹介します。世界で多くのユーザーが利用し、閲覧する環境もさまざまなデバイスに対応する必要があります。下記のモックアップをどのように実装しますか？

https://coliss.com/articles/build-websites/operation/css/css-techniques-used-for-instagram.html

魅力的でインタラクティブなウェブサイト制作で意識したい6つのポイントまとめ

2021/04/19(Mon) 10:00

この記事では、ユーザーを飽きさせないインタラクティブなウェブサイト制作で意識したい6つのポイントをまとめてご紹介します。ここでは、インタラクティブなウェブサイトとは、ユーザーと対話するような参加型サイト体験を指しており、その方法やエフェクトもさまざまです。

https://photoshopvip.net/128359

この記事では、フォトショップをつかった超リアルな黄金文字テキストエフェクトのつくり方をご紹介します。

2021/04/19(Mon) 09:59

特にむずかしいこともなく、手順通りに進めていくことで、圧倒的な光沢感とリアル感を演出できる黄金文字テキストのお手軽チュートリアルです。黄金エフェクトを適用したままフォントの変更も可能な点もポイントで、手軽に編集を行うことができます。

https://photoshopvip.net/128377

【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ

2021/04/15(Thu) 09:56

CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。

https://coliss.com/articles/build-websites/operation/css/5-responsive-layouts-used-flexbox.html

商用利用無料！さまざまなUIデザインに適した、SVG完備の美しく精密なアイコン素材 -SWM Icon Pack

2021/04/14(Wed) 09:52

企業サイト、オンラインショップ、アプリ、ブログ、プレゼンなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるSWM Icon Packを紹介します。

https://coliss.com/articles/freebies/freebie-swm-icon-pack.html

フォントのサイズ設定は役に立たない、問題点と解決方法

2021/04/13(Tue) 09:56

WebページやOSのUI、エディタなどのソフトウェアでフォントのサイズや行の高さを設定した際に起こる問題点と解決方法を紹介します。

https://coliss.com/articles/build-websites/operation/work/font-size-is-useless.html

Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css

2021/04/12(Mon) 09:55

現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。

https://coliss.com/articles/build-websites/operation/css/reset-and-normalizer-reseter-css.html

イラストのディレクション本がついに発売！イラストの仕事に携わる人は目を通しておいて損のない一冊 -たのしく、イラストディレクション！

2021/04/09(Fri) 09:50

イラストのディレクションって、何からどうすればいいの？ そんな不安を完璧に解消してくれるイラストのディレクションを徹底解説した良書を紹介します。

https://coliss.com/articles/book-review/isbn-9784802511254.html

CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ

2021/04/08(Thu) 09:56

画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。

https://coliss.com/articles/build-websites/operation/css/handling-text-over-images-in-css.html

CSSの新しいセレクタが便利！複数のセレクタを1つにまとめられる:is()、さらに詳細度を0にする:where()の使い方

2021/04/07(Wed) 10:06

CSSの新しいセレクタが、主要なすべてのブラウザにサポートされました（ただし、IEは除く）。複数のセレクタを1つにまとめられる:is()、同機能でさらにセレクタの詳細度を0にする:where()をどのように使い分ければよいのか紹介します。

https://coliss.com/articles/build-websites/operation/css/where-pseudo-selector-has-a-cool-specificity-trick.html