Snippet-Editor.com » HTML http://snippet-editor.com 仕事で使えるHTML5・CSS3などのナイスなアイデアを収集しています。（一緒に投稿していただける方を募集中です） Sun, 10 Jul 2011 02:57:44 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 アスキー・メディアワークスより『HTML5読本』を出版します http://snippet-editor.com/2011/01/html5-book.html http://snippet-editor.com/2011/01/html5-book.html#comments Thu, 20 Jan 2011 19:01:26 +0000 tomohiro_kasuga http://snippet-editor.com/?p=1422 HTML5 Logo

1月25日に（株）ニューズフロントの植木氏と筆者の共著で『仕事にすぐ効く！ HTML5読本』を、（株）アスキー・メディアワークスさまより出版する運びとなりましたので、ご報告いたします。

本書はウェブ制作に直接関わらない方にも読んでいただけることを目標とし、

  • 第1章：HTML5で大きく変わるウェブの世界
  • 第2章：HTMLの歴史からHTML5へ
  • 第3章：コードで分かるHTML5の新機能
  • 第4章：HTML5とともに使うCSS3の最新技術

の4部構成になっています。

第1章は近年のHTML5をとりまく企業の思惑と攻防について、ビジネス書的なスタイルで展開してあります。（担当・植木氏）

第2章はティム・バーナーズ＝リーやイアン・ヒクソンといった主要人物に触れながら、HTMLの歴史的経緯を解説。（以降、担当・春日）

第3章と第4章ではHTML5とCSS3を今日から使うためのコードを解説。編集方針から用語も難解なものは避けてあります。

前半と後半で営業畑の方から制作畑の方へと読み回していただけると、内容的にはちょうどいいかもしれません。（電子書籍でも販売されるそうなので、そちらをお求めいただけるとなお嬉しいです）

執筆時にはまさかW3Cからロゴが登場したり、「HTML5と呼ぶのをやめてHTMLにしよう」なんて話が出るとは夢にも思いませんでしたので、もう既にネタが古いとか言われそうですが、なるべく風化しなさそうな部分を選んで書籍化いたしましたので、ぜひご一読いただけると幸いです。

お求めはこちらからどうぞ。

  1. HTML5 Logo is attributed to the W3C.
]]> http://snippet-editor.com/2011/01/html5-book.html/feed 0 ブログのサイドバーをHTML5流のセマンティクスにする http://snippet-editor.com/2010/10/html5-semantic-sidebar.html http://snippet-editor.com/2010/10/html5-semantic-sidebar.html#comments Sun, 03 Oct 2010 17:35:19 +0000 tomohiro_kasuga http://snippet-editor.com/?p=1399 <aside> <div class="aside"> <section> <div class="section"> <h1>SIDEBAR TITLE HERE</h1> <ul> <li>LIST ITEM</li> <li>LIST ITEM</li> <li>LIST ITEM</li> </ul> </div><!-- /section --> </section> <section> <div class="section"> <h1>SIDEBAR TITLE HERE</h1> <ul> <li>LIST ITEM</li> <li>LIST ITEM</li> <li>LIST ITEM</li> </ul> </div><!-- /section --> </section> </div><!-- /aside --> </aside>

セマンティクスと横文字で攻めて見ましたが、要するに「意味」という意味です。

HTML5では、サイドバーはasideタグ。見出しを含む一塊はsectionタグで記述します。

各sectionタグの内側はh1から始めることができるので、サイドバーの見出しレベル論争（そういうものがあるとしたら）も終焉を迎えそうです。

現在は過渡期にあるので、CSSは全て冗長気味に書いてあるdivタグ（div.aside, div.section）の方に当てました。

なお、asideタグやsectionタグを使用するためには、DoctypeをHTML5にする必要がありますので、下をご参考までに。CSSもお忘れなく。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>aside, section { display: block; }</style>
</head>
<body>
</body>
</html>

表示させるだけなら、IE6でも特に問題はありませんでした。その他、Firefox 3以降、Safari 4以降、ChromeとOperaの最新版で確認してあります。

]]> http://snippet-editor.com/2010/10/html5-semantic-sidebar.html/feed 0 ナビゲーションをolで書いて、accesskeyをプラス http://snippet-editor.com/2010/09/nav-ol-accesskey.html http://snippet-editor.com/2010/09/nav-ol-accesskey.html#comments Tue, 21 Sep 2010 03:53:44 +0000 tomohiro_kasuga http://snippet-editor.com/?p=1184 <div class="nav"> <ol> <li><a accesskey="1" href="/">Home</a></li> <li><a accesskey="2" href="/html">HTML</a></li> <li><a accesskey="3" href="/css">CSS</a></li> <li><a accesskey="4" href="/javascript">JavaScript</a></li> <li><a accesskey="5" href="/jquery">jQuery</a></li> <li><a accesskey="6" href="/wordpress">WordPress</a></li> <li><a accesskey="7" href="/feed">RSS</a></li> </ol> </div>

