フォント検索・ワイヤーフレーム化・グリッド表示など、web制作時に便利なブックマークレット 15 - NxWorld
閲覧ページにグリッドを表示させたりレスポンシブ確認を容易にするものをはじめ、使用されているフォント確認、ページをワイヤーフレーム化するもの、ページの表示速度やHTMLチェックを行ってくれるものなど、サイト制作時や気になるサイトのことをちょっと調べたい時などに便利なブックマークレットを紹介します。 中には拡張機能やデベロッパーツール使えば十分というものもありますが、拡張機能を入れすぎて重くなるのを防ぎたいという場合やデベロッパーツールをあまり使っていないという人には手軽で便利ですし、何より様々なブラウザで使用できるのが嬉しいと思います。 ここではブックマークレットとして紹介していますが、中にはChromeの拡張機能として利用できるものもあるので、その場合は自分が使いやすいと思う方を利用してみてください。 また、ブックマークレットによってはPCだけでなくスマートフォンなどでも十分利用できるもの
Web制作に役立つ便利すぎるブックマークレットのまとめ
Webサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなったり、Chromeで使えるけど他で使えないなどあるので、ブックマークレットもなかなか重宝します。 ページにグリッドを表示した確認 レスポンシブWebデザインの確認 デザインの確認をピクセル単位でできる ページで使用しているフォントをチェック ページをワイヤーフレーム化 ページの構造が正しいか確認 マークアップのいまいちな箇所を指摘してくれる 背景を素敵なテクスチャに変えてみたい ページのパフォーマンスを確認 minifyされたCSSを見やすく表示 SEOやソーシャルメディアに大切な項目を確認 コードとアクセシビリティをチェック ページにグリッドを表示した確認
私がよく使っているウェブサイト作成に役立つサイトやツールのまとめ【2014年8月】
こういの記事を定期的に書いていますが、以前のものは古くなっているので書いてみます。ウェブサイト、ブックマークレット、拡張機能（Chrome）から本当によく使っているものを無理やり数を増やすことなく厳選して紹介します。 実際にウェブサイトを作成する時にお世話になるであろう順番で紹介します。ウェブサイト、ブックマークレット、拡張機能（Chrome）ごとで分けていませんのでご注意ください。 I/O 3000 | Webデザインギャラリー 【ウェブサイト】 ギャラリーサイトって同じサイトが紹介されていることも多いので、あまり色々を見ません。最近はこちらをよく見ます。更新頻度も高く、カテゴリやタグ分けも使いやすくなっています。 とはいうものの、もっと色々見たいというときもあるので、そんなときは以下のサイトもよくみます。どれもきれいで見やすいサイトです。やっぱり無限スクロールがいいですね。 【S5-S
iOSのSafariで文字選択が思い通りにならないときに使える画期的な対処方法
iOSのSafariで文字選択が思い取りにならなくてイライラすることがある iOSのSafariで表の中の文字の一部分を選択しようとしても、セル全体になってしまったり、行全体になってしまったりして、必要ない文字まで選択、コピーするハメになって面倒なことがあります。 特に、viewport指定で拡大が禁止されている場合はやっかい。 拡大が禁止されていなければ、拡大すると表の中であっても部分選択ができるようになるのですけどね。 あるブックマークレットを使うと表の中の文字であっても自由に選択できるようになる 今回紹介するブックマークレットを問題のページで実行するとアラ不思議！ 表の中の文字であっても自由に選択できるようになります。（続きは[Read More]から） ブックマークレットのSafariへの登録 以下のブックマークレットを全選択してコピー。 javascript:document.b
samulife.com - このウェブサイトは販売用です！ - samulife リソースおよび情報
このウェブサイトは販売用です！ samulife.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、samulife.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
ベビー服を送ろう！
�お祝いにベビー服を！ お祝に喜ばれる物はなんでしょうか？ 赤ちゃんの出産祝いには何が喜ばれるのでしょうか？ 出産祝いには何を送ればいいのか。 その中でも最近、関心が高いのは気になる出産祝い。 というのも、出産祝いには何を贈っていいか困りますよね。 色んな出産祝いがあるかとは思います。 その中でもベビー服なんかはとても気になります。 ベビー服には色んな種類がありますが、個人的に気になるのは 動物の形をした着ぐるみ。 あの着ぐるみを着てチョコチョコ動いているだけでとても可愛いく感じるのですよね！ ヌイグルミみたいな風合いと可愛らしい着ぐるみが思わず、後ろから抱きしめたくなります。 出産祝いは色んな物がありすぎて困りますが、やはり定番の商品は強いのではないかと感じます。 ベビー服、候補の中に入れてみてはいかがでしょうか？ ベビー服には男性、女性用と色んな商品がありますが、色を中性的な色にしたら
ハロウィンなのでHTMLをぶるぶる震わせてみました - ✘╹◡╹✘
使い方 ぶるぶる震える ↑このリンクをブックマークに登録して使ってください 説明 適当なJavaScript製のHTML-Lintを実行して、検知されたHTML要素をCSSでぶるぶる震わせます。 チャットで雑談してたら急に震わせたくなって10分ぐらいで作ったのでだいぶ雑です。 実装 jQuery + jRumble + curtisj44/HTML-Lint https://gist.github.com/r7kamura/bc1577d4410891ade243 誰かJavaScript製のかっこいいHTML-Lintつくってください Webサイトつくってる人は開発環境に入れておくと便利かもしれません
HTMLコーディングの問題点を浮かび上がらせてくれるブックマーク·DiagnostiCSS MOONGIFT
DiagnostiCSSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Webブラウザはよく出来ていて、Web標準に沿っていなくともそれっぽく表示してくれます。しかしそれに安穏としているとレガシーなブラウザなどで表示が失敗したり、意図した動作にならないことがあります。そこでDiagnostiCSSを使ってチェックしてみましょう。 MOONGIFTで実行しました。様々な枠が表示されました。 マウスオーバーで画面上部にメッセージが表示されます。例えばonclick指定の指摘です。 かなりダメなところは赤い枠になっています。 DiagnostiCSSでは問題のあるHTML要素について枠で囲むことで問題を把握しやすくしてくれます。主にインラインスタイルやイベント属性、無効なリンク、空または廃止予定の要素、必要な属性のない要素などがリストアップされます。 HT
パスワードを表示するブックマークレット
入力フォームのパスワードフィールドのパスワードを一発で表示するブックマークレットを作りました。 １．概要 ログイン時の入力パスワードをブラウザなどに記憶させて使っている人は少なくないと思います。 が、別のPCでログインしたり、パスワード変更時に前のパスワードを入力しないといけないときなど、入力していたパスワードをうっかりすっかり忘れてしまうケースもあると思います。 このブックマークレットを使えば、入力しているパスワードの内容を一発で確認することができます。 注：ご利用にあたっては、パスワードを忘れたときのみブラウザのお気に入りに登録し、確認後はすぐに削除するようにしてください。 １．ブックマークレットの使い方 以下のリンクをブックマークして、パスワードを見たいページを保存してブックマークをクリックまたは選択すれば、パスワードが表示されます。 パスワード表示 パスワード入力ページを表示します
RSSフィードをFeedlyに登録するブックマークレット
7月1日以降のためにFeedlyへの「新しいフィード登録」できるブックマークレットを作りました。厳密には既に公開されているものを修正しました。 ブックマークレットの修正 ブラウザで開いているサイトのRSSフィードをFeedlyに登録するブックマークレットが公開されていますが、Feedly Cloudのリリース前のものまのでURLやパラメーターも変わっているし、コメントフィードを取得してしまう様子。 なのでこれを修正しました。次のリンクをこのままPCブラウザのブックマークバーにドラッグ＆ドロップで登録してください。 Add to Feedly Cloud ただし、RSSフィード情報がHeaderタグ内にあり、サイト全体のフィードが先頭にあることが条件です。たとえば、Bodyタグ内にRSS追加ボタンしかない、またはコメントフィードがサイトフィードよりも前になる場合などは追加登録できません。 [
pixiv16322 : pixiv企画用ブックマークレット1
2013年04月19日09:15 カテゴリブックマークレット pixiv企画用ブックマークレット1 Mocaのコーヒーブレイク様のBookmarklet作成を参考にして、 pixivのイラスト作品IDでのイラスト作品検索を補助するブックマークレットを作ってみました。 作品ID検索(イラスト) 上のリンクを右クリックやドラッグアンドドロップなどでブラウザにブックマークして、 pixivの作品ページ上でクリックすることで該当作品IDでの イラスト作品のキャプション検索結果ページが表示されます。 google chromeとinternet explorerで正常動作を確認しています。 URLが【https://www.pixiv.net/artworks/作品ID】 以外の形になっている場合は動作しない場合があります。URLを確認した後再度お試しください。 ---- 2017年7月10日追記…
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
iCloudを使って超面倒くさいiPhoneのブックマークレット登録を簡単に行う方法 - もとまか日記乙
iPhoneやiPadで利用するSafariのブックマークレットはとても便利。でも、一つだけ欠点があります。それは、 登録するのが超面倒くさい！ という点。 でも、iCloudを使ってMacのSafariでブックマークレットを登録すれば、iPhoneへのブックマークレットも超簡単に出来てしまいます。以前からMobileMeで出来てたようですが、全ての人がその恩恵を受けられるのは、喜ばしいことでしょう。 てことで、以前作ったブックマークレットの中から厳選して、MacのSafariからiCloud経由で登録する用に整理してみました。 iPhone、iPad向けブックマークレットソースコードテキストエリアの高さを変更するブックマークレットjavaScript:num=prompt('','300');var a=document.getElementsByTagName('textarea');
Googleブックマークに追加するブックマークレット（メモ欄対応版）
私がメインに使ってるソーシャルブックマーク（SBM）は、はてなブックマーク（はてブ）なんだけど、最近Googleブックマークとかと使い分けるようになった。 で、Going My WayさんのGoogle Bookmarkにさっと追加できるBookmarkletというページに Google Bookmarks用のブックマークレットが公開されているのだけれど、これは残念ながらURIとタイトルしか持って来ることができないので少し不便… で、ちょっとググってみると観測気球さんの右クリックで Google Bookmarkというページに、引用したい文章を選択状態にしてブックマークレットを実行すると、メモ欄にその文章が入力された状態になるブックマークレットを見つけた…んだけど、IE用？なのか、Syleraでは動かなかったので、それらを参考に、ちょっと自分で作ってみました。 使い方自体は、観測気球さんの
おこめっと
これからWEBデザイナーを目指す方は、リモートワークはどの程度自由なのか、気になりますよね？ 現在出社して働いている人であれば尚更「在宅で働けるなんて憧れ！」と思うかもしれません。「ちょっとくらいのサ ...
Google+1のボタンが無いサイトでも+1が出来るブックマークレット
タイトルが若干意味不明なんですが、 Google+がリリースされたり、日本の GoogleのSERPsにもGoogle+1が ではじめたので、もしかしたらこれから ボタンを設置するサイトも増えるかも しれません。 Facebookの「いいね！」も当初は設置しているサイトが少なかったのですが、僕はブックマークがわりに使いたかったのでブックマークレットで今も無理やりLikeしてます。 で、Google+1ボタンも出来たら嬉しい人がいるかなと。いないかなｗ Google+1 Bookmarklet いつもお世話になっているWebデザインレシピさんでテストしてみました。ブックマークレットを使うと右上にGoogle+1ボタンが表示されますので押せばいいだけ。 以下のリンクをブラウザに登録してください。Chromeでしか試してないです。ブックマークレット使ってから表示されるまで多少時間かかりますけど、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
利用されているWebフォント名と、そのフォントの表示テストを行えるブックマークレット・「Type Sample」
[Å] Feedly利用者必見！見ているサイトをその場で即Feedlyに登録するPC版Chromeブックマークレット！![[Å] Feedly利用者必見！見ているサイトをその場で即Feedlyに登録するPC版Chromeブックマークレット！](https://cdn-ak-scissors.b.st-hatena.com/image/square/e67f596b7ff4ea08b4c184e1d206cde058d7595f/height=288;version=1;width=512/http%3A%2F%2Fwebmemo.biz%2Fwp-content%2Fuploads%2Ffeedly-chorme-eye.jpg)
【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 初代編集長ブログ―安田英久
今見てるページタイトルとURLをコピーし、Amazon商品ページだったらアフィIDを付けるブックマークレット
