CSSのみでMasonryライクな段組レイアウト
Result 過去はJSで何とか実装していたPinterestのようなMasonryレイアウトは、column-widthを使ったCSSのみで簡単に実装可能となりました。 column-countも併用すればカラム数の指定も出来ますね。 cssarticle {/*CSSカラムのセッティング*/ column-width: 7em; column-gap: 1em; } section {/*各ボックスのスタイル*/ display: inline-block; margin: 0.25rem; padding: 1rem; width: 100%; background: #efefef; }html<article> <section> <p>Lorem ipsum dolor sit amet, consectetur.</p> </section> <section> <p>Lor
UI制作の際に役立ちそうなツールやリソース等の情報をまとめた・「designer lynx」
designer lynxはUI制作の際に役に立つかもしれない情報をキュレーションしているWebサイトです。デザインギャラリーやカラーツールやプロトタイプツール、アイコンやタイポグラフィの情報などなど。施工で困ったときに眺めてみるのもいいかもしれません。 designer lynx
アップロードした画像に自動で透かしを入れるWordPressプラグイン・「Image Watermark」
watermarkはアップロードした画像に自動で任意の透かし(ウォーターマーク)を入れて表示するWordPressプラグインです。わざわざ加工してからアップせずとも自動で挿入してくれるので自身の画像をよくアップする方には便利なんじゃないかなと思います。透かし画像は配置や透過などの設定が可能です。加えて、簡易的なものですが、右クリックやD&Dの禁止等で画像の保護も行ってくれるようです。 Image Watermark
カルーセルやアコーディオン、ドロップダウンメニューなどをCSSのみで実装するコードを集めた・「You Don’t Need JavaScript」
You Don’t Need JavaScriptはよく見かけるUIをJavaScriptを使用せずCSSのみで実装するコードを集めているプロジェクトです。上はカルーセルのサンプル。他にクリックで開閉するアコーディオン、要素のフリップ、モーダルウィンドウ、ツールチップ、タブなどよく使われるUIが揃っています。日本の方が作ったCSSのみで作るフォントのCSS SANSも含まれています。まだ数は少ないですけどこれから増えていくかもしれませんね。 You Don’t Need JavaScript
高品質な写真素材を提供するユーザー参加型ストックフォトサイト・「tookapic stock photos 」
tookapic stock photosはユーザー参加型のストックフォトサイトです。と言ってしまうと少し語弊があるのですが、tookapic.comはフォトグラファーのスキルアップとモチベーション維持をサポートするWebサービスで、写真のテーマを与えてくれたりコミュニティに参加出来たりフィードバックを貰えたり、といったことが可能で、フォトグラファー達はより良い写真を日々アップロードしているそうです。基本的に1日1回写真を撮ろう（撮影しよう）、というのが共通課題みたいです。その過程でアップされた画像がストックフォトとして提供されている仕組みみたいですね。写真はアップロード時に有料か無料を選択可能で、無料の場合はCC0で公開されるようです。よく考えられたサービスですね・・ tookapic stock photos
リダイレクトやセキュリティ、パフォーマンスの向上など、.htaccessで使えるスニペットをまとめている「.htaccess Snippets」
.htaccess Snippetsは.htaccessで使える小技をまとめたスニペット集です。リダイレクトやリライト、セキュリティ向上やパフォーマンスの向上など、よく使うものをサクッとまとめてくれています。業種次第では覚えて当然かもですけど、個人的には忘れがちなのでこうしたまとめは有難い限りです。 .htaccess Snippets
様々なJavaScriptライブラリをコレクションしているWebサイト・JSDB.IO
様々なJSライブラリのまとめサイトのご紹介。主にクライアントサイドのJSライブラリを中心にコレクションしているみたいです。シンプルで探しやすかったのでメモ。 JSのコレクションサイト。サクサク動作して広告などの余計なコンテンツも無いので非常に探しやすい印象です。
画像にマウスホバーするとズームする拡大鏡っぽいやつを簡単に実装できる2KBの軽量jQueryプラグイン・loupe
結構良かったのでご紹介。ECサイトとか で見かける、マウス乗せると画像が拡大 するやつです。拡大鏡とか言えばいいん でしょうか？ニーズはそこそこありそう ですし、かなり軽量で導入も簡単なので 覚えておくと工数減らせるかもですね。 いわゆるルーペ的なものを作れるライブラリで、プラグイン名もまんま「ルーペ」です。2KBとかなり軽量で、圧縮すると1KBちょっと。導入するとクライアントさんもユーザーさんも喜びそうですし、うまく使えばプロダクトの訴求力も上げられるのではないでしょうか。 こういうやつ。個人的にはこれ付けてくれるとかなり購買意欲湧きます。ECサイトでは現物見れないので写真は大事ですね。 オークションなんかは傷や汚れの関係でトラブルになりやすいので導入してくれるといいんですけどねー。 因みに周りにテキストがあってもそれは拡大しないです。 やっぱりjQuery。IE6でも大丈夫。やっぱりイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SketchやPhotoshop、Gimpなどのファイルをブラウザで開いて編集できるオンラインフォトエディタ・「Photopea」
CSVファイルをアップロードするだけで自動でtableにしてシェアできるようにしてくれる・「CSVshare」
タイムテーブルのような時間表を作成出来るjQueryプラグイン・「jQuery Skeduler Plugin」
ゲームアプリ等に使えそうなファンタジーな世界のマップイラストを作れるユニークなWebサービス・「Inkarnate Worlds」
Photoshop内でGoogle Fontsに公開されているフォントを選択出来るフリーのPhotoshopプラグイン・「Fontea」
リストやテーブルにフィルタリング機能やソート、検索機能を付与するスクリプト・「List.js」
シンプルなチャットシステムを導入する為のスクリプト・「Chatjs」
利用されているWebフォント名と、そのフォントの表示テストを行えるブックマークレット・「Type Sample」
Chromeのブックマークをスクリーンショット付きにし、ソートしたり検索出来るエクステンション・「DEWEY」
フォントファイルをアップロードし、エフェクトを加えて別のフォントファイルとしてダウンロード出来る・「FontPunk.com」
PhotoshopのレイヤースタイルをCSS3に変換する・「CSS3Ps」
responsivepx for Japanese