[ Codings ]

HTML5のアウトライン

HTML5は、HTML構文とXML構文の二つのパターンを保持してますが。
こんな認識でいいのだろうか。

また、アウトラインの構造的はこんな感じ？

HTML 構文

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title Strings</title>
</head>
<body>
<section>
	<header>
		<hgroup>
			<h1>LOGO</h1>
			<h2>Site Summery</h2>
		</hgroup>
		<nav>Navigation</nav>
	</header>
<section>
	<article>
		<h1>article title</h1>
		<p>hoge</p>
	</article>
	<article>
		<h1>article title</h1>
		<p>hoge</p>
	</article>
	<article>
		<h1>article title</h1>
		<p>hoge</p>
	</article>
</section>
<aside>
<nav>
	<ul>
		<li>side navigation</li>
		<li>side navigation</li>
		<li>side navigation</li>
	</ul>
</nav>
</aside>
<footer>
<adress>hoge</adress>
</footer>
</section>

XML 構文

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title Strings</title>
</head>
<body>
<section>
	<header>
		<hgroup>
			<h1>LOGO</h1>
			<h2>Site Summery</h2>
		</hgroup>
		<nav>Navigation</nav>
	</header>
<section>
	<article>
		<h1>article title</h1>
		<p>hoge</p>
	</article>
	<article>
		<h1>article title</h1>
		<p>hoge</p>
	</article>
	<article>
		<h1>article title</h1>
		<p>hoge</p>
	</article>
</section>
<aside>
<nav>
	<ul>
		<li>side navigation</li>
		<li>side navigation</li>
		<li>side navigation</li>
	</ul>
</nav>
</aside>
<footer>
<adress>hoge</adress>
</footer>
</section>

article はドキュメント、サイト、ページの独立した独立した構成をもつ部分をさす(原文)となってるのでブログの記事リストごとに囲むのも
ありでしょうか。

他のサイトでもサイドメニューはaside(本筋からやや離れてるけど触れておきたいコンテンツを表現する。)で構成してるっぽいのでよしとしましょう。。。

とりあえずテストページなんかつくってみて
いろいろ実験しないとなんともいえない感じですね。汗2

自分の理解度的に・・

  • Comments [0]
  • Trackbacks [0]

MT Zen-Codingを使ってみました。(Movable Type 5)

巷で話題のZen-Coding。

コーディング速度が３倍になるとの話（きっと赤い○○なんですね。）。

時代の波に乗り遅れまいとかたつむりくんのWWWで公開されている
「MT Zen-Coding」
を導入してみました。

ちなみにZen-Codingとは、複雑なマークアップでもショートカットとスニペットで簡単にかけてしまうという
ライブラリなのです。

これ自体がDreamWeaverみたいなエディタじゃなくライブラリなので既存のエディタソフトに対応したものがあります。


使い方は簡単でプラグインをインストールするとそのままエントリーのテキストエリアで使用可能です。

例えば、

div#container>div#header+div#contents+div#footer

と書いてctrl + E(展開）すると。

<div id="container">
	<div id="header"></div>
	<div id="contents"></div>
	<div id="footer"></div>
</div>

こんな感じで一瞬でコードに変換されます。

MT Zen-Coding　ではテンプレートの編集画面にも対応されていて省略形の記述法で
MTタグもマークアップできるようになってるそうです（まだ、試してないのです。）

早く赤いすいｓ（ｒｙ・・・

  • Comments [0]
  • Trackbacks [0]