webmanab.html

menu

デベロッパーブックマーク。2017年01月までのPocketの中身、WEB関連のいろいろを整理しました。

　

あとで見るとか、あとでもう一回見たいとか、いつか見返すだろうという理由で保存していた「Pocket」の中身を整理する意味でまとめておきます。

ぼくはいつもフィードリーダーの「feedly」で購読したり、「Slack」のAppsのRSSを使って仕分けして色々なサイトの更新状況をチェックしています。

どちらを使うかの分け方は、タイトル読みしたいときは「feedly」で、記事を直接読みたいときは「Slack」でというような感じです。「feedly」はタイトルだけiOSアプリでざぁーっと見て、気になるものを長めにタップして「Pocket」に保存するようにしていて移動中によく使います。「Slack」では１クリックでみたい記事にアクセスすることができるので、記事を読める時間を確保できるときは、「Slack」を使うようにしています。

というわけで、「Pocket」にたくさんの記事がたまってきてしまったので、一度まとめておくことにします。

front-end

普通のHTMLの書き方

普通のHTMLの書き方としてのHTML5.1の書き方のベタープラクティスが詳細にまとめられています。しっかりと見ておきたい。

Top Pens of 2016 on CodePen

CodePenで2016年にランキングTOP100のまとめです。

FreeFrontend – Free HTML, CSS and JS examples

いくつかのUIの実装例のフリーのリソースがまとまっています。眺めているだけでもインスピレーションがわいてきます。

JavaScript ベスト・オブ・ザ・イヤー 2016

フロントエンド、Node.jsフレームワーク、ツールチェーン、IDE、静的サイトジェネレータなどの2016年のJavaScriptの動向をまとめてあります。

Modern JavaScript概観、そしてElectronへ

今のJavaScriptのはなしが素敵な目線でまとまっているエントリー。

Vue.js入門 : チュートリアルで学ぶReactとAngularとの違い

Angular、Reactと並んで人気が高まっているJavaScriptフレームワーク「Vue.js」が2016年にv2をリリースしました。初心者用のチュートリアルがここにしっかりまとまっています。

WordPress Stash – Curated WordPress Resources

さまざまなWordPressに関するリソースがまとめられています。

2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選 | コリス

毎年恒例の素晴らしいプラグインまとめです。

WordPress コーディング規約 – WordPress Codex 日本語版

WordPressのコーディング規約の日本語訳です。

Bootstrap 4 Cheat Sheet

Bootstrap 4のチートシートです。クラス名をクリックするとコードとプレビューが表示されるのでわかりやすく、コードも簡単にコピペできます。

今すぐ知っておくべき！モダンな10のWeb技術

Web担当者が今すぐ知っておくべきモダンな10のWeb技術について。

ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ

簡単なCSSでの見せ方や動きのまとめ。

Flexbox Patterns

CSSのFlexboxで実装できるコンポーネントのギャラリー。

均等割付した折り返しFlexboxの最後の行 – Weblog – Hail2u.net

フレックスコンテナにjustify-content: space-between;を指定した時の最後のフレックスアイテムの挙動をコントロールするためのチュートリアル。

【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選

実用的なものから変態的なものまでCSSテクニックが詰まったテキストエフェクトのまとめです。

CSSの参考になるアイデアが満載！2016年スタイルシートを使ったテクニックのまとめ

CSSの進化を感じるまとめ。

