タグクラウドタグ付け

今日も、幸運にもタグクラウドのレイアウトに出会えました。 ご存知のように、これは標準的なものであり、フリルやデザイナーの余韻はありません。 通常、このユニットの設計は最終的に次のようになりました。

<ul class="tags">

<li class="w1"><a href="#">amv</a></li>

<li class="w2"><a href="#">anime</a></li>

<li class="w3"><a href="#">music</a></li>

<li class="w4"><a href="#">tnt</a></li>

<li class="w5"><a href="#"></a></li>

</ul>



クラスw1 、 w2 、 w3など タグの重みが大きくなるにつれて配置されるため、フォントサイズが大きくなります。



明確にするために、ブラウザでの表示方法を示します。









今日、私はこのブロックを変更し、予想外の結果を得ました-この場合にも一般的に受け入れられている服のサイズの指定に従ってクラスを命名することは便利です（ XS <S <M <L <XL <XXL <XXXL ）。 さらに多くのポイントが必要な場合、リストの最後または先頭に必要な数の先行X文字を持つ要素を追加することでこれを解決します。その結果、構造が完全に変更され、取得したセマンティクスに満足します。

<ul class="tags">

<li class="s"><a href="#">amv</a></li>

<li class="m"><a href="#">anime</a></li>

<li class="l"><a href="#">music</a></li>

<li class="xl"><a href="#">tnt</a></li>

<li class="xxl"><a href="#"></a></li>

</ul>