Web制作に役立つ情報一覧

Photoshopで手描きイラストの背景を透明にする方法（線画抽出テクニック）

紙とペンとつかって手描きされたイラストを、デジタル加工しやすくするために背景を透明にする方法をご紹介します。Photoshopの「線画抽出」という作業で、「チャンネル」機能を駆使することで、デジタル塗りで使いやすい線画に変換します。

http://photoshopvip.net/110986

CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方

CSSのscroll-snapプロパティを使用すると、縦長ページなどでスクロールをしてコンテンツの中途半端な位置で終了しても、ちょうどよい位置にぴたっとスナップさせることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます。

https://coliss.com/articles/build-websites/operation/css/how-to-use-css-scroll-snap.html

商用利用無料！書道家「ダ山竹電」先生によるSVGの筆書き素材 -カリ蔵(カリグラ)

筆書きのかっこいい文字を使いたい！一回使うだけなのに、毛筆フォントをインストールするのは面倒！そんな人たちの要望を叶えるべく、書道家「ダ山竹電」先生が立ち上がり、カリグラフィの筆書き素材がローンチしたので、紹介します。

https://coliss.com/articles/freebies/svg-calligra.html

[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に

a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでクリック可能な範囲を広げる感じでしょうか。

https://coliss.com/articles/build-websites/operation/css/stretched-link-clickable.html

CSS GridとFlexboxでの実装で役立つ！各プロパティの役割が、ぱっと見てすぐ分かる簡単便利なチートシート

CSS GridとFlexboxの各プロパティに値を指定した際、それぞれがどのようになるかまとめられた簡単便利なチートシートを紹介します。レイアウトとコードがまとめられたシンプルなチートシートで、あれ何だっけ？ という時用にブックマークしておくと便利です。

https://coliss.com/articles/build-websites/operation/css/grid-and-flexbox-cheatsheets.html

デザイナーが覚えておくべき英字タイポグラフィのルール10選

Webサイトやアプリにとって、優れたタイポグラフィには、単なる書体の美しさ以上の意味があります。タイポグラフィは、コンテンツと視覚的に強い繋がりを持つと同時に、読みやすくなければなりません。

https://uxmilk.jp/74219

こんなのあったんだ！ 意外と知らないHTMLの要素をご紹介します

僕の知らなかったHTML要素をいくつか見かけたので、今回はそれらをまとめてご紹介したいと思います！

https://liginc.co.jp/413655

追従ヘッダー実装時に使える動作・デザインパターン例

常にユーザーの視線に入るようにしておきたいとかサイトの回遊率をあげたいなどの理由で実装を頼まれることが多いと追従ヘッダー。単純に基本となる見栄えを維持してそのまま追従させることも多いですが、少し変化を加えてほしいという要望をもらうことも少なくないので、そういった場面で提案しやすいようによくある動作・デザインのパターン例をまとめました。

https://www.nxworld.net/inspiration/fixed-and-sticky-header-pattern.html

[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2

チャートやグラフは、さまざまなスマホアプリで見かけます。スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。

https://coliss.com/articles/build-websites/operation/javascript/chart-library-for-mobile-f2.html

シャドウの色はブラックとは限らない、さまざまなカラーにあった適切なシャドウの色が分かるオンラインツール

最近のWebデザインには使用される要素には、さまざまなカラーが使用されています。それらの要素にシャドウを与える際には、シャドウの色はブラックとは限りません。グレーであればグレー系シャドウ、レッドであればレッド系シャドウがぴったりです。

https://coliss.com/articles/build-websites/operation/design/material-icon-shadow-color-picker.html