サイトのナビゲーションをolタグで書いておくと、スタイルシートを無効にして「裸」にされた場合にちょっと素敵なことが起こります（アクセスキーが書いてある）。

かなり特殊なケースですが、喜んでいただける方がいないとも限りません[1]。

  1. アクセスキーに2桁の数字は使えませんので、あしからず…
]]> http://snippet-editor.com/2010/09/nav-ol-accesskey.html/feed 0 headerを途中で分割する http://snippet-editor.com/2010/09/do-not-use-id-for-css.html http://snippet-editor.com/2010/09/do-not-use-id-for-css.html#comments Sat, 18 Sep 2010 03:31:31 +0000 tomohiro_kasuga http://snippet-editor.com/?p=1027 <div class="header"> </div><!-- /.header --> <div class="header"> </div><!-- /.header -->

とても稀なケースだとは思いますが、例えばクライアントから「このdivを2分割にして欲しい」などと言われた場合、下のようにIDを使ってheaderを書いてしまうとうまく行きません。

<div id="header">
</div><!-- /#header -->

<div id="header2">
</div><!-- /#header2 -->

IDはページ内で1度しか使えませんので、分割後は名前を変えるしかありませんし、もしもdiv#headerを含む形でCSSを書いていたりすると最悪な事に…。

もちろんheaderを分割することはとても稀ですが、普段からdivにIDを付けてスタイル定義されている場合は同様の問題に出くわす可能性があります。

Web制作の入門書などでよく紹介されている書き方なので、初心者の方は注意が必要です。

]]> http://snippet-editor.com/2010/09/do-not-use-id-for-css.html/feed 0 IEの条件分岐コメントをbodyタグに実装する http://snippet-editor.com/2010/09/no-more-ie-hack.html http://snippet-editor.com/2010/09/no-more-ie-hack.html#comments Tue, 14 Sep 2010 23:03:08 +0000 tomohiro_kasuga http://snippet-editor.com/?p=924 <!--[if lte IE 5]><body class="ie-legacy"><![endif]--> <!--[if IE 6]><body class="ie6"><![endif]--> <!--[if IE 7]><body class="ie7"><![endif]--> <!--[if IE 8]><body class="ie8"><![endif]--> <!--[if gte IE 9]><body class="ie-edge"><![endif]--> <!--[if !IE]>--> <body> <!--<![endif]-->

紹介したコードに間違いが含まれていましたので、上書き修正いたしました。IE5以下またはIE9以上が考慮されていませんでした。申し訳ありませんでした。

もうすぐIEの9が出るそうですが、あたらしいIEのバージョンが出る度にハックの仕方を検討するのはもうやめて、条件分岐コメントで対応したいと思います。

上の条件分岐コメントをbodyの開始タグと置き換えると、

/* IE6 */ * html YOUR-ELEMENT { YOUR-HACK }
/* IE7 */ *:first-child+html YOUR-ELEMENT { YOUR-HACK }

これ（上）が、こう（下）なります。

body.ie6 YOUR-ELEMENT { YOUR-HACK }
body.ie7 YOUR-ELEMENT { YOUR-HACK }

bodyタグはページ内の全要素の最上流に位置するので、上書きしたい要素へ確実にリーチできます。

]]> http://snippet-editor.com/2010/09/no-more-ie-hack.html/feed 2 IE6で文字が2重に表示されてしまうバグの回避法 http://snippet-editor.com/2010/09/ie6-duplicate-character-bug.html http://snippet-editor.com/2010/09/ie6-duplicate-character-bug.html#comments Sat, 11 Sep 2010 10:09:54 +0000 tomohiro_kasuga http://snippet-editor.com/?p=764 <!-- DO --><!-- NOT --><!-- DELETE --><!-- THIS -->

フロートしている要素内の最後の文字がダブって表示されてしまうIE6のバグについて、回避方法を見つけたようなのでポストします。

この問題は「IE6 Duplicate Character Bug」として知られているもので、IE6で表示した時だけ、

——————————————————————————————
この様に、お尻の文字が勝手に2度表示されてとても厄介です
厄介です
——————————————————————————————

発生する原因としては、

  1. フロートしている要素の後にコメントを利用している。
  2. フロートしている要素の幅が親要素の幅と一致している。

など、制作サイドに落ち度のないものばかりで、これに対応するためにこちらが折れるのはちょっと癪です。

そこで、

  • コメントを削除することなく、
  • 余計なマージンも設定しないで、

以下の方法で解決できました。

