Monthly Bookmarks #20

Monthly Bookmarks #20

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

Monthly Bookmarks #20 目次

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

Development

  • minigridレスポンシブ対応されたカード型レイアウトを実装できるスクリプトで、jQueryなどに依存せず、シンプル且つ軽量なのが特徴となっています。
  • CSSのID・クラス名の頭文字に数字を使用する方法 | webOpixel通常はIDやクラス名の頭文字に数字は使用することができませんが、それを文字コード指定や属性セレクタを使うことによって使用可能にする方法です。
  • Pure CSS ProgressPure CSSで実装された、見栄えも綺麗なプログレスバー。
  • Animated SVG Hero Slider | CodyHouseスライド切り替え時のアニメーションにSVGを組み合わせたものを実装するチュートリアル。
  • CSS ButtonsCSSでデザイン・アニメーション実装されたボタンが集められているギャラリー。
  • CSSイベント「Back to Basics」2015/088/30に開催されたCSSイベントのつぶやきまとめです。
    登壇で使用されたスライドなども公開されているのですが非常に勉強になるので、CSSを触る人は一度目を通すことをおすすめします。
  • iOS 8.4.1の:hover問題 - to-R
  • ほんのちょっと高度なSVGスプライトの使い方 | Design Report – デザインレポート

目次へ

Design / Inspiration

目次へ

Material / Freebies

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

Epic Multicons
Fblu free icons
- Sea Free Font -
Aquatico - Free Typeface
Vibrey — free font

目次へ

Service / Resource

  • Font Library | An open source project to tag and organize Google Fonts.Google Fontsを探す際に役立つサイトで、Google Fontsでもフィルタ機能はありますが、細かく用意されたタグを使うことで目的のフォントを簡単に見つけることができます。
  • 66 New Icons in 4.4 - font awesomeFont Awesomeが4.4にアップデートされ、新たに66種類のアイコンが追加されました。
  • Bootstrap 4 alpha · Bootstrap BlogBootstrap 4 alphaがリリースされ、主な特徴としてIE8のサポート終了、LessからSassへの移行、グリッドシステムの改善、サイズ単位にrem・emを採用などがあります。
  • Bootstrap ThemesBootstrapの公式テーマ配付サイトがオープンしました。
    現在公開されているテーマは3種類で利用するのも有償ではあるのですが、いずれも汎用性高いデザインとなっています。
    テーマはプレビューでPC・SPそれぞれの見栄えを確認することができます。

目次へ

Other

  • AlphabetGoogle創立者でもあるラリー・ペイジ氏が、Googleを含む全部門を傘下に収める新会社「Alphabet」を設立しました。
    ドメインもシンプル且つお洒落で、Googleっぽくページにはイースター・エッグが仕込まれていたりもします。
  • 楽天株式会社: 「楽天市場」、新トップページを本日から正式公開少し前から一部のユーザーは確認することができましたが、楽天のトップページデザインが正式にリニューアルされました。
    全体的に大幅なリニューアルではなく多少スッキリしたぐらいの感じの見栄えで、サイドのジャンル選択時(ホバー時)にアマゾンのような見た目のメニューが表示されるようになりました。

目次へ

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