Web制作に役立つ情報一覧

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

2018/09/03(Mon) 10:21

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

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

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

2018/08/31(Fri) 09:53

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

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

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

2018/08/30(Thu) 09:51

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

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

無料で高品質！持っておくと便利なテクスチャ、パターン素材660枚まとめ 2018年8月度

2018/08/29(Wed) 09:53

今回は無料ダウンロードできるテクスチャ素材のみをまとめてご紹介します。光沢感抜群のゴールドテクスチャから、重ねるだけで質感をアップできる素材、トレンドの水彩ペイントを手軽に実現できるアイテムや紙、ウッドテクスチャなど人気素材、合計668枚を網羅しています。

http://photoshopvip.net/110537

便利なツールが登場！ハンバーガーをXに変形させるのも簡単、SVGアイコンをアニメーション化できる無料ツール

2018/08/29(Wed) 09:52

SVGアイコンは美しく軽量で、非常に便利です。Webサイトでもスマホアプリでも、SVGアイコンを使用している人は多いと思います。SVGアイコンをアニメーションさせるには、どうしていますか？

https://coliss.com/articles/build-websites/operation/work/svg-icon-transition-generator.html

【HTML】CSSで要素を横並びにする方法(floatとdisplayの使い方を解説)

2018/08/28(Tue) 09:54

「要素を横並びに配置したいんだけど、レイアウトが崩れてしまう。」「floatだけだと、使い勝手が悪い。他に横並びの方法はないのだろうか。」

https://creive.me/archives/13552/

[CSS]知っておくと便利！レスポンシブ用に画像を配置するスタイルシートの5つのテクニック

2018/08/28(Tue) 09:54

何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。

https://coliss.com/articles/build-websites/operation/css/css-techniques-responsive-images.html

デザイナーなら使いこなしたいフォントにまつわる用語まとめ

2018/08/27(Mon) 09:56

最近LIGのデザイナーにモリサワパスポートが導入されました。これを機会に少しフォントの勉強をしようと思い、フォントに関する名称についてまとめてみました。

https://liginc.co.jp/411370

余白で情報整理、余白で視線誘導、余白で視認性アップ、デザインがうまくなりたい人に余白の使い方が学べる良書

2018/08/27(Mon) 09:55

Webデザインでも紙のデザインでも、余白を上手に使ったものは洗練された印象を与えます。情報を整理したり、視線を誘導したり、可読性や視認性をアップさせたり、余白はデザインにおいて非常に重要な要素です。

https://coliss.com/articles/book-review/isbn10-4802611692.html

テクニカルSEOの上級者になりたいならJavaScriptに精通すべし

2018/08/24(Fri) 09:50

SEO に一生懸命に取り組んで精通したいのであれば、今後は JavaScript に詳しくなることを、Google の John Mueller（ジョン・ミューラー）氏は推奨しました。

https://www.suzukikenichi.com/blog/you-should-learn-seo-if-you-want-to-be-keen-on-technical-seo/