Snippet-Editor.com 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 HTMLの骨組みが見える、デバッグ用CSS http://snippet-editor.com/2010/10/xray-debug-css.html http://snippet-editor.com/2010/10/xray-debug-css.html#comments Tue, 05 Oct 2010 15:37:44 +0000 tomohiro_kasuga http://snippet-editor.com/?p=1412 * { outline: 2px solid rgba(255, 0, 0, 0.1) !important; }

あまり実用的でないかもしれませんが、かっこよかったのでポスト。

RGBAを使って色を指定しているので、重なっているところはより濃く見えます[1]。

全称セレクタをやめれば、特定の部位にだけ線を引くこともできます。

YOUR-ELEMENT { outline: 2px solid rgba(255, 0, 0, 0.1) !important; }
  1. IE6で見ても何も起こりませんのであしからず…
]]> http://snippet-editor.com/2010/10/xray-debug-css.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 等幅フォントが小さく表示されるのを防ぐ http://snippet-editor.com/2010/09/fix-monospace-font-size.html http://snippet-editor.com/2010/09/fix-monospace-font-size.html#comments Wed, 29 Sep 2010 16:15:19 +0000 tomohiro_kasuga http://snippet-editor.com/?p=1376 YOUR-ELEMENT { font-family: "Courier New", Courier, sans-serif; }

CSSで等幅フォントを指定すると一部のブラウザが文字を小さめにレンダリングしてしまうのを防ぐ方法をご紹介します。

通常は下のようにお尻に"monospace"と書きますが、これを"sans-serif"にするだけです[1]。

YOUR-ELEMENT { font-family: "Courier New", Courier, monospace; }

"Courier New"や"Courier"はかなり昔のコンピュータにもインストールされているので、"sans-serif"の記述に関わらず、実際には等幅フォントが当たり、かつ文字が小さくなる問題も解消することができます。

等幅フォントの追加はお好みで。当サイトでは先頭に"Menlo"を追加しています。

code { font-family: Menlo, "Courier New", Courier, sans-serif; }
  1. 原理的には間違った記述ですが、現実的には問題解決していますので、後はご判断ください…。
]]> http://snippet-editor.com/2010/09/fix-monospace-font-size.html/feed 0 CSS3で書いて、スクリーンショットを取って、ボタンにする http://snippet-editor.com/2010/09/button-image-made-with-css3.html http://snippet-editor.com/2010/09/button-image-made-with-css3.html#comments Tue, 28 Sep 2010 13:19:48 +0000 tomohiro_kasuga http://snippet-editor.com/?p=1357 <!DOCTYPE html> <html dir="ltr" lang="ja"> <head> <meta charset="utf-8" /> <title>Safari CSS3 Button</title> <style> body { font-size: 12px; font-family: "Lucida Grande", sans-serif; -webkit-text-stroke: 1px transparent; background: #aaa; padding: 20px; margin: 0; } ul { clear: both; float: left; width: 100%; padding: 0; margin: 0; } ul li { clear: both; float: left; list-style-position: outside; list-style-type: none; background: #fff; padding: 2px; margin: 0 3px; } a:link, a:visited { color: #fff; font-weight: bold; text-decoration: none; text-align: center; line-height: 1.1; background: #1f5c99; float: left; -webkit-border-radius: 5px; padding: 1px; margin: 0; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } a:link span, a:visited span { text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4); float: left; border: 1px solid hsla(0, 0%, 100%, 0.33); border-top-color: hsla(0, 0%, 100%, 0.66); border-bottom: none; -webkit-border-radius: 4px; padding: 0.2em 1.4em 0.3em; margin: 0;} a:hover, a.hover, a.active { -webkit-box-shadow: none; } a.hover, a.active { cursor: default; } a.link:link span, a.link:visited span { background: -webkit-gradient(linear, left top, left bottom, from( hsla(0, 0%, 100%, 0.4)), color-stop(0.5, hsla(0, 0%, 100%, 0.2)), color-stop(0.5, hsla(0, 0%, 100%, 0.1)), to( hsla(0, 0%, 100%, 0.2))); } a.hover span, a.link:hover span { background: -webkit-gradient(linear, left top, left bottom, from( hsla(0, 0%, 100%, 0.5)), color-stop(0.5, hsla(0, 0%, 100%, 0.25)), color-stop(0.5, hsla(0, 0%, 100%, 0.25)), to( hsla(0, 0%, 100%, 0.2))); } a.active, a.link:active { background: -webkit-gradient(linear, left top, left bottom, from( hsl(0, 0%, 10%)), color-stop(0.25, hsl(0, 0%, 20%)), to( hsl(0, 0%, 33%))); } a.active span, a.link:active span { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); background: none; border-color: transparent; } </style> </head> <body> <ul> <li><a href="#null" class="link"><span>Download</span></a></li> <li><a href="#null" class="hover"><span>Download</span></a></li> <li><a href="#null" class="active"><span>Download</span></a></li> </ul> </body> </html>

