Demo OpenShared
コレWordPressデス

究極CSS HTML要素のみでサイトデザインする

posted:

最近は何やらCSSもクラス名をつけるのもルール化されてきているようで何よりです。そこで今回WordPressについて少しずつ理解してきましたが苦労したCSSについてです。

実はこのサイト先日の「Javascriptを使わないwebサイト」に加えてほとんどクラス名を付けずid最小にCSSを書いてます。HTML要素のみのシンプルな構成でスタイルシートを作成しています。

No class names, no div tag, only stylesheet for HTML elements

さよなら<div></div> No-Class

以前から試してみたかったのですが、仕事で実施するわけにもいかず途中まで試してみてはできそうだな感はあったのですがついに実行です。
No-class names, no <div>

single.php ポイントはarticleとasideの関係

<body>
 <nav>skip link</nav>
 <header>ロゴ</header>

 <main>
  <article>
   <header>
    <h1>記事タイトル</h1>
   </header>
     本文
   <footer>
    <nav>タグ</nav>
   </footer>
  </article>

  <aside>
   <section>Categories</section>
   <section>Tags</section>
   <section>Archives</section>
  </aside>
 </main>

 <footer>
  <nav>パンくず</nav>
 </footer>

<main>というありがたいタグのおかげで実現できたようなものですね。
まず<main>が無いと幅の設定ができません。当初<aside>は<main>の外側に配置したかったのですがコンテンツ部の幅調整が難しくなります。W3C Markup Validationでチェックしたところエラーにはならなかったので<main>内に配置しました。
<div>って都合がいい奴なんですよ。

WordPressに贖うテーマ

ご存知このクラス指定しない方法はWordPressでやるのは思想に贖う行為だったわけです。クラス名を出力CSSでのデザインテーマを作りやすくしているのがWordPressの特徴なのだと気がつきました。

しかし、制約があると面白い

どうしてものところはidにしていますが多いのは<ul>リストでした。思っているよりリストタグは使います。
listがどこの要素内にも必要でそれぞれデザインが違うこともありえるためです。

ここから装飾していくつもりです。
ぜひチャレンジしてみて欲しいです。