はじめに
WordPressの自作テーマに奮闘中の最近。CSSフレームワークなるものを知ったので「これならできるかもしれない」と思い、CSSフレームワークをベースにこれまで使っていたWordPressテーマを参考にしながら、HTML5でWordPressテーマの自作に挑戦してみました。
CSSフレームワークって何だ？
CSSフレームワークとは、一言で言えば「効率的にWebサイトを作るための枠組み」と言えるのではないでしょうか。
つまりは、Webサイト作成に必要なレイアウト、メニューバー、テーブル、フォーム、ボタンなどの要素が予め準備されているツール群ということですね。
私が初めてCSSフレームワークなるものを知ったのはBootstrapでした。自作で簡単にWordPressテーマを作る方法は無いかなと探していたことがきっかけです。もちろん、最初は経験がありませんでしたので「これで今風な感じのサイトが簡単に作れるのか」なんて思っていました。
ところが、Bootstrapを使ってみるとなかなかうまく行きません。使いこなすことができなかったんです。そのため「他に何か無いかな」なんて探してみたところ、PureなるCSSフレームワークの存在を知りました。
「そうか、これなら自作できるかもしれない」と思ってこれまで使っていたWordPressテーマを参考に自作に取りかかりました。
見慣れないタグがあるけど、これは何だろう？
Webデザインについては素人とは言っても、なんとなくHTMLのタグを使った経験はあります。しかし、見慣れないタグに出くわしました。
header,nav,main,article,aside,section,footer,・・・
「一体これは何だ？」という感じだったのですが、これがHTML5について取り組むことになるきっかけとなった訳です。
sectionとarticleとaside、どれがどれ？
HTML5という世界に足を踏み込むと、どうやらsectionとarticleとaside、これらがポイントになりそうだということが分かりました。しかし、ここで問題が。
「sectionとarticleとaside、どこでどれを使えばいいんだ？」という疑問です。
分かるような分からないような感じで一向に自作テーマの作業は進みません。そんな中で見えてきたヒントが「アウトライン」という考え方です。
アウトラインについて理解を深めるのが近道だった
「アウトライン」という言葉そのものについては一般的な文書作成の時にアウトラインプロセッサを使った経験がありますので、HTML5で言われるアウトラインというのが言わんとしていることが何となくわかってきました。
つまり、一般的な文章で言うところの章立てですよね、部・章・節・項・目とかの。こういうものをHTMLという言語で実現してくださいという話だと理解し、徐々にHTMLで言うところのアウトラインというものをつかんでいきました。
そこからようやく自作テーマの作成が徐々に進み始め現在のブログのように何とか形になったということです。（IEへの対応とかまだまだ未完成ですが、それはまた別の課題ということで）
特にこれらのサイトはとにかく何度も何度も行ったり来たりして参考にさせて頂きました。
アウトラインを意識しなかったらレイアウトや装飾目的でsection,article,asideなどを使っていたところでした（実際、最初はそうやって作っていました）。
- アウトラインを与える要素は基本的にアウトラインを決めることを目的に使うことを心掛け、極力CSSを付けないようにする。
- レイアウトや装飾を決める時はできるだけdivやspanを使うようにする。
アウトラインという考え方について理解を深めることでこの2つが明確になり、最終的には何とかWordPressテーマの自作ができました。
こんなアウトラインになりました（備忘録も兼ねて）
さて、このブログの現在のアウトラインなのですが、「こんな感じになりましたよ」ということでご紹介したいと思います。ハイライト表示の部分がアウトラインとして認識される部分です。
ヘッダー部
|
1 2 3 4 5 6 7 8 9 10 11 |
<header> <h1>サイトタイトル</h1> <p>テキストテキストテキスト</p> <nav> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> </ul> </nav> </header> |
メインコンテンツ部（トップページ・投稿記事一覧表示）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="main"> <article> <header> <h2>投稿記事タイトル1</h2> <time datetime="2000-01-01">2000年1月1日</time> </header> <p>抜粋抜粋抜粋</p> </article> <article> <header> <h2>投稿記事タイトル2</h2> <time datetime="2000-01-01">2000年1月1日</time> </header> <p>抜粋抜粋抜粋</p> </article> <nav> <ul> <li>前のページへ</li> <li>次のページへ</li> </ul> </nav> </div> |
メインコンテンツ部（アーカイブorカテゴリーorタグ別投稿記事一覧表示）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div id="main"> <article> <h2>○○の記事</h2> <section> <header> <h3>投稿記事タイトル1</h3> <time datetime="2000-01-01">2000年1月1日</time> </header> <p>抜粋抜粋抜粋</p> </section> <section> <header> <h3>投稿記事タイトル2</h3> <time datetime="2000-01-01">2000年1月1日</time> </header> <p>抜粋抜粋抜粋</p> </section> </article> <nav> <ul> <li>前のページへ</li> <li>次のページへ</li> </ul> </nav> </div> |
メインコンテンツ部（投稿記事）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<div id="main"> <article> <header> <h2>投稿記事タイトル1</h2> <time datetime="2000-01-01">2000年1月1日</time> <p>抜粋抜粋抜粋</p> </header> <h3>投稿記事h3見出し</h3> <p>テキストテキストテキスト</p> <h4>投稿記事h4見出し</h4> <p>テキストテキストテキスト</p> <h5>投稿記事h5見出し</h5> <p>テキストテキストテキスト</p> <h6>投稿記事h6見出し</h6> <p>テキストテキストテキスト</p> <aside> <h3>関連記事見出し</h3> <section> <h4>関連記事タイトル1</h4> </section> <section> <h4>関連記事タイトル2</h4> </section> </aside> <aside> <h3>人気記事見出し</h3> <section> <h4>人気記事タイトル1</h4> </section> <section> <h4>人気記事タイトル2</h4> </section> </aside> </article> <nav> <ul> <li>前のページへ</li> <li>次のページへ</li> </ul> </nav> </div> |
サイドエリア部
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="side"> <aside> <h2>サイドバーウィジェット1</h2> <div>テキストテキストテキスト</div> </aside> <aside> <h2>サイドバーウィジェット2</h2> <ul> <li>テキスト1</li> <li>テキスト2</li> <li>テキスト3</li> </ul> </aside> </div> |
フッター部
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<footer> <nav> <ul> <li>フッターメニュー1</li> <li>フッターメニュー2</li> <li>フッターメニュー3</li> </ul> </nav> <aside> <h2>フッターウィジェット1</h2> <div>テキストテキストテキスト</div> </aside> <aside> <h2>フッターウィジェット2</h2> <div>テキストテキストテキスト</div> </aside> </footer> |
アウトライン（トップページ・投稿記事一覧表示）
|
1 2 3 4 5 6 7 8 9 10 |
1.サイトタイトル・・・<h1> 1.Untitled Section（・・・<nav>） 2.投稿記事タイトル1・・・<h2> 3.投稿記事タイトル2・・・<h2> 4.Untitled Section（・・・<nav>） 5.サイドバーウィジェット1・・・<h2> 6.サイドバーウィジェット2・・・<h2> 7.Untitled Section（・・・<nav>） 8.フッターウィジェット1・・・<h2> 9.フッターウィジェット2・・・<h2> |
アウトライン（アーカイブorカテゴリーorタグ別投稿記事一覧表示）
|
1 2 3 4 5 6 7 8 9 10 11 |
1.サイトタイトル・・・<h1> 1.Untitled Section（・・・<nav>） 2.○○の記事・・・<h2> 1.投稿記事タイトル1・・・<h3> 2.投稿記事タイトル2・・・<h3> 3.Untitled Section（・・・<nav>） 4.サイドバーウィジェット1・・・<h2> 5.サイドバーウィジェット2・・・<h2> 6.Untitled Section（・・・<nav>） 7.フッターウィジェット1・・・<h2> 8.フッターウィジェット2・・・<h2> |
アウトライン（投稿記事）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
1.サイトタイトル・・・<h1> 1.Untitled Section（・・・<nav>） 2.投稿記事タイトル・・・<h2> 1.投稿記事h3見出し・・・<h3> 1.投稿記事h4見出し・・・<h4> 1.投稿記事h5見出し・・・<h5> 1.投稿記事h6見出し・・・<h6> 2.関連記事見出し・・・<h3> 1.関連記事タイトル1・・・<h4> 2.関連記事タイトル2・・・<h4> 3.人気記事見出し・・・<h3> 1.人気記事タイトル1・・・<h4> 2.人気記事タイトル2・・・<h4> 3.Untitled Section（・・・<nav>） 4.サイドバーウィジェット1・・・<h2> 5.サイドバーウィジェット2・・・<h2> 6.Untitled Section（・・・<nav>） 7.フッターウィジェット1・・・<h2> 8.フッターウィジェット2・・・<h2> |
解決したい疑問と今後の課題
現時点ではこのようにアウトラインが決まりWordPressテーマの自作も一旦落ち着いたのですがまだまだ道半ば。解決したい疑問と今後の課題です。
- ウィジェットの一部だけnavを使いたい、どうやってやるのか。
- IEではやはり表示が崩れるので直したい、どう対応すればいいのか。
- もっと良いアウトラインの書き方があるのではないか、直した方が良いアウトラインがあるのではないか。
- CSSはまだまだ苦手、きっときれいな書き方があるだろうから直していきたい。
おわりに
当初は「CSSフレームワークを使って簡単にWordPressテーマを自作したいな」なんてことを思っていたのですが、ふたを開けてみるとHTML5のアウトラインについて理解を深めましょうということが中心になっていました。
ネット上でも古い情報と新しい情報が混在しているようで苦労しましたがアウトラインについての理解が大事だということが良くわかりました。アウトラインというのはHTML5に限った話ではないと思いますが、これまではh1～h6まで順番にくっつければいいと思っていただけでした。
HTML5ではより強くアウトラインを意識させられるということなのかもしれません。今回初めてその世界に足を踏み入れたということですので、これからも注目して追っかけていきたいと思います。