上のコードをSafariで実行する[1]と以下のようなスクリーンショットが撮れます。

Screenshot

これをフォトショップで開いて、「イメージ」メニューから「トリミング…」を実行します。

「トリミング…」

これでボタン用画像の完成です。

Download

実際にアプライするとこうなります。

Download

基本HTMLなので文字や色なども簡単に変更可能です。

  1. 開発メニューから「スニペットエディタ」を開いてコピペするのが簡単です。
]]> http://snippet-editor.com/2010/09/button-image-made-with-css3.html/feed 0 bodyのclassにカテゴリー名を入れる http://snippet-editor.com/2010/09/category-into-body-class.html http://snippet-editor.com/2010/09/category-into-body-class.html#comments Sun, 26 Sep 2010 04:45:32 +0000 tomohiro_kasuga http://snippet-editor.com/?p=1345 <body class="<?php if ( is_category() || is_single() ) { ?><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat -> category_nicename; } ?><?php } ?>">

WordPressを使って、Bodyタグのclassにカテゴリー名[※]を入れるスニペット。

ナビをハイライトさせたり、カテゴリごとにデザインを切り替えたりするのに使えます。

  1. 正確にはカテゴリーのスラッグ
  2. スラッグが数字から始まったり、日本語が混じる場合はclass名に向いてませんので、あしからず…。
]]> http://snippet-editor.com/2010/09/category-into-body-class.html/feed 0 検索窓に検索語句を残す http://snippet-editor.com/2010/09/wordpress-search-form-improvement.html http://snippet-editor.com/2010/09/wordpress-search-form-improvement.html#comments Fri, 24 Sep 2010 03:05:56 +0000 tomohiro_kasuga http://snippet-editor.com/?p=1316 <form action="<?php bloginfo('url'); ?>/" method="get"> <input type="text" name="s" value="<?php the_search_query(); ?>" /> </form>

サイト内検索から検索ページに行くと検索窓に検索語句が残ってないという残念な感じのWordPressテーマに必要なスニペットです（上）。

当サイトではもう少し改良を加えました（下）。

<form action="<?php bloginfo('url'); ?>/" method="get">
<input type="text" class="text" name="s"
<?php if ( is_search() ): ?>
value="<?php the_search_query(); ?>"
<?php else: ?>
value="Search" onfocus="if(this.value=='Search')this.value=''" onblur="if(this.value=='')this.value='Search'"
<?php endif; ?>
 />
</form>

これで普段は「Search」と表示され、検索ページでは検索語句が表示されるように。カラーリングには下のCSSを当てています。

input.text { color: #888; }
input.text:focus { color: #222; background-color: #ffe; }
]]> http://snippet-editor.com/2010/09/wordpress-search-form-improvement.html/feed 0 import.cssならぬ、import.js http://snippet-editor.com/2010/09/import-js.html http://snippet-editor.com/2010/09/import-js.html#comments Thu, 23 Sep 2010 05:59:19 +0000 tomohiro_kasuga http://snippet-editor.com/?p=1249 function importJS() { if (! new Array().push) return false; var scripts = new Array( 'YOUR-PATH/YOUR-SCRIPT1.js' ,'YOUR-PATH/YOUR-SCRIPT2.js' ,'YOUR-PATH/YOUR-SCRIPT3.js' ); for (var i=0; i<scripts.length; i++) { document.write('<script type="text/javascript" src="' +scripts[i] +'"><\/script>'); } } importJS();

上の内容をimport.jsの名前で保存し、HTML側には下の一行を追記します。

<script type="text/javascript" src="YOUR-PATH/import.js"></script>

WordPressではあまりメリットがありませんが、静的生成を必要とするCMSを使っている場合、JSの追加／削除が瞬時に反映されるようになります。

]]> http://snippet-editor.com/2010/09/import-js.html/feed 0 CSS3のMedia Queryを使ってFollowバッジが被らないようにする http://snippet-editor.com/2010/09/media-query-max-width.html http://snippet-editor.com/2010/09/media-query-max-width.html#comments Wed, 22 Sep 2010 09:26:46 +0000 tomohiro_kasuga http://snippet-editor.com/?p=1230 @media only screen and (max-width: 960px) { div#twitterFollowBadge { display: none; } }

遅ればせながら「Follow me」バッジを付けてみました。

で、多少気になるのがウィンドウサイズを狭めた際に、バッジがコンテンツにかぶること。

CSS3のMedia Queryを使えば、所定のサイズを下回った際に自動的に非表示にすることができます。

SafariやChromeなど対応ブラウザでご確認ください。

]]> http://snippet-editor.com/2010/09/media-query-max-width.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