Monthly Bookmarks #34

  • Posted on
  • Category : Bookmarks
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.net Flexboxでjustify-content: space-between;を使用する際、表示する要素数によって最後の行にある要素が意図しない(左寄せにならない)場所になってしまうのを解決するTipsで、解決策には:nth-child()擬似クラスを用いています。
  • You Might Not Need JavaScript 普段JavaScriptを用いて実装することが多い内容をCSSで実装したものがまとめられています。
  • You Might Not Need That WordPress Plugin WordPressでプラグインを使用せずに機能を実装したりカスタマイズする方法がまとめられています。
  • HUE.css – A huge pack of 49 photorealistic CSS3 backdrops 綺麗でクールなグラデーションをCSSで表現することができるCSSで、実装も適用したい要素にクラス指定するだけです。
  • React Color PhotoshopやSketchをはじめとした様々なツールのカラーピッカーを再現したReactコンポーネント。
  • モダン日本語フォント指定 // Speaker Deck 日本語フォント指定についてのスライド。
  • Inspiration for Letter Effects | Codrops 「anime.js」を用いてテキストがかっこよく表示されるサンプルがまとめられています。
  • Responsive Images in CSS | CSS-Tricks srcset, 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フォントが利用可能になりました。

目次へ

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。