この数カ月でHTML5のサイトが国内にも増えてきました。先日10周年を迎えた EC studio のサイトもHTML5で制作しています。マークアップの面でのHTML5の導入となりましたが、難しいと思う以上に勉強になることが多くありました。（今も改善を続けています。） http://www.ecstudio.jp/ 個人サイト以外でHTML5を導入するのをためらっている人が多いと思うので、今からでも使っていくためのコツやノウハウをまとめてみました。 新要素をJavaScriptで生成する HTML5の新要素はIEでは未知の要素です。そのため記述していてもDOMツリーが構成されなかったり、CSSが適用されないという問題が生じます。 そこでdocument.createElement(要素名);により、ブラウザ（ユーザーエージェント）にとって未知な存在の要素を生成し、認識させることができます。

Zen-CodingでHTML/CSSコーディング作業の効率があがった人が増えてきたのではないかと思いますが、そこでさらにカスタマイズすることで効率化アップする方法を紹介します。 Zen-Codingではあらかじめ多くのHTML/CSSのショートコード、スニペットが登録されていますが、Zen-Codingを構成するファイルを少し修正するだけで、オリジナルのコードを登録することができます。 JavaScriptを触ることにはなりますが、JavaScriptを知らなくても大丈夫なぐらい簡単です。 zen_setting.jsに秘密がある Zen-Codingをダウンロードすると、対応アプリケーションごとのファイルをダウンロードすることができますが、そのダウンロードしたファイルの中にはzen_setting.jsというファイルが存在しています。 実はその中に、省略コードやスニペットがすべて書き込

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> /* 好ましくない例 */ これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。 つまり、「iPadだけ」に適用させるということは実質できないということになります。 この点はご注意ください。 デバイスの幅に左右されないリキッドレイアウトにする 前述のユーザーエージェントの話に次いで、レイアウトの話です。 iPadのデバイスとしての画面サイズはポートレート（縦向き）であれば 横

間が開いてしまいましたが、CSS Nite 4周年記念イベント（Vol.40 reprise）の続きです。HTML5のメリットを活かしたコンテンツアイデア」というテーマでお話されたのはKAYACの山田敬美さん。 HTM5を取り上げたブログ記事などを多く見るようになりましたが、その多くは新要素のマークアップについてが特に目立つ気がします。 そんな中、マークアップエンジンニアでもあり、KAYACのブッコミ11メンバーでもある山田さんはWebアプリケーションとしてのHTML5を生かしたアイデアをお話されていました。 iPhoneがHTMLで使える理由 HTML5といっても現状ブラウザごとで実装が異なり、実務として使うのは非常に難しい。でもそういったブラウザの種類に左右されないデバイスがある。 それがiPhoneだということです。iPhone SafariのWebkitはHTML5を要素のいくつか

いよいよ師走に突入しました。 この季節になると良く耳にするのが、「流行語大賞」や「2009年●×大賞」といった1年を振り返る話題ですよね。 Web界隈で言うと、今年話題になったもののひとつとして「Twitter」は外せないのではないでしょうか。 そのTwitterですが、最近ではプログラムによって自動でツイートされるTwitter botも増えてきて、天気予報やニュースを配信する便利系から、お笑い芸人のパロディなどのエンタメ系まで様々です。 プログラマが個人で制作されているケースも多く、Googleで検索すると制作の参考になるサイトが結構引っかかります。 今回は、それらのサイトを参考に個人的にTwitter botを制作したときのメモをまとめたいと思います。 もしよろしければご参考ください。 まずは、Twitter botの核となるプログラム 今回はPHPで組みました。 「なぜ、PHPなの

ブログを作りたい！ でもたいがいのブログサービスはテンプレートを自由にカスタマイズできないし かといって、WordPress などのCMSはインストールしないといけないしなぁ… そんな方におすすめしたいのが、 Googleが提供している無料ブログサービスBlogger(ブロガー)。 自由にカスタマイズができて、管理しやすいサービスです！ Blogger はこんなことができます！ ・独自ドメインで運用できる ・複数のブログを１つのアカウントで一括管理できる ・ブログのインポート・エクスポート・削除がボタン一つでできるので、 バックアップが簡単にできる（削除しても90日間は復元可能） ・ブログのバージョンアップやセキュリティーは、Google がしてくれる ・FTP情報を設定すると必要ファイルだけ生成してくれる ・静的URLで作成してくれる ・アドセンスの設定ができる 今回は、実践的に使える、

今回はEC studioで利用しているWordpressプラグインをまとめて紹介します。 すべてとても使いやすいプラグインばかりです。 プラグインでさらにWordpressを使いこなしましょう！ 必須でいれてます、オススメプラグイン！ ・FeedLogger RSSの閲覧者をカウントしてくれます。 （FeedLoggerを有効にするときは、FeedLoggerフォルダにあるdataフォルダのパーミッションを777（書き込み可能）にしないといけないです。アップ時要注意！） ・Google XML Sitemaps ロボット向けのXMLサイトマップを簡単に作成してくれます。 ・Add Meta Tags meta keywordsとmeta descriptionを自動的に挿入してくれます。 ・WP-PageNavi 記事が増えた場合にナビゲーションを表示してくれます。 ・Akismet コメ

InternetExplorerのブラウザチェックのツールとしてIE Testerを紹介していますが、なんとあのAdobeからオンラインブラウザチェックツール「BrowserLab（ブラウザーラボ）」が出ました！しかもプレビュー版ということで無償利用できます。 これひとつで「Firefox」「Internet Explorer」「Safari」での検証ができます。 実際につかってみた様子を動画にしました。 BrowserLab（ブラウザーラボ）の特長は、 オンラインでしかも無償で利用できる オンラインということはどこでも、どの環境でも利用できるのでうれしいですね。 ※要Adobe FlashPlayer 10 しかも無償ということで気軽に使えます。なお利用するにはAdobeアカウントの取得は必要です。制作系の方であればAdobe製品の購入などでお持ちの方も多いと思いますが、そのログインID

以前にリクエストをいただいていたWordpressでの 投稿者別顔アイコン表示方法を紹介したいと思います。 顔アイコンを表示させると投稿者別の投稿がわかりやすくなり、 興味がある記事が探しやすくなったりします。ぜひお試しください。 アイコンに名前をつける まずはアイコンを作成して、名前をつけます。 この名前をつける時ですが、ユーザー名（ログインID）をつけてください。 ユーザー名はWordpressの管理画面内の「ユーザー」から確認してください。 画像をフォルダにいれる 作成したアイコンを画像フォルダの中にいれます。 （このブログではテーマの中のimagesフォルダにいれています） WordPressのテーマテンプレートにタグを入れる 顔アイコンを表示させたいテンプレートに Wordpressのテンプレートタグを挿入します。 顔アイコンの切り替えはthe author loginというテン