HTML/CSS Category Archive

HTML/CSS カテゴリの記事一覧。(5 / 17 ページ)

CSS で作る Tumblr モバイルアプリ風メニュー

1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。

Tumbler の Android アプリ (Tumblr for Android) の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript (jQuery 使用) で再現してみました。実際のサンプルは下記に。

Posted by:

text-decoration: blink; と blink 要素終了のお知らせ

Firefox大昔の名残で、Netscape 系ブラウザと Opera しかサポートしていませんので、今どき使っている人の方が珍しいどころか、知ってる人も少ないんじゃないかとは思いますが (携帯サイト作ってる人とかだと使うのかな...)、Bugzilla@Mozilla で、Gecko レンダリングエンジンにおける blink 要素と CSS の text-decoration プロパティに対する blink 値指定のサポート (点滅エフェクト) をやめようぜっていう提案がされ、それが承認されて、今後リリースされるバージョンに反映されることが確定したみたいですね。

Posted by:

HTML5 ロゴがクレイジーに迫ってくる何か。「Golden Hat Contest」 に応募してみた

HTML5hat.io ってサイトで、デベロッパーやクリエイター向けのコンテスト 「Golden Hat Contest (ゴールデンハット コンテスト)」 っていうのが開催されています。

その、1st Contest の方のお題が 「HTML5 ロゴを使ったクレイジーな何か。もしくは、ハット (hat.ioロゴ) を使ったクールな何か。」 とのことでしたので、クールなのは無理だけど、クレイジー (技術的な意味じゃなくて) なやつなら行ける! ってことでちゃちゃっと作って応募してみました。

Posted by:

改めて今の技術でやってみたら面白そうな CSS コーディングの大会

2007年の 4月とかの話なので、もうかれこれ 6年近く前の話なんですが、JamGraffiti (@ichi23)さんが企画した、「画像の使用を極力控えてかっこいい CSS デザインをやってみよう大会」 ってのがありましてですね。

簡単に言えば 「css Zen Garden」 なんかと同じで、「同じ XHTML 文書に対してみんなで CSS 書いて、どんなデザインができるか遊んでみようぜ」 っていう試みなわけです。

と言っても、css Zen Garden が盛り上がってたのだって 2006年とか、所謂 Web 標準の啓蒙がとっても盛んだった時代なので、もしかするとお若い方々はご存じない (こういう事書くとあれですね、自分が歳とったのが実感できて微妙な感じですが) かもしれませんが……

Posted by:

特定の範囲内にのみスタイルを適用できる scoped 属性

HTML5HTML5 で style 要素に追加された scoped 属性は特に目新しい属性ではありませんが、ここまで正式に対応したブラウザが存在しなかったため、使う機会がありませんでした。ところが、ここにきて Firefox Nightly Builds が対応したそうなので、ちょこっと試してみます。

scoped 属性付きの style 要素内に記述されたスタイルは、文書全体ではなく、その style 要素の親要素をルートとするサブツリーに対してのみ適用されます。例えばページ内にちょっとした要素ブロックを追加したいんだけど、全体の CSS ファイルにはいちいち手を加えたくないな……なんて時に役に立つかもしれません。

Posted by:

meta 要素に対する Microdata の指定

HTML5もうちょっと早く書こうと思ったんですけどこんなに間が空くとは……

去年の末、HTML5 Advent Calendar 2012 の記事として、「Microdata を使ってみよう。サンプルソースで学ぶ Microdata」 を書いたんですが、その中で 2箇所ほどサンプルソースに間違いがあるのをご指摘頂いて修正したんですね (ご指摘感謝です)。

そのうち、1つの間違いは単純な記述抜けというか、ミスだったんで置いといて、もう1つ、私が meta 要素に対して itemprop 属性を指定したサンプルで、同じ要素に name 属性をあわせて指定してたのをご指摘頂きました。

それに関しては完全に私の勘違いだったんで修正したんですが、その時に改めて仕様書の方を再確認して気がついた点もあるので共有しようと思います。

Posted by:

Microdata を使ってみよう。サンプルソースで学ぶ Microdata

HTML5HTML5 Advent Calendar 2012、7日目の記事です。なんか軽い気持ちで書いてみますとか言ってしまったんですが、緊張しますね…

さて、タイトルの通りなのですが、HTML Microdata (マイクロデータ) について簡単に触れてみようかなと思います。この辺の話題に関して、Microdata とは何かとか、詳しい解説はすでに色々な方が書かれていますのでそちらを見ていただく (文末にまとめてあります) として、この記事では、そういう解説は置いといて、Blog や、企業の Web サイトなど、よくあるシチュエーションで使いそうな実際のサンプルソースをいくつか挙げつつ、それに対して Microdata を追加してみて、こんな感じで使うんですよっていう例を示してみようかなと。

Posted by:

Instagram バッジ試してみた

InstagramTechCrunch Japan さんで Instagram が Web サイトなどに設置できるバッジをリリースって記事が上がっていたので早速試してみました。

バッジといっても、Google+ で提供されているような 多機能的な感じではなく、単なる画像とそれを使ったリンク用の HTML が渡されるだけですが、先にリリースされた Web プロフィールページとあわせて、自分の Instagram を色んな人に見てもらう機会を増やすことができそうですね。

Posted by:

Webkit に最適化されたサイトを IE10 に適応させるためのガイド

スラッシュドットで 「Microsoft、「WebKitはWeb標準を破壊している」と主張」 なんてストーリーが上がってて、なんぞやと思って大本の記事を見に行ったんですけど、そしたらそれが 「Webkit しか対象にしてない Web サイトを IE10 でもきちんと動作させるためにやっといた方がいいことガイド」 っていうお役立ちコンテンツだったってことで、がんばって最後まで読んだ手前、ついでなので翻訳して掲載してみようかなと思います。

Posted by: