ブラウザで表示しているページのアクセシブルではないマークアップ、validでないマークアップ箇所を指摘してくれるブックマークレットを紹介します。 DiagnostiCSS DiagnostiCSSでチェックできるのは、以下の項目です。 インラインスタイル 無効リンク 空要素 必須属性のない要素 廃止予定の要素 ページで実行すると、赤い枠で囲まれます。
Web上で見て触れる、HTML5とCSS3のオンラインサンプルがすごく良かったのでご紹介。 HTML5 & CSS3 Tools and Tutorials パラメータを自由に触りながら、実際に動作している様子をリアルタイムにプレビューする事が可能です。 以下に使っている様子を載せてみます。 ↑設定した項目を選択します。 まずはBox Propertiesを試してみます。 ↑設定可能な項目が表示されます。 パラメータをグリグリいじれちゃいます。 ↑設定した内容はリアルタイムにプレビュー表示されました。 使用するコードと対応するブラウザも教えてくれます。 違うものも試してみましょう。 ↑Videoを設定している所です。 動画ファイルはURLを直接入力して設定します。 ↑プレビューです。 細かいブラウザのバージョンも教えてくれました。 他にも設定可能な項目はたくさんありました。 興味のある方は
clean-cssはnode.jsを使ったCSS短縮化ソフトウェアです。コンソールで動作します。 一日数十万、数百万とアクセスのあるWebサイトではほんの少しの改善が積み重なって大きな速度改善につながることもあります。CSSも作成したそのままではなくちょっと工夫すれば大きな負荷軽減につながるかも知れません。そのための短縮化ライブラリがclean-cssです。 インストールはnpmを使って一発で完了。コマンドとして使うので-gをつけておきます。 ヘルプです。-oでアウトプットするファイル名、後は入力ファイルを指定するだけです。 catで標準出力としてCSSの記述を渡すことで、複数のファイルをまとめてマージして短縮化もできます。 元ファイルです。 こんな感じで短縮化されます。 またnode.jsのライブラリとしてテキストでCSSを渡して短縮化もできます。 -oをつけないと標準出力に渡るので、さ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く