2018年09月20日(木)
1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.css
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。
デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。
Trashy.css
Trashy.css -GitHubTrashy.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。
ブラウザで簡単に利用できるブックマークレットも用意されています。
- ブックマークレット
author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
トレンドの配色をカラーコード付きで参照できる「Trendy Palettes」
NEXT ›[ユーザー投稿] 【10/15(月)＠福岡】無料セミナー［Google登壇］Google広告 活用セミナー&相談会イベントを開催！
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.css』についてまとめています。
この記事は特にjavascriptについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
0
284
328
328
