UnCSS Online!
Advanced usageFor advanced options please consider adding UnCSS to your devstack - Gulp, Grunt, PostCSS. What is this good for?Do you have static 404 or 500 page, bundled styles for the whole site and you need only couple of CSS for these static pages to work? Well, here you have the tool for that. You're welcome.
[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS
HTMLは間違って記述されても、重大なエラーになることはあまりありません。 そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 インラインのスタイル リンクのターゲット アクセシブルではない画像 ドキュメントの言語指定 不適切な文字セット アクセシブルではないビューポート属性 ラベルのないフォーム要素 空のインタラクティブな要素 不必要、あるいは非推奨の属性 インラインのスタイル このセレクタは、インラインのスタイルが適用されているページ上のあらゆ
![[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2a96d59143a2df01b38a0f16d119ef1fc6061d4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017031401.png)
phantomscanner - ポートチェックとスクリーンショット
社内でPC管理を行う際に大事な要素が余計なポートが開いていないかどうかのチェックです。特に80番ポートが開いていると悪意のあるウェブサイトを閲覧した際に攻撃される可能性があります。 空いているポートをチェックするソフトウェアも多数ありますが、今回はphantomscannerを紹介します。ポートのチェックと一緒にスクリーンショットを撮ってくれます。 phantomscannerの使い方 phantomscannerはIPアドレスの範囲を渡して実行します。 $ python scanner.py 192.168.0.0/24 scanning 192.168.0.85... scanning 192.168.0.174... scanning 192.168.0.230... scanning 192.168.0.216... scanning 192.168.0.166... scanni
StyleStats - スタイルシートの状態をチェック
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングの場においてはカバレッジであったり、メソッド単位の行数であったり、日ごとにおけるコード量の増加など可視化が進んでいます。見える化によって様々な情報が得られるようになり、改善ができるようになります。 スタイルシートにおいてもそれは同様です。可視化によって様々な情報が得られます。それを実現するのがStyleStatsです。 StyleStatsの使い方 手元のスタイルシートで試してみた結果。サイズや使われているセレクタなどが分かります。 URL指定でも使えます。こちらはBootstrapを試したところ。 どの状態がベストであるかはデザイナーによって異なると思いますが、これを日々記録しておくことができればスタイルシートの状態がどう変化しているのかが分かるようになるでしょう。
Javascript LAN scanner – JavaScript製のネットワークスキャナ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 社内や家庭でDHCPを使ってネットワークを構築していると、マシンにアクセスする時にIPアドレスが分からなくて不便になることがあります。プリンタのIPアドレスやアクセスポイントのIPアドレスが分からなくて不便な思いをした人もいるのではないでしょうか。 そこで使ってみたいのがJavascript LAN scannerです。JavaScriptで作られたLANのIPアドレススキャナになります。 Javascript LAN scannerの使い方 Javascript LAN scannerのメイン画面です。基本的にはLAN scanリンクをクリックするだけです。 こんな感じで調査結果が表示されています。 JavaScriptで調べているのでWeb以外のポートは調べづらそうです。とはい
JSONデータを検証してくれるサービス「JSONLint」
JSONデータを検証してくれるサービス「JSONLint」の紹介です。 JSONLint １．はじめに JSONのデータを生成したあとで正常に動作しないと、どこが間違っているのかチェックするのが面倒です。 このJSONLintを利用すれば生成または受信したJSONデータを検証してくれます。 ２．使い方 使い方は簡単で、JSONLintのページにアクセスし、テキストエリアにJSONをペーストして「Validate」をクリック。 検証OKであれば一番下に「Valid JSON」と表示されます。 NGがあれば、テキストエリアの該当行を反転させ、一番下にエラーメッセージを表示してくれます。 エラーの原因は一番後ろのカンマを抜いてみたのですが、正しいエラーメッセージが表示されています。
文章をコピペするだけで誤植・変換ミス・誤字脱字などをチェックしてくれるウェブサービス「Enno」
by Lucas ブログやSNSに載せる文章を書いていると、どんなに気をつけても掲載した後に誤字や脱字を見つけてしまうことがあります。そんな時に便利なのが「Enno」で、ウェブサイトのテキストボックスに文章をコピー＆ペーストしてボタンを押すだけで、誤字脱字から文章の誤用までをチェックして、何がどう間違っているのかを教えてくれるサービスになっています。 Enno - 日本語のタイポ/変換ミス/誤字脱字エラーをチェック http://enno.jp/ トップページの右側にテキストボックスがあり、その下に「例文入力」というボタンがあるので、まずは「例文入力」をクリックしてみます。 するとエラー例文が現れるので、「タイポ/変換ミス/誤字脱字エラーをチェックする」をクリック。 「許可や同意を得ていない、社内/組織内の非公開文書およびメール」「許可や同意を得ていない、顧客や取引先の文書およびメール」「
[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify
section要素やdiv要素でパネルを垂直に配置した縦長ページをスクロールする時に、各パネルをちょうどいい位置にスナップさせるjQueryのプラグインを紹介します。 デスクトップのホイール操作、スマフォやタブレットなどのタッチ操作にも対応しています。 ちょうどいい位置に自動でスクロール スクロールはイージングやバウンドなど、さまざまなエフェクトが利用できます。 Scrollifyの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsとeasing.jsを</body>の上あたりに記述します。 jQueryは1.6+で、どれでも可です。 <body> ... <script src="script/jquery-1.6.js"></script> <!--<script src="script/jquery-2.1.1.js"></script>--> <!--<scri
日本語の文章のタイポ/変換ミス/誤字脱字エラーをチェック/校正
Enno.jpは日本語のあからさまなエラー（タイポ、スペースのエラー、誤字脱字、変換ミス、入力後の編集ミス、文字化け）を自動チェックするWebサービスです。 フォーマルな文書を中心に、あらゆる日本語文書のあからさまなエラーをチェックできます。 誤検出および無関係なエラーを極力排除しており、他のチェック・校正ツールと組み合わせるのに向いています。AIで生成・処理した文章のチェックにも有用です。 特定の業種やスタイルに依存しません。全角句読点「，」「．」やソースコードを含む理工系文書もチェックできます。 ユーザー登録は不要です。 エラーのパターンを蓄積してチェックしているので動作が安定しています（AIは使っていません）。パターンは常時追加されます。 プライバシー保護のため、チェックされる文書はデータベースやログや外部サイトなどに一切保存していません。サイト運営者も読めません。 LIG様のブログ
テキストと背景のカラーがアクセシブルかチェックし、適した組み合わせに調整できる便利ツール -Contrast Ratio
テキストと背景のカラーの組み合わせで、視覚的にどのくらい読めるか数値化するオンラインツールを紹介します。 いまいち読みにくい時には、ツールで最適な組み合わせに調整することもできます。 Contrast Ratio Contrast Ratioの使い方は、簡単です。 入力欄の左に背景、右にテキストのカラーを入力するだけで、すぐに反映されます。 カラーは、hsla, rgb, 16進数などに対応しています。 当サイトの背景とテキストのカラーを入力してみます。
文字コードの解析、変換（エンコード、デコード） / SEO、セキュリティ、調査ツール
文字コードの変換や解析を行います。 文字化けを起こしたメッセージを読みたいときなどに効果があります。 文字種によってはHTMLで表記できない場合や、このページソースで取得しないといけない場合など、正しく変換できない場合があります。 デコードの場合、変換前文字種を指定し、変換後文字種は通常「sjis」を指定する。 エンコードの場合、変換前文字種「なし」で変換後文字種を指定する。 正しく変換されない場合のみ、変換前文字種を変更する。 デコードの場合、最大入力文字数は 1000 字です。 ただしエンコードの場合の最大入力文字数は 80 字です。 よく使われる文字コードの特徴を説明しておきます。 【デコード時の設定方法】 jisコード→「�$B$"$$$&$($*�(B」 →変換前文字種：「jis」 →変換後文字種：「sjis」 eucコード→「､｢､､､ｦ､ｨ､ｪ」 →変換前文字種：「euc-j
ブラウザの幅にあわせてフォントサイズを拡大・縮小するjQueryプラグイン「FitText」
ブラウザの幅にあわせてフォントサイズを拡大・縮小するjQueryプラグイン「FitText」を紹介します。 FitText ウェブサイトをPC・スマホ・タブレットなど色々なサイズのディスプレイに対応させるときに便利そうです。 １．サンプル 上記の配布サイト自体がサンプルになっていますが、ためしに作ってみました。 サンプル ブラウザの幅を変更するとタイトルの「FitTextサンプル」の部分が拡大・縮小します。 以下、具体的な設定方法です。 ２．FitTextのダウンロード 「FitText」のページにある、「Download on Github」をクリック。 「ZIP」をクリック。これでダウンロードが開始します。 ダウンロードしたアーカイブを展開した中にあるjquery.fittext.jsを任意の位置にアップロードします。 ３．FitTextの設定 次のHTMLを拡大・縮小の対象にしてみま
ブラウザサイズに応じて全体に広がる背景を実装できるjQueryプラグイン「Backstretch」:phpspot開発日誌
ブラウザサイズに応じて全体に広がる背景を実装できるjQueryプラグイン「Backstretch」 2012年03月21日- Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page ブラウザサイズに応じて全体に広がる背景を実装できるjQueryプラグイン「Backstretch」 他にも同様のプラグインがありますが、まず使い方が超簡単で、「$.backstretch(http://dl.dropbox.com/u/515046/www/garfield-interior.jpg);」って必要なプラグインをロードした後に書くだけです。 配列として渡すことでスライドショーさせることもできます。 昔ならこんな大きな背景画像を使ったら怒
Color Hex - ColorHexa.com
ColorHexa.com is a free color tool providing information about any color and generating matching color palettes for your designs (such as complementary, analogous, triadic, tetradic or monochromatic colors schemes). Just type any color value in the search field and ColorHexa will offer a detailed description and automatically convert it to its equivalent in Hexadecimal, RGB, CMYK, HSL, HSV, CIE-LA
W3CのValidatorをサイト全体にかけてサイトマップも作ってくれるツール「W3Clove」:phpspot開発日誌
W3CのValidatorをサイト全体にかけてサイトマップも作ってくれるツール「W3Clove」 2011年12月07日- W3Clove :: site-wide markup validation tool W3C Validator の結果を一括で得られ、サイトマップのXMLも生成してくれる便利なサービスのご紹介です 最初にトップページのURLを入力すると、サイトをクロールしてくれるのでしばらく待ちます。 まっていると結果が次のように出ます。 OKなものはグリーンデ表示され、赤でエラー、オレンジで警告といった具合に分かりやすくW3C Validatorの結果が閲覧できます サイト全体で多く見られたエラーのサマリも見ることができ、どこを集中的に改善すればいいのかが分かりやすいです 関連エントリ スマフォ上で動くブラウザベースアプリ開発に役立ちそうなデバッグツール「Socketbug」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
McAnswers
Fontspring. Worry-Free fonts for everyone.
Regulex：JavaScript Regular Expression Visualizer
マークアップのいまいちな箇所を指摘してくれるブックマークレット -DiagnostiCSS
IDEA * IDEA