<div class="sidebar" style="float: right;">
<p>お尻の文字が勝手に2度表示されてとても厄介です。</p>
<!-- DO --><!-- NOT --><!-- DELETE --><!-- THIS -->
</div><!-- /end of sidebar -->

IE6は最後にある文字ならコメントでも複製するようなので、そこでIE6用に余計なコメントを4つ用意します（中身はなんでも結構です）。コメントなら複製されても画面表示に影響を与えないので、これで文字が2重に表示されなくなりました。

おめでとうございます。

]]> http://snippet-editor.com/2010/09/ie6-duplicate-character-bug.html/feed 0 wrapしないで固定幅のページを作る http://snippet-editor.com/2010/09/nowrap-fixed-width.html http://snippet-editor.com/2010/09/nowrap-fixed-width.html#comments Mon, 06 Sep 2010 09:59:55 +0000 tomohiro_kasuga http://snippet-editor.com/?p=726 <body> <div class="header"> <div class="body"> </div> </div><!-- /header --> <div class="contents"> <div class="body"> </div> </div><!-- /contents --> <div class="footer"> <div class="body"> </div> </div><!-- /footer --> </body>

固定幅のページをデザインする際の一般的な方法として、コンテンツ全体を<div id="wrapper">などでラップしているサイトをよく見かけますが、この方法ではラップした外側は限られたデザインしか適応できなくなってしまいます。

div#wrapper { clear: both; width: 980px; margin-left: auto; margin-right: auto; }

上の例ではwrapperの外側にはbodyタグしかありません。CSSで設定できる背景要素も一つしかないため、デザイン上の自由度が下がります。

そこで、div class="body"を使用します[1]。

div.body { clear: both; width: 980px; margin-left: auto; margin-right: auto; }

div class="body"を導入することで、固定幅の外側にも背景デザインなどを施せるようになりました[2]。

  1. class名は何でも構いません（他とかぶらなければ）。
  2. wrapしないと実現できないデザインというのも稀にあります。
]]> http://snippet-editor.com/2010/09/nowrap-fixed-width.html/feed 0 WebサイトをiPadに最適化させる1行 http://snippet-editor.com/2010/08/viewport-equal-1024.html http://snippet-editor.com/2010/08/viewport-equal-1024.html#comments Thu, 26 Aug 2010 03:38:59 +0000 tomohiro_kasuga http://snippet-editor.com/?p=307 <meta name="viewport" content="width=1024" />

タイトルを「iPadに最適なViewportの値は"1024"」から「WebサイトをiPadに最適化させる1行」に変更しました。

上の1行をheadタグ内に追加するだけで簡単にサイトをiPadに最適化することが出来ます。

内容的には「iPadを横長に持ったときにページが正確に（pixel by pixelで）レンダリングされる」という意味で、Appleもそうしています[1]。

例外としては、

<meta name="viewport" content="width=device-width" />

固定幅を持たないWebサイトでは上のように記述するのが有効で、iPhoneなら320px、iPadでは768pxの値が自動的に代入されます。
（480pxや1024pxでない点に注意。本体を横長に持っても数字は変わりません）

もし、WebサイトのViewportをデバイスの画面解像度に対して常に等倍にしたい（横向きに持っても／縦向きに持っても等倍で）とお考えなら、次のように記述します。

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />

これで、どの向きに持っても画面解像度を最大限に活かしきれます。つまり、iPadならViewportが"1024"か"768"に動的に変化し、常にPixel by Pixelの状態に。

ただ残念なことに、副作用としてページの拡大縮小が一切できなくなってしまうので、使う人によってはストレスを感じるようになるかもしれません。

解決策の「JavaScriptを使ってViweportを動的に書き換える方法」については、またの機会に。

  1. 当サイトは横幅が768px以下なので、iPadを縦に持ったときにピクセル精度が得られるよう、viewportを768に設定しています。
]]> http://snippet-editor.com/2010/08/viewport-equal-1024.html/feed 0 HTML5を始めるための最小セット http://snippet-editor.com/2010/08/html5-startup.html http://snippet-editor.com/2010/08/html5-startup.html#comments Mon, 23 Aug 2010 08:58:16 +0000 tomohiro_kasuga http://snippet-editor.com/?p=10 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1></h1> </body> </html>

headタグとbodyタグも省略可能なんだそうですが、そこまでやらない状態です。

下記のように、styleタグやscriptタグを含んでもかなりスッキリしているのがいいですね。
（type="text/javascript"などが不要）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style></style>
	<script></script>
</head>
<body>
	<h1></h1>
</body>
</html>

とりあえず当サイトでも、まずはDoctypeから導入を始めてみました。

HTML5はまだドラフト段階ですので、仕様が変更になる可能性もあります。

]]> http://snippet-editor.com/2010/08/html5-startup.html/feed 0