Fontistoは沢山の汎用的なアイコンフォントと、そのフォントを活用するためのCSSをセットにしたツールキットです。アイコンはフォントだけでなくPNGも同梱されています。それぞれのアイコンはセットになっているCSSでclassが用意されているので全部読みこんでclass付与すればアイコンが表示される、というもの。なかなか便利ですね。ライセンスはMIT。 Fontisto
![アイコンフォントとCSSをセットにしたツールキット・「Fontisto」](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b7b3ce54e216a2e21c931149e4cebb442290b9e/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2017%2F10%2Ffontisto01.jpg)
既存のページに外部CSSを加えるだけで、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめたCSSのフレームワークを紹介します。 Flexboxを使ってみたい、天地の中央に配置したい、シャドウを加えたい、レスポンシブ対応のナビゲーションを備えたいなど、簡単に利用できます。 デザインにも幅広く対応しているので、自分のオリジナルのデザインで利用できます。 Tailwind CSS Tailwind CSS -GitHub Tailwind CSSの特徴 Tailwind CSSの使い方 Tailwind CSSで用意されているスタイル Tailwind CSSの実装例 Tailwind CSSの特徴 Tailwind CSSはMITライセンスで、個人でも商用でも無料で利用できます。 ボタン、フォー
Result jQuery$(function() { zoom = $('.feature').css('background-size') zoom = parseFloat(zoom) / 100 size = zoom * $('.feature').width(); $(window).on('scroll', function() { fromTop = $(window).scrollTop(); newSize = size - (fromTop / 3); if (newSize > $('.feature').width()) { $('.feature').css({ '-webkit-background-size': newSize, '-moz-background-size': newSize, '-o-background-size': newSize, '
PaperCSSは手書き風のゆるーいスタイルなCSSフレームワークです。フォントにはPatrick Handが使われ、ボーダーも真っすぐな線ではなく、ラジオボタンやチェックボックスも手書きのようなスタイルとなっています。くだけた感じのスタイルを提供するのが目的のよう。昨今のWeb上ではモダンで洗練された綺麗なスタイルばかりで疲れたらしいです。 個人的には洗練されているのが美しいと感じるのではなく、単純に見てて疲れないシンプルなスタイルが好き(このブログはシンプルに作れてないですけど)ってだけなんですが、確かに同じようなスタイルばかりで見飽きる方もいるかもしれませんね。数年前は手書き風とかテクスチャを使った~、みたいなスタイルも見かけてたんですけどちょっとロードが重くなったりもするし難しいですね。 本フレームワークは手書き風ではあるもの、シンプルに作られていて割と見やすい印象なので面白いなぁ
DesignEvoは、10000以上のテンプレートを備えた無料のオンラインロゴメーカーで、誰でも使えるようにシンプルにデザインされています。
Balloon.cssはCSSのみで設定可能なツールチップライブラリです。カスタムデータ属性を含めるだけで左右上下に自由に出すことができます。ふわっと浮かび上がるシンプルなエフェクト付き。 使い方は、data-balloonで表示させたいテキストを設定、data-balloon-posでツールチップの位置を設定します。upなら上、leftなら左、up-leftなら上で、矢印を左側に設定できます。また、data-balloon-lengthで吹き出しのサイズを設定できます。CSSのみのツールチップライブラリは過去にもいくつかありましたが、こちらが一番使い勝手がよさそうです。ライセンスはMIT。 Balloon.css
Light ModalはCSSのみで実装できるモーダルウィンドウライブラリです。エフェクトを追加する場合もJavaScriptを使用せず、Animate.cssを読み込み、任意のclassを付与する事でアニメーションエフェクトを追加する事ができます。楽でいいのではないでしょうか。ライセンスはMIT。 Light Modal
WordPressのテーマファイルも目を離すと、便利になり、とんでもなく進化しています。企業サイトやプロダクトのランディングページ、ポートフォリオ、個人ブログなど向けに制作されたWordPressのテーマファイルを紹介します。 WordPressは、11/14にメジャーアップデートとなる4.9のリリースが予定されています。おそらく5.0ではGutenbergが実装されるので、それへの足掛けとなるのでしょうか。 Sydney デモページ ビジネス向けのWordPressのテーマファイル。レスポンシブ対応で、ヘッダやコンテンツやナビゲーションなどのレイアウトは多くのカスタマイズが用意されています。ランディングページ用のコンポーネントは組み合わせて利用できます。 Hestia デモページ ランディングページをはじめ、Eコマース、ブログなど、多目的用のWordPressのテーマファイル。Mater
Unsplash Awards 2017で、自然・風景、空撮、人物、動物、スポーツ、食材・料理、インテリア・建築、モノクロ写真など、全12部門でもっとも印象的でかっこいい高品質な写真素材が選出されました。 商用利用無料で、とにかく抜群にかっこいい高品質な写真素材を探している人は要ブックマークです。 Unsplashで扱われているすべての写真素材は個人でも商用でも無料で利用できます。クレジットの表記義務もありません。 ダウンロードした写真素材はそのまま利用するだけでなく、編集・加工して、Web・動画・紙などのさまざまなデザインに無料で利用できます。 ライセンスページ ライセンスを確認したところで、Unsplash Awards 2017に輝いた12作品を紹介します。
サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンクを発生せず、リフローを起こさずにスムーズに動作。 サイドバーとコンテナのサイズが変更された時は、それらのサイズを正確に再計算。 特定の状況下でフックするために、イベントトリガーを用意。 コンテナが長くても短くてもサイドバーを扱うことができます。 他のスクリプトへの依存はなく動作。 jQueryやZeptoのプラグインとして利用することも可能。 実装はスーバー簡単! Sticky Sidebarのデ
文字をぴったり揃えたのにしっくりこない、正方形なのに長方形に見えてしまう、シャドウを与えていないのにぼんやりとシャドウが見える、ボーダーを加えただけなのに塗りも変わったように見える、そんな経験はありませんか? WebサイトのUI、アイコン、ロゴ、イラストなどでデザインしている時に誰しも経験したことがあると思います。これらの原因は目の錯覚によるもので、その仕組みを理解することで困惑されることなく、効果的に利用することもできます。 11 Optical Illusions Found in Visual Design by Balraj Chana 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 三角形の交点による錯覚 垂直の水平方向による錯覚 明度による錯覚 奥行きによる錯覚 格子による錯覚 コントラストによる錯覚 カラーによる錯
ayaka @citacitayaka 【本日発売】『アサシンクリード オリジンズ』 歴史学者監修の元で古代エジプトの街を忠実に再現。カエサルやクレオパトラも登場する絢爛豪華な歴史スペクタクル。 街の猫もお供の鷹もモフり放題! 来年には、敵が出現しない観光特化モードが無料追加。ゲームが苦手な人も旅行気分で是非! pic.twitter.com/InGDJyzcFx 2017-10-27 12:22:40 ayaka @citacitayaka 「歴史好きなので、アサシンクリードをやってみたいけどゲームが苦手で」っておっしゃる方をお見受けしますが、今日発売の『アサシンクリード オリジンズ』は、来年の無料アプデで「敵が一切出ず、ガイドツアーを楽しめる」モードが追加予定なので買って!日本語化します。これはミイラづくりツアー。 pic.twitter.com/yIK2wjPIAt 2017-10-
今から21年前、下積みを重ねたSMAPにようやく人気が出始め、まさにこれからという時、メンバーの森且行から脱退を知らされた当時の香取慎吾が思ったというホンネだ。しかし、森もまた、思い悩んでいたという。子供の頃からの夢であるオートレース選手になれる最後のチャンスを逃したくはなかったし、いまSMAPを抜けていいものか――。 これが生で放送されたのが、インターネットテレビ局AbemaTVの「稲垣・草なぎ・香取3人でインターネットはじめます『72時間ホンネテレビ』」。ジャニーズ事務所を去った元SMAPの稲垣吾郎(43)、草なぎ剛(43)、香取慎吾(40)の3人による11月2日午後9時から3日間、ぶっ続けの生放送である。放送は同局社長である藤田晋(44)の持つ軽井沢の別荘から始まった。都内に移動し、脚本家の三谷幸喜(56)や山田孝之(34)、市川海老蔵(39)らをゲストにトークを繰り広げた。 3日夜
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く