Monthly Bookmarks #34

Monthly Bookmarks #34

今月(2016年10月)個人的に覚えておきたいと思ったものやTwitterを通してシェアしたエントリーやサービスなどのまとめです。

Monthly Bookmarks #34 目次

  1. Development
  2. Design / Inspiration
  3. Material / Freebies
  4. Service / Resource

Development

  • viewScroller - Fullpage scrolling pluginフルページスクロールを実装することができるjQueryプラグインで、ナビゲーションをつけたり上下だけでなく左右への動きにも対応しています。
    また、オプションやコールバックもひと通りあって、少しCSSを調整するだけでレイアウトも変更できます。
  • Styling Underlines on the Web | CSS-Tricks一般的なtext-decorationを使う方法からはじまり、SVG filtersやCanvasを用いたものなど、理想的な下線を表現するためのアプローチがいくつかまとめられています。
  • 均等割付した折り返しFlexboxの最後の行 - Weblog - Hail2u.netFlexboxでjustify-content: space-between;を使用する際、表示する要素数によって最後の行にある要素が意図しない(左寄せにならない)場所になってしまうのを解決するTipsで、解決策には:nth-child()擬似クラスを用いています。
  • You Might Not Need JavaScript普段JavaScriptを用いて実装することが多い内容をCSSで実装したものがまとめられています。
  • You Might Not Need That WordPress PluginWordPressでプラグインを使用せずに機能を実装したりカスタマイズする方法がまとめられています。
  • HUE.css - A huge pack of 49 photorealistic CSS3 backdrops綺麗でクールなグラデーションをCSSで表現することができるCSSで、実装も適用したい要素にクラス指定するだけです。
  • React ColorPhotoshopやSketchをはじめとした様々なツールのカラーピッカーを再現したReactコンポーネント。
  • モダン日本語フォント指定 // Speaker Deck日本語フォント指定についてのスライド。
  • Inspiration for Letter Effects | Codrops「anime.js」を用いてテキストがかっこよく表示されるサンプルがまとめられています。
  • Responsive Images in CSS | CSS-Trickssrcset, sizes, pictureなど、レスポンシブなイメージを実装する際の手法などがまとめられています。
  • egjsコンポーネント、エフェクト、メソッドやイベントの拡張などを簡単にできるライブラリ。

目次へ

Design / Inspiration

目次へ

Material / Freebies

※以下で紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。

Bricks - 38 PSD Cards for Flowcharts
LittlePlane - SVG stencils for wireframes
Free PSD - Charts kit
10 Free Photo Effects PSD
Good Night (Free Font)
Nomes Free Serif Uppercase Font
Knucklehead: New Free Typeface
Setta Script Free Typeface
Web Development Icons
Graphic Design Icon Set
Smashicons: 170 Retro Business Icons

目次へ

Service / Resource

  • Grid.Guide — Pixel Perfect Gridsグリッドの計算の手間を省けるサービスで、全体の幅・カラム数・ガターなどを入力することで数パターンのグリッドを表示してくれます。
  • HTML Div Table - Online Tools各項目に設定値を入力したり、ドラッグしたりすることで簡単にテーブルを作成してくれます。
    単純にtableを使って作成したものだけでなく、HTMLはdivを用いてCSSでdisplay: table;を指定して作成するものに切り替えたりも可能で、実装に必要なコードを表示してくれます。
  • Google Fonts + 日本語 早期アクセス Google Fonts + Japanese Early AccessこれまでGoogleのWebフォントと言えば基本的に欧文でしたが、Noto Sans Japaneseをはじめ、M+やはんなり明朝といった日本語のWebフォントが利用可能になりました。

目次へ

Close the search window,
please press close button or esc key.