Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
これはすごく便利！85,000個のアイコンから選んで、自分好みにカスタマイズしてダウンロードできる -Icons8 | コリス
当ブログでもたくさんの無料アイコンを紹介してきましたが、自分にぴったりのアイコンを探すのはかなり大変だと思います。85,000個以上の高品質なアイコン素材を自由にカスタマイズしてダウンロードできる新しいIcons8を紹介します。 下記のようにカラー変更は当たり前、要素を加えたり、文字入れしたり、さまざまなカスタマイズに対応しています。SVGも完備されているので、重宝しますね。 Icons8 beta Icons8の使い方 無料で利用できるアイコンはなんと、85,000個以上 Icons8の使い方 Icons8の使い方は、簡単です。 さまざまな機能が用意されていますが、直観的にすべてを利用できると思います。 アイコンの選択から、カスタマイズ、ダウンロードまでざっと説明します。
任意のテキストでチェックボックス
Result 任意のテキストとか任意のスタイルでオリジナルなチェックボックスを作れます css.text-checkbox { display: block; } .text-checkbox input { display: none; } .text-checkbox span { font-family: monospace; } .text-checkbox .checked { display: none; } .text-checkbox :checked ~ .checked { display: inline-block; } .text-checkbox :checked ~ .unchecked { display: none; }html<label class="text-checkbox"> <input type="checkbox" name="one"> <
特定の文字だけスタイリングする
Result jQuery/* highlight v3 Highlights arbitrary terms. <http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html> MIT license. Johann Burkard <http://johannburkard.de> <mailto:jb@eaio.com> */ jQuery.fn.highlight = function(pat) { function innerHighlight(node, pat) { var skip = 0; if (node.nodeType == 3) { var pos = node.data.toUpperCase().index
[CSS]シンプルな気持ちいいアニメーションで、ボタンのテキストと背景をホバー時に変更するスタイルシートのテクニック
ボタンをホバーすると、テキストと背景をスライドのアニメーションで変更するスタイルシートのテクニックを紹介します。 ぱっと見、スクリプトを使ってるように見えますが、スタイルシートのみの実装です。 Button with slide hover transition 実装もシンプルです。 HTML hrefにはリンク先を入力して利用してください。 <div class="btn-cont"> <a href="javascript:void(0)" class="btn"><span>twitter</span></a> </div> CSS ホバー時に変更するテキストと背景は「body .btn-cont .btn:after」に記述します。 body .btn-cont { position: absolute; top: 50%; left: 50%; -webkit-transform
![[CSS]シンプルな気持ちいいアニメーションで、ボタンのテキストと背景をホバー時に変更するスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/c57794ed73c7db091610513a15f90475d1cdcecb/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112103.gif)
Office（Excel/Word/PowerPoint）でテキストの色を一括置換する方法
Microsoft Office（Excel/Word/PowerPoint）でテキストの色を一括置換する方法を紹介します。 １．問題点 Microsoft Office（Excel/Word/PowerPoint）で入力したテキストの色を別の色に変更したいのですが、変更箇所が大量にあり修正が大変です。 なお、テキストを全選択状態にして色を変更する方法ではなく、特定の色のテキストを別の色に変更することを希望します。 ２．テキストの色を一括置換する ここではExcelを使って、下記の赤色部分のテキストをまとめて青色に変更する手順で説明します。 「ホーム」タブをクリック。 「検索と選択」→「置換」をクリック。 「検索と置換」ダイアログが開くので「オプション」をクリック。 「検索する文字列」の右側にある「書式」をクリック。 「書式の検索」ダイアログが開くので「フォント」タブをクリックして赤色を選
バイク買取価格の相場は？高く売れるバイクの特徴｜知りたかったバイク断捨離アレコレ
このサイトでは、バイク買取で知っておきたい内容を取り上げます。 まず最初に、バイクの買取価格の相場の考え方を取り上げ、高く売れるバイクの特徴を考えます。 加えて、バイクの買取を依頼した場合のキャンセルの期限や、カギがないバイクの買取が可能かどうかについても記載します。 そして、バイクを買い取ってもらう場合の手順もわかりやすく説明し、さらには、まだローンを支払っているバイクを売却する場合の注意点もお伝えします。 バイク買取の相場はバイクの車種や年式などによりある程度決まっています。 一般的に、バイクの年式が新しく人気が高い車種は高値で買い取ってもらえる確率が高くなります。 そして、バイク買取を考えている人は、自分のバイクの買取相場を知っておくと買取業者に安く買いたたかれることを防ぎ、適正価格で売却するのに役立ちます。 高く売るためには、相場以外に大切な要素があります。 その一つが売却する時期
Mergely - Compare and merge document differences online
Pure Javascript / HTML5 Written in pure Javascript, Mergely compares documents directly in the browser. Markup and merging are done in real-time with no calls to a server. Track your document changes online Track and merge your documents online. Mergely shows you changes to documents side-by-side so you can clearly see what changed from one version to the next. Mergely helps you take control Take
[JS]スクロールやスライド時に変化する背景に合わせてナビゲーションのテキストなどを最適なカラーにするスクリプト -BackgroundCheck
ユーザーのアクションで背景が変化するコンテンツ、例えば、複数のパネルを垂直に配置し、パネルごとに背景のカラーを変えているとか、スライダーの画像や写真に明るいカラーや暗いカラーが混在しているなど、そういった時にナビゲーションを暗いカラー、もしくは明るいカラー、どちらにしようか迷うことがありませんか？ 変化する背景のカラーに合わせて、指定したテキストやエレメントを最適なカラーに変更するスクリプトを紹介します。 BackgroundCheck BackgroundCheck -GitHub BackgroundCheckのデモ BackgroundCheckの使い方 BackgroundCheckのデモ デモは、スクリプトの基本性能、スクロール、スライドの3種類です。 Chrome, Safari, Firefoxなどモダンブラウザをはじめ、iPhone/iPadなどのiOS6/7でも動作します
【WordPressで感覚的にヘッダー画像を変更できる機能を付ける】カスタムヘッダー機能を付けて納品するとお客さんにとても喜ばれます｜今村だけがよくわかるブログ
【WordPressで感覚的にヘッダー画像を変更できる機能を付ける】カスタムヘッダー機能を付けて納品するとお客さんにとても喜ばれます Webサイトを作る際に「ヘッダー」って結構凝りますよね。カッコイイ、インパクトあるキレイな画像やロゴなどで目を惹いて、サイトの印象を決めるのに一役買っていますかね。 私のこのブログの場合は、ヘッダーにロゴを入れています。このヘッダーにあるロゴのおかげで、結構サイトの存在を覚えてもらいやすくなっていますよ。「ああ～、あの色がいっぱいあるサイトね」みたいな・・・ そんなヘッダーですが、手軽に管理できる方法がWordPressにはあります。「カスタムヘッダー」機能と呼ばれています。この「カスタムヘッダー」機能を導入して納品すると、お客さんにとても喜ばれます。 ではでは、導入方法をご紹介します～。 ヘッダーを管理する「カスタムヘッダー」機能を追加それでは、ご使用のテ
[JS]テキストでも画像でもリストでもテーブルでも、長いコンテンツにスクロールバーを加えるスクリプト -Scrolite
デモページ：p要素 Scroliteの使い方 外部ファイル スクリプトとスクロールバー用のスタイルシートを外部ファイルとして記述します。 <script src="lib/jquery.min.js" type="text/javascript"></script> <script src="lib/jquery.scrolite.min.js" type="text/javascript"></script> <script src="lib/jquery.mousewheel.js" type="text/javascript"></script> <link rel="stylesheet" href="styles/jquery.scrolite.css"></link> HTML HTMLは基本的にはそのままです。 jQueryのセレクタで指定するために、classを加えると便利
[JS]文字にアニメーションを使った面白いエフェクトを与えるスクリプト -Text Effects
Scrambled Writer 文字をごちゃまぜにし、アニメーションで元通りにします。 Text Effectsの使い方 Text Effectsの使い方は簡単で、「jquery.js」と当スクリプトを外部ファイルとして記述し、スクリプトを実行するだけです。 「Typewriter」を例にすると、下記のようになります。 HTML <div id="my-container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip e
jQuery – テキストを取得・変更する『 text() 』 | 1：n – DETELU Blog
要素内にあるテキストを取得・変更する場合は「text()」を使います。 取得する場合は「text()」、変更する場合は「text(“変更後の文字列”)」を指定します。 //id=#msg内のテキストを取得します。 $("#msg").text(); //id=#msg内のテキストを「文字を変更しました。」に変更します。 $("#msg").text("文字を変更しました。"); サンプル１ jQuery – text サンプル１ <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <title>jQuery - text サンプル１</title> <script type="text/javascript" src="../jquery-1.2.6.min.js"></scri
文字を別の文字に切り替えながら超クールにアニメーションさせながら表示「Shuffle Letters Effect」:phpspot開発日誌
文字を別の文字に切り替えながら超クールにアニメーションさせながら表示「Shuffle Letters Effect」 2011年09月29日- Shuffle Letters Effect: a jQuery Plugin | Tutorialzine 文字を別の文字に切り替えながら超クールにアニメーションさせながら表示「Shuffle Letters Effect」。 Flashサイトなんかであったりするあのエフェクト。ちょっと言葉では説明しづらいんですが、別の文字からa,b,c という感じでアニメーションさせつつ切り替えながら本来表示すべき文字にするというモノです。 デモページ - ページ下部に文字を入れてEnterキー ド派手ってわけじゃないんですが、なんかカッコイイですよね。 タイトル文字なんかをアニメーションさせれば単なるテキストでもインパクトがあります。 次のようにコールするだ
設定も簡単・軽量(5KB)・シンプルな、Webサイトのフォントサイズを変更できるjQueryプラグイン・Font sizer
なかなか便利かもと思ったのでメモ。よくある、 フォントサイズを変更できるやつなんですけど、 設定が凄く楽で軽量なjQueryプラグインです。 導入も楽なので積極的にうまく入れて行きたい ですねー。正直使ってもらえるか分からない ものですけど、あれば誰かに役に立つかも 知れませんし。 軽量でシンプルなフォントサイザーです。クロスブラウザで動作してくれて細かい設定も簡単に出来ます。ライセンスはMITとGPLのデュアルライセンスとなっています。 これこれ。よく見かけますよね。多くの場合は小、中、大となっていますが、これはもっと細かい設定を簡単に行えます。ボタンは若干分かりにくいのでその辺は工夫してみてください。 設定を変えるプラグイン（jquery.fontSizer.js）を開いて20行目あたりの変数定義の部分です。 var defaults = { maxSize: 30, minSize:
指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」:phpspot開発日誌
FontSize | jQuery Plugins 指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」 特定のエレメントをクリックした際に、指定した要素のフォントサイズをUPさせることが可能。最大や最小のサイズも指定出来ます。 使い方は簡単で、必要なライブラリを読み込んだら次のように呼び出すだけです。 $(element).fontSizer({ action: "up", elements: "#content", max: 36 }); デモページはこちら コンテンツをどんどん大きくしていった例。maxを指定しておくと一定以上からサイズは大きくならなくなります。 エレメントを絞ることで、サイト全体のレイアウトが崩れることもありません。 ちょっとしたユーザビリティの向上に知っておいてもよさそうなプラグインですね。 関連エントリ コンピ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
zencode.in
IDEA * IDEA
文章中の任意のキーワードをアニメーションしながら定期的に別のキーワードに置き換える軽量jQueryプラグイン・dynamo.js
[CSS]テキスト選択時のハイライトのカラーを変更するスタイルシート