IkonateはOSSとして公開されているSVGアイコンのセットです。カスタマイズ性、パフォーマンスを重視しているそうです。数もそこそこ用意されており、いずれも汎用的なものとなっています。また、本サイトではカスタマイズツールも用意されています。ライセンスはMIT。 Ikonate
![オープンソースのSVGアイコンのセット・「Ikonate」 | かちびと.net](https://cdn-ak-scissors.b.st-hatena.com/image/square/3a9c5fa1fb6c17b549aa0deb34724b88303818ba/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2018%2F09%2Fikonate01.jpg)
shed.cssはTED.comが公開しているOSSのCSSライブラリです。「CSSの終わりの始まり」をキャッチコピーとしています。詳細はまだ調べていませんが、ユーティリティファーストを元に設計されており、それぞれのクラスは1つの目的のみを持ち、各クラスを組み合わせて使う形となります。ある程度の学習だけで単純なクラスによるWebサイトをデザイン、管理出来る仕組みのようです。例えば <button class=" d:i-b f-w:700 p-x:3 p-y:.7 b-r:.4 " > hoge </button>d:i-bはdisplay: inline-block、f-w:700はfont-weight: 700、b-r:.4ならborder-radius: var(--z-dot4)といった具合に、規則され学習すればCSSを確認せずにHTMLを書くと同時にデザインも出来るのでCSSを
Smoothie-3Dは写真から3Dモデリングを自動で行ってくれるWebサービスです。任意の写真をトレースすると自動で3Dモデルを作成してくれる、というもの。ざっくりと輪郭を、というのではなく、3Dにしたい対象物を部位別にトレースするのがコツみたいですね。慣れたら楽しそう。 Smoothie-3D
Bookmarklet Combinerは複数のブックマークレットを一つのブックマークレットに纏めてくれるWebツールです。多数のブックマークレットを使用しているなら使う価値はありそう。 Bookmarklet Combiner
DOM要素を選択してそこに当てられているスタイルを変更するだけなので、CSSを書く必要がありません。細かいことは出来ませんが、楽でいいのでは。 このように、サイドにセッティングボックスが出るのでマウスで要素を選択して変更するだけ。 要素を選択するには上記のアイコンをクリックすれば要素を選べるようになります。 なかなかに便利です。ご利用は以下よりどうぞ。 Stylebot
HTMLの構文チェックをその場で できるブックマークレットです。 問題箇所の数や、問題箇所もお しえてくれます。割と便利そう だったのでご紹介してみます。 HTMLのlintです。ブックマークレットを起動させてその場で解析、問題箇所も教えてくれます。 OSSとしてGithubでも公開されてますので日本語に直しての利用も出来ますね。 ↑ 起動させるとすぐに解析してくれます。 ↑ 表示されたボックス下部のView Reportに進むと個別箇所が一覧で表示され、それぞれの問題箇所を上図のようにアイコンで教えてくれます。 errorとwarningの表示/非表示のスイッチも出来ます。なかなか便利ですね。 HTML_CodeSniffer
ちょっと便利そうだったので 備忘録。スマフォやタブレット のデバイス別にそれぞれに適応 させたいCSSを管理画面内で 書ける、というWordPressの プラグインです。 スマフォでもiPhone用、Motorola用、タブレットならiPad用、Nexus用、Kindle用などのように細かく設定できます。 シンプルなプラグイン名ですが、かなりの数のスマフォとタブレットデバイスをサポートしています。個別にCSSを適応させられるのでコンテンツ次第では結構役立ってくれるかもしれません。 カスタム投稿タイプを応用してCSSを書く、と言う珍しい仕様です。いつも記事を書く場所にCSSを書き込みます。後は下部のメタボックスでデバイスを選択し、保存すればデバイスごとにCSSを適応させる事が出来ます。 他のデバイスに別のCSSを用意したい場合は、記事を追加する感覚で再度作ればいいだけ。メタボックスのセレクト
レスポンシブなWebデザインを 作るときに役立つ情報やツール などをまとめているWebサイト、 This Is Responsiveをご紹介 します。情報はかなり出回って いるのでこうして纏められると 助かります。 レスポンシブWebデザイン向けリソース集です。 メニューはPatterns、resources、newsで、それぞれレスポンシブなWebデザインを作成する際に役立つ情報が纏められています。 ↑ 例えばPatternsではレイアウトやナビゲーション、フォームなどの情報を網羅。codepenでデモも作成されています。 ↑ 役立つツールなどもてんこ盛り盛り。 newsはtumblrで新鮮な情報を教えてくれます。覚えておくと重宝しそうですね。 This Is Responsive
実用性の無いネタ的な内容です。 JavaScript等を使わず、CSSだけ でYoutubeのフレームを作ってみ ます。CSSだけで作ったからどう、 という訳ではないですけど・・ 実用的な内容じゃないので適当に流してくだされば幸いです。 デモまずはデモから。Chrome以外では確認してないしフレームも適当ですのでその辺はスルーでお願いします。 再生できましたでしょうか。 方法は多分すぐに分かったと思いますけど、一応解説的なものを書いてみます。 Youtubeをz-indexに対応させるYoutubeは通常z-indexを指定しても一番上に来てしまいます。ナビゲーションなどをposition:fixed;しているサイトなどでスクロールするとYoutubeだけ一番上を通ってしまう光景を見たこともあるのではないでしょうか。 これを、ちゃんと下に通るようにする、z-indexに対応させるにはYou
ちょっと調べ物をしたので備忘録です。 デザイナー専門のコミュニティサイト、 Dribbbleの投稿を自分のサイトに表示 させる方法。APIとjQueryを使って表示 させて見ます。日本ではDribbbleの利 用者は少なそうですけど・・ Dribbbleはデザインなどの成果物を投稿し合うコミュニティサイトです(多分。よく知らない)。最近はフリーで配布されるようなアイコン集などにもDribbbleのアイコンが含まれているみたいです。 この、Dribbbleへの投稿内容を自分のサイトに表示させる、というのが今日の内容です。 Sample僕はDribbble使った事ないので他の方のID借りた。thx:Jonathan Quintin 投稿のサムネとリンクだけのシンプルなものです。 コード$.getJSON("http://api.dribbble.com/players/ユーザーID/shots
羅列された要素をフェードイン しながら徐々にランダムで表示 させるエフェクトをjQueryで実装 出来る、というプラグインの ご紹介。割と短いコードで作れる エフェクトなので覚えておきたい ですね。 要素をフェードインさせながらランダム表示させるjQueryのプラグイン・champagne.jsです。 champagne.js とても軽量で、テキストでも画像でもOKです。シンプルなので色々応用が利きそう。 以下動作サンプルです。※再生ボタンで動作します。 コード <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.champagne.m
以前少し話題になった、Nizoというサイト がああります。このサイトで導入している、 スクロールに応じて要素をアニメーション させるエフェクトがちょっと素敵なんです が、これと同じような効果をjQueryで作る、 というのが今日の記事内容です。 どんなエフェクト?って思われた方はNizoでスクロールしてみてください。このエフェクトをjQueryで作る方法が公開されていたので一応メモです。 Intriguing animate-on-scroll effect スクロールすると左右からいろいろ集まってきます。まぁそれだけなんですが、インパクトはありますね。 IE7でも問題なく動作しました。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquer
使いそうだったので備忘録。Facebook で恐らく最も利用されてると思われる ソーシャルプラグインのLikeboxと似た ようなものを、Twitterアカウントで 作成するjQueryプラグインです。デザ イン的にもバランスが取れるので覚え ておいて損は無いのでは。 と言うわけでLikeboxライクなTwitterウィジェットです。自身のアカウント、フォローボタンと、フォロワーさんのアイコンを表示する事が出来ます。 よく見かけるアレのTwitter版です。以下サンプル。 Sample 一部日本語に変えました。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script src="jquery.follow
時間無くてCSS3の部分だけ調整してません。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script src="js/presenteer-1.0.js"></script>本体とプラグインを読み込みます。 $(window).load(function() { var presentation1 = new Presenteer("#presentation1", $("#presentation1 > div"), { centerHorizontally : false, centerVertically: true, followElementTransforms: true }); $("#pr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く