はてブ 
pocket 
twitter
最近捗ったweb系のあれこれ
に選定していただきました。✌('ω')✌
- 2015-8-4
- webデザイン
- 4
自分用のメモです。
必要最低限かつモダンなブログくらいなら、以下のリソースでやれそうです。
だいたいこのブログに使ってるやつだけど、多分次も使うのでメモ。
jquery
サイドバーとか固定系が瞬時に実装できる
ブログのサイドバーで捗るヤツ。ブログ以外でも親要素の中で自由自在に付いてくるし、実装は鬼簡単だし、助かるヤツ。
上スクロールで固定解除とか自力で実装しようとすると頭痛いけど、これなら簡単。
jQueryプラグイン「Sticky-Kit」のコツ – Qiita
固定系はコレ。
ライトボックスはこれかな
画像クリックで拡大するやつ。
このブログでも使ってますが、調子いいです。ふわっとモーダルがでるのがまどろっこしいのと、ビューンッて元の位置から拡大されるのが好きです。
スクロールで格納されるのもシンプルで良いですね。
ソースコードの表示を軽量で実装
ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方
WordPressのプラグインは軒並み重いんだよなぁ。
Gist貼り付けるか、Codepenとかだけでもいける気はするけど、マークダウンでコードだけさっくり紹介とかで便利。
レスポンシブでフリック対応のカルーセル
カルーセルは回転木馬。
slick – the last carousel you’ll ever need
レスポンシブにも対応した使いやすいカルーセルを探す時はこのスクリプトがオススメ！ -slick | コリス
このブログでは関連記事表示で実装。
レスポンシブで、フリック対応で、実装が楽なのでいうことないです。
コンテンツスライダーならば
画像だけスライドするのは味気ないならば、コンテンツをスライド。
こっちもレスポンシブで、フリック対応。
Swiperという軽量でレスポンシブ対応でスワイプ切り替えもできちゃうスライダー | NeGiMeMo.net
何でも放り込めて、便利。
アイキャッチとかの画像の色を取得なら
画像からプライマリカラーを取得する jQuery プラグインを作りました | rythgs.co
ちょっと画像によっては取り漏れもあるけども、なんせ簡単に取れるので。
apple musicっぽいかんじでアルバムジャケとかアー写から色を抜くようなヘッダーやタイトル周りが簡単に実装できますね。
ダミー画像
bracketsの拡張
ブラケッツからダミーの画像コードが作成可能。ただ、ちょっと画像がコミカルなのでクライアントワークで使うと怒られる。
webサービス
Placehold.it – Quick and simple image placeholders
超絶無難なダミー画像がサクッとつくれて便利。
jsで差し込み
上のダミーはオフラインだと当たり前のようにリンクが切れるので、オフラインでも出るヤツ。
Holder.js – client side image placeholders
photoshopとか起動しなくてよくて、開発も捗るというもの。色やテキストも自由自在。
webサービス
外部リンク紹介に「Embedly」
Cards are a clean, responsive, and shareable way to display any embed. | Embedly
iframe内のわりと邪魔な影も消えて、使用にためらいがなくなりました。
レスポンシブでデバイスに沿った表示をしてくれるし、画像はデカいしなかなか便利。
公式の画面の下の方にブックマークレットがあります。
はてなブログカードをやめて Embedly に移行してもいいんじゃないか。公式ボタンもあるし。ブックマークレットも作った。
色味をパクる
BrandColors | Official color codes for the world’s biggest brands
普通に綺麗な色が並んでいるので、拝借。メインに合うサブないろを探すのが捗る。
フレームワーク
いや、そこまでごっついフレームワークいらんから
なんか相性がいいというか、ちょうど良くてつかっちゃうPure。
gridとtableとbase（Normalize）くらいだけ拝借。
faundationとかbootstrapとか使ったことないけど、こんくらいで十分。
Bootstrap · The world's most popular mobile-first and responsive front-end framework.
Foundation | The Most Advanced Responsive Front-end Framework from ZURB
たいていweb屋さんは自分のオレオレ開発テーマ持ってるよね。
最終的にはベタやけども
automatic先生のスターターテーマで、乗り切る。安心感、ある。
瞬間もうマテリアルできてる
ここまで簡単だと、もうすることないよね。
分割してコンポーネントをパーツパーツで使いたいけど、超特急作業の時にはこれ使うよね。
アプリ
メニューバーからアイコン探せる！
Icons8 App: search 15,000 icons and import to Photoshop or Xcode | Icons8
これは革命的。それっぽいアイコンがメニューバーでさくっと探して、イラレやphotoshopにドラッグでポンですよ。
革命的。いちいちそれっぽいのを素材やwebで探す手間はもうなくなりました。eps使い放題を買ったらsvg-gulpで自前のアイコン作りまくりで夢が広がる。
でもなぁ、さすがにちょっと高いので、トレースに励みます。
gulp でサクッとアイコンフォントをSVGで意外といっぱいあったなぁ
とりあえずいろいろ探し疲れたので、上にあるヤツをしばらく使っていこうかとは思っています。
上のヤツは基本的に実装すごい楽なんで、オススメです。では。
文：シンタロヲフレッシュ
一緒に読んで欲しい記事
