タグ

関連タグで絞り込む (2)

タグの絞り込みを解除

htmlとsemanticに関するcolissのブックマーク (2)

  • HTMLを1999年のように書く

    HTMLの実装、そしてセマンティックマークアップのすすめについて紹介します。 記事のタイトルは直訳しましたが、1999年というより、フレームワークやdivスープが増産される前の時代という意味だと思います。 Write HTML Like It's 1999 by Bradley Taunt 訳者注: 1999年のようには文字通りの意味ではなく、比喩として使用されていると思います。フレームワークやdivスープが増産される前の時代でしょうか。1999年だとtableレイアウトだったり、nav要素がないなど混乱するかもしれません。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1990年代の制約に縛られてHTMLを書く HTMLの悪い習慣 HTMLの良い習慣 「構造」の基的な確認方法 最後に 追記 1990年代の制約に縛られてHT

    HTMLを1999年のように書く
    coliss
    coliss 2019/06/21
    セマンティックマークアップのすすめ、タイトルは元記事へのリスペクト。
  • 1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css

    Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS

    1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css
    coliss
    coliss 2018/09/20
    検証用のスタイルシート、すごい簡単で便利です。
  • 1