CSS だけで作るタブ切替ユーザインタフェース :target 疑似クラスを使って、JavaScript は一切使用せず CSS だけでタブ切替のユーザインタフェースを実装してみます。 Continue reading
Google が Microdata による組織ロゴの意味づけに対応したそうなので Google が Microdata (schema.org) による、組織ロゴの意味づけをサポートしたとのことですので、実際に使用する際のサンプルソースを挙げてみます。 Continue reading
HTML5 input type="range" で作る 「へぇボタン」 HTML5 で input 要素の type 属性として追加された 「range」 を使って、「へぇボタン」 を作ってみました。 Continue reading
Firefox 21 が正式リリース、main 要素などに対応 Firefox 21 が正式にリリースされ、HTML5 関連では、main 要素への対応、style 要素の scope 属性への対応などが行われました。 Continue reading
Firefox 23 より text-decoration: blink; による点滅効果が削除 Firefox 23 で、以前アナウンスされていた blink 要素と CSS の text-decoration: blink; による点滅エフェクトのサポートが廃止されました。 Continue reading
Google Drive に Web ページから簡単にファイルを保存するボタン Web ページ上にある画像やファイルを、ワンクリックで Google Drive に保存できる 「Save to Drive」 ボタンが公開されました。 Continue reading
Selectors Level 4 の Working Draft が更新される 5月 2日付けで、Selectors Level 4 の Working Draft (草案) が更新されました。 Continue reading
CSS からベンダプレフィックスという仕組みが消える日 Google Chrome が採用する新しいオープンソースレンダリングエンジン 「Blink」 のプロジェクトページの記述や Mozilla の方針から、今後ベンダプレフィックスがなくなるかもというお話 Continue reading
HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除 HTML5 の勧告候補に main 要素が追加されました。また、勧告候補からの削除がアナウンスされていた hgroup 要素が予定通り削除されました。 Continue reading
CSS で作る Tumblr モバイルアプリ風メニュー Tumbler の Android アプリ (Tumblr for Android) の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript (jQuery 使用) で再現してみました。 Continue reading
hgroup 要素が HTML5 勧告候補から削除される W3C のメーリングリスト経由ですが、hgroup 要素が HTML5 の勧告候補 (Candidate Recommendation) から削除されるようです。また、HTML 5.1 の仕様からは削除されました。 Continue reading
text-decoration: blink; と blink 要素終了のお知らせ Bugzilla@Mozilla で、Gecko レンダリングエンジンにおける blink 要素と CSS の text-decoration: blink; のサポート廃止が提案され、それが承認されたようです。 Continue reading
HTML5 ロゴがクレイジーに迫ってくる何か。「Golden Hat Contest」 に応募してみた 「HTML5 ロゴを使ったクレイジーな何か。もしくは、ハット (hat.ioロゴ) を使ったクールな何か。」 をお題に開催されている Golden Hat Contest に応募してみました。 Continue reading
改めて今の技術でやってみたら面白そうな CSS コーディングの大会 もう 6年近く前の話なんですが、JamGraffiti さんが企画した CSS コーディングの大会、「画像の使用を極力控えてかっこいい CSS デザインをやってみよう大会」 を今さら思い出したので懐かしさついでに紹介。今の技術でやったらまた新しい発見があるかも。 Continue reading
特定の範囲内にのみスタイルを適用できる scoped 属性 HTML5 で追加された scoped 属性は特に目新しい属性ではありませんが、ここまで正式に対応したブラウザが存在しなかったため、使う機会がありませんでした。ところが、ここにきて Firefox Nightly が対応したそうなので、ちょこっと試してみます。 Continue reading
meta 要素に対する Microdata の指定 meta 要素に対する Microdata の指定について、過去に書いた記事に間違いがあったので修正とその解説。また、itemprop 属性もつ meta 要素や link 要素の body 要素内での使い方に関しても解説してみます。 Continue reading
Microdata を使ってみよう。サンプルソースで学ぶ Microdata HTML5 Advent Calendar 2012、7日目の記事として、Microdata (マイクロデータ) に触れてみます。サンプルソースを中心に、実際のページでどのように使えるのかを示しました。これから Microdata を使ってみたいという人に少しでも参考になればと思います。 Continue reading
Instagram バッジ試してみた Instagram が Web サイトなどに設置できるバッジをリリースしたとのことで早速試してみました。先にリリースされた Web プロフィールページとあわせて、自分の Instagram を色んな人に見てもらう機会を増やすことができそうですね。 Continue reading
Webkit に最適化されたサイトを IE10 に適応させるためのガイド Windows Phone Developer Blog に 「Webkit に最適化されたサイトを IE10 に適応させるためのガイド」 っていうお役立ちな感じの記事があったので、翻訳してご紹介。長いです。 Continue reading
改行削除するくらいなら gzip したらいいじゃない CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 Continue reading
Web フォントでアイコン表示。 Font Awesome 使ってみた Blog のデザインをリニューアルした際、アイコン関係を Web フォントを使ってやってみました。その時に利用させてもらったのが 「Font Awesome」 ですが、今回はその簡単な使い方について書いてみようと思います。 Continue reading
Adobe のフォント 「Source Code Pro」 試してみた Adobe さんがソースコードを見やすく表示するためのフォントとして、その名も 「Source Code Pro」 というフォントを発表したとのことで、早速ですがこのブログでも使ってみました。Google Web Fonts からの使用方法を簡単に解説。 Continue reading
HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 Continue reading
「すべての人に知っておいてほしい スマートフォンサイトデザインの基本原則」に寄稿しました MdN さんより 8月27日に発売される書籍 「すべての人に知っておいてほしい スマートフォンサイトデザインの基本原則」 に寄稿しました。今度のはスマートフォンサイトやアプリケーションを作成する際に役に立つ内容の書籍になっています。 Continue reading
Firefox 13 における HTML5 canvas 要素のアクセシビリティ アクセシビリティコンサルティングを提供する Paciello Group の公式 Blog で、新しい Firefox 13 が canvas 要素のフォールバックコンテンツに対するフォーカスに対応したことに関する記事が上がっていましたので、紹介して見ようかと思います。 Continue reading
Firefox 15 (現 Nightly) にレスポンシブモードがついたよ 現在、Nightly として提供されている、Firefox 15 ですが、デベロッパー向けツールに、「Responsive Mode (レスポンシブモード)」 と 「Layout View (レイアウトビュー)」 という 2つの便利そうな機能がついたそうなので紹介。 Continue reading
iframe 要素の seamless 属性を試してみた WebKit Nightly Builds が iframe 要素に追加された seamless 属性に対応したとのことなので、早速どんな感じになるのか確認してみました。現在公開されている WebKit Nightly Builds の最新版、及び Google Chrome も、開発者向けビルド (Dev channel) の最新版 「21.0.1155.2」 で動作しているのが確認できました。 Continue reading
iOS Safari で border-radius に 「%」 値が使えるようになってた件 去年の話ですが、「HTML5 + CSS でコバトン描いてみた」 っていうエントリを書いたんですが、その際、iOS の Safari では border-radius プロパティに 「%」 値が使えないんですねっていう追加エントリも合わせて書きました。ところが昨日試したら普通に使えるようになってましたってことで、フォロー記事です。 Continue reading
placeholder 属性と jQuery で IE にもプレースホルダを フォームの入力コントロール (input とか textarea) に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用するプレースホルダ。HTML5 では、placeholder 属性が新たに追加され、プレースホルダの提供が簡単に行えますが、この属性の値を活かして、未対応環境にもプレースホルダを提供する jQuery プラグインを紹介します。 Continue reading
CSS で作るスマートフォン向け片手操作メニュー ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。 Continue reading
Facebook ページで自作のタブがカラム落ちしている件 Facebook 側の仕様変更による一時的なものなんでしょうけど、iframe で読み込んでいる外部のページがサイズ的に中央のカラムに収まらずに落ちてしまうようですね。 Continue reading
Fullscreen API を簡単に試してみた Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API ですが、お勉強ついでに簡単に試してみました。 Continue reading
HTML5 は SEO に有効なの? 「HTML5 でコーディングしたら SEO (検索エンジン最適化) 的に有利になりますか?」 っていう質問、たまに聞かれるんですけが、それに対する答えとして私がまとめて書こうと思っていた内容をすべて言ってくれてしまっている記事が Impressive Webs で投稿されましたので、便乗して簡単に訳しつつ紹介してみようと思います。 Continue reading
HTML5: ジャーナリスト、アナリストのための覚書 HTML5 Doctor で 「HTML5: briefing notes for journalists and analysts」 という記事が上がっていましたのでまたまた稚拙ではありますが翻訳など。今回の記事は、ジャーナリスト、アナリスト (つまり、あまり技術的な話に精通していない人) 向けに、よくある質問とその答えをまとめたものです。技術者以外の人に 「HTML5 って何?」 って聞かれたときの参考になるかも。 Continue reading
新著 「逆引き HTML+CSS デザイン事典」 が9月27日発売 9月27日に新しい著書、「できるクリエイター 逆引きHTML+CSSデザイン事典 Webクリエイターの現場で必要な基本と最新動向」 がインプレスさんより発売されます。今回も CSS HappyLife の中の人と共著。主にWebサイト制作、初級~中級の人向け。「困ったこと」 や 「やりたいこと」 からその解決策を逆引きできる感じの書籍になってます。 Continue reading
iOS Safari で border-radius : <percentage> が使えない件 Safari が 5.1 (Webkit2) になってから、border-radius プロパティに 「%」 値を指定できるようになっていたので iOS 版の Safari も 「%」 値が指定できると思い込んでいたら使えませんでした。というお話。単なる勘違いという間抜けなお話ではありますが、メモ代わりにエントリ。 Continue reading
HTML5 + CSS でコバトン描いてみた なんか、CSS で色々描いてみた的なやつを見てたら自分も描いてみたくなったので、埼玉県民にはおなじみの鳥さんマスコット、「コバトン」を HTML5 と CSS で描いてみるテスト。ちなみにコバトンが浦和レッズバージョンなのは個人的な趣味の問題です... Continue reading
非同期コードで Google +1 ボタンを設置してみた 表示速度を従来より 3倍高速にした新しい Google +1 ボタンが発表されましたが、同時に追加された非同期スニペットに関して、それを有効にするためのソースコードが、現時点ではボタン設置コード生成ページの言語設定を英語にしていないと表示されないようなのでメモ。 Continue reading
HTML5 でやりがちな間違い HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Continue reading
Tumblr から EPUB を生成する Puble 無料ブログサービス 「Seesaaブログ」 などを運営する シーサーが、Tumblr のコンテンツを EPUB ファイルに変換するサービス 「puble(パブル)」 を公開したので早速使ってみました。puble は Tumblr アカウントを指定してあげると、そのアカウントの投稿を自動取得し、そこから選択したもの最大 50件を EPUB 形式で書き出してくれるサービスです。 Continue reading
5分でわかる Facebook ページへのタブ追加 タブ追加機能を使って、Facebook ページにアクセスした際に最初に表示されるページをカスタマイズしてみましたので、その作り方や設定方法などを簡単にご紹介。Facebook ページは iframe を使用して、外部のサーバにあるコンテンツをタブとして表示することができます。 Continue reading
HTML5、W3C で Last Call (最終草案) へ 本日(米国時間 25日)、先に公開されていた仕様策定スケジュールに対して予定通り、HTML5 及び、関連仕様 5つの Lasc Call が宣言されました。 Continue reading
W3C Cheatsheet が HTML5 に対応 去年、W3C が公開していた 「W3C Cheatsheet」 ですが、今回更新されて HTML5 にも対応し、より使いやすくなったので紹介してみます。 Continue reading
Firefox 4 がサポート予定の calc() とは Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。calc() 自体は CSS3 で策定中の機能としてかなり前から存在しますが、まだサポートしているブラウザがないので、馴染みはないかもしれません。Firefox にしてもまだサポート予定の段階ですし、正式に使えるようになるのは先の話ではありますが、calc() を使うことでどんなことができるようになるのか簡単に触れてみたいと思います。 Continue reading
CSS の情報サイト 「CSS HappyLife ZERO」 CSS HappyLife の中の人が 「CSS HappyLife ZERO」 という新しい Web サイト始めたみたいです。 Continue reading
HTML5 でソースコード書いてみた 今のところすぐに HTML5 を使う理由もないので、実際に HTML5 でソースコードを書いてみるってことをしていなかったのですが、思い立って簡単に書いてみました。この Blog のトップページを HTML5 で再コーディングしたらどんな感じかなということで、今ある構成要素をほぼそのままに、HTML5 でサンプルを作ってみました。 Continue reading
HTML5 を学ぶための情報源まとめ ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 Continue reading
Web コーディング実践講座 すいません告知ですが、縁あってマルチメディアスクールWAVE さんで、「Web コーディング実践講座」 というビデオ講座を担当させていただきました。講座は 「PAL」 というオンデマンド学習方式で提供されますので、事前に教則ビデオを撮っておいて、それを使って生徒さんは自分のペースで学習していくという形式になります。 Continue reading