[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size

フォントサイズをレスポンシブに変化させるテクニックです。

GitHub – joshbuchea/HEAD: A list of everything that could go in the <head> of your document

<head>内に記述する<meta>関連の要素をまとめたチートシート。

Webデザイナーに最低限知っておいてほしい、検索と置換(正規表現)｜Web Design KOJIKA17

正規表現のことはじめのチュートリアル。

Muuri – Responsive, sortable, filterable and draggable grid layouts

Masonryレイアウトとソート機能などをアニメーション付きで実装するスクリプト。

viewScroller – Fullpage scrolling plugin

上下左右にフルページスクロールを実装することができるjQueryプラグイン。オプション、コールバックも豊富でカスタマイズも簡単です。

Cubes Advent Calendar | Codrops

キューブ状のカレンダーを実装するチュートリアル。

Image Effects with CSS

CSSだけで様々なエフェクトを実装するチュートリアル。

Colofilter.css

mix-blend-modeを使ってビビッドなフィルター関連を実装します。

tilt.js

マウスオーバーした要素に3Dに傾きを与えるスクリプト。

in-view.js

要素が画面に表示されたとき、外れたときにイベントを設定することができるスクリプト。

iziModal.js

jQuery依存のモーダルウィンドウプラグイン。

【日付】dateの色々が詰まったjsライブラリ「date-fns」

日付をJavaScriptで便利に扱うことができるライブラリ「date-fns」の使い方。

Background Segment Effect

CSS clip-pathプロパティを使用し、anime.jsを使用した背景画像のセグメントエフェクトを実装するチュートリアル。

YOU MIGHT NOT NEED THAT WORDPRESS PLUGIN

WordPressのプラグインなしで実装できるいくつかのチュートリアル。

YOU MIGHT NOT NEED JQUERY

jQueryなしで実装できるいくつかのチュートリアル。

YOU MIGHT NOT NEED JAVASCRIPT

JavaScriptなしで実装できるいくつかのチュートリアル。

cssicon

CSSで実装されたアイコン集。アイコンから別のアイコンにアニメーション変化を加えることができます。

【保存版】全部読んだら完全未経験者でも絶対Webクリエイターになれる本29冊

フロントエンド寄りのイケてるデザイナーになるための独学用の書籍が、かなりしっかりとまとまっています。

design guide

ずっと使える、デザインの基本をまとめました。【2017年改訂版】

元も子もない感じですが、ここを見るだけでデザインのノウハウはバッチリだと思います。笑 非常に細やかにデザインについてまとめあげられている愛のあるまとめ。

2017 Trendy Google Fonts Combinations

トレンドを抑えた「Google Fonts」の相性の良い組み合わせのまとめ。

ランディングページ8要素におけるデザイン表現セオリー（サンプル165点付）

ランディングページをデザインする上での細かいtipsがまとめられています。

優れたフォームをデザインする – Medium Japan – Medium

フォームデザインに気をつけておきたい事柄がまとめられています。

Showcase of Beautiful Websites with Glitch Effects

グリッジエフェクトを取り入れたサイトのまとめ。

誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック

図を作るための細かいtipsがまとめられています。

PANTONEが選ぶ2017年の色「Greenery」を使った配色例

2017年の色「Greenery」を使った配色パレットの紹介です。

Website of the Year 2016 – CSS Design Awards

今年の「CSS Design Awards」のWebsite of the Yearです。

LogoMiner – Catalog of logo designs for analysis and free download

ロゴデータをダウンロードしたり様々な絞り込みができるロゴデザインギャラリーです。

Web制作者が知っておきたい！2017年ここ最近、よく見かけるデザインのトレンドのまとめ

2017年にチェックしたいデザイントレンドのまとめです。

2017年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ

コンテンツファースト、レイアウトの多様化、フラットデザインやミニマリズムの進化、アニメーションの重要性、コミュニケーション・コラボレーション、AR/VRなど、2017年にチェックしておきたいウェブの事柄について詳細にまとまっています。

GIFアニメーション完全ガイド 2016 : 無料ツールによる作り方や使い道、そして重要なワケとは？

GIFアニメーションの作り方やサービスについて詳細にまとまっています。

service / tool

75 of the Smartest Resources for Web Designers

ウェブデザイナーが知っておくべきな多用したいリソースのまとめ。

10 Best CSS Code Generators for Web Developers

CSSに関するジェネレーターのまとめです。リアルタイムにプレビューできるものばかりなので、デザインがないときなど、実際の見た目を確認しながらインタフェースを使って調節できるので有効に使いたいです。

Type Anything

テキストのCSSを調整することで、リアルタイムに文章をプレビューできるオンラインツールです。

gulp generator

gulpファイルを簡単に出力してくれるオンラインツール。これでかなりgulp.jsの勉強になりました。

The SVG Font Machine | Glyphter

SVGのフォントをアイコンフォントのセットに組むためのジェネレータです。

Domain Checker – Freenom

無料でドメインを取得できます。

fontreach

フォント名からウェブサイトを一覧表示して検索できるサービス。

フリーランスも社内も助かる！企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３

制作に関わる書類系テンプレや知識のまとめです。

ご利用環境チェックツール

OS・画面解像度・IPアドレスなどまとめてオンラインで確認することができます。

Pulp. Mashed up mail

レスポンシブメールのテンプレート。

UI

UIにフォーカスを当てたまとめです。

Color Farm

カラーパレットの参考に。

50 creative card UI designs

カード型UIのギャラリー。

サイトに効果音を。UI・UXサウンドを用いた参考Webサイト＆音源まとめ

効果音を実装しているサイトのまとめ。

Awesome input focus effects

スマートなテキストエリアのフォーカススタイルのチュートリアル。

今どきの入力フォームはこう書く！HTMLコーダーが抑えるべきinputタグの書き方まとめ

入力フォームのベストプラクティスが今の切り口で紹介されているエントリー。

UX

完璧なテキストフィールドのための14のルール

テキストフィールドを中心にデータ入力を改善する重要な要素についてまとめられたエントリー。

UXに関わる仕事をして感じた4つのこと

UXデザイナーが心掛けたい事柄が書かれています。

resource

2017年用、日本語のフリーフォント260種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス

毎年恒例の素晴らしいフリーフォントまとめです。

漢字も使えて高品質！商用利用も可能な日本語フリーフォント 20

厳選して絞られて紹介されているので、見やすいです。

無料ダウンロードし放題！商用OKなフリーフォント50個まとめ 2017年1月度

2017年の最新のフリーフォントまとめ。

SEO

6つの都市伝説から考える、マーケターが取り組むべき適正なSEOとは？

古い情報に基づいてSEO対策をしている人が多くいるなかで、迷信の検証や正しい知識についてまとまっているエントリーです。

【保存版】Search ConsoleでSEO対策　コンテンツ洗練化の9ステップ

低い工数で改善するコンテンツの洗練化のまとめ。

writing

1記事ではてブ数4901を獲得した私が伝えたいアウトプットに対する考え方

おわります。

デベロッパーブックマーク。2017年01月までのPocketの中身、WEB関連のいろいろを整理しました。

share
ー

tag
ー