CSS カテゴリの記事一覧。（5 / 13 ページ）
去年の話ですが、「HTML5 + CSS でコバトン描いてみた」 っていうお遊びを紹介するエントリを書いたんですが、その後 iPhone / iPad で確認してみたらコバトンさんのお顔が四角い顔になっていて、あぁ。iOS の Safari では border-radius プロパティに 「%」 値が使えないんですねっていうエントリを追加で書きました。
で、そのまま放置してたんですけど、昨日、ちょっと用事があって 「%」 値の指定を試したら普通に使えるようになってましたってことで、フォロー記事として書いておきます。
フォームの入力コントロール （input とか textarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用する （プレースホルダ） なんてことはよくやります。
HTML5 では、プレースホルダを指定する属性として、まさにそのままの名前が付いた、placeholder 属性が新たに追加され、ブラウザさえ対応していればとても簡単に実現可能になっていますが、今のところ IE が対応していないのが悲しいところ…
久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。
現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 5 （iPhone 4S） Safari では動作確認しました。他のスマートフォンとか知らない （CSS の position : fixed に対応してないヤツだと動かない）。IE？何それ美味しいの？
Facebook 側の仕様変更による一時的なものなんでしょうけど、iframe で読み込んでいる外部のページがサイズ的に中央のカラムに収まらずに落ちてしまうようですね。
ちょっと前、先月の話題になってしまうのですが、Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API に関連して、Mozilla が公開している Gecko:FullScreenAPI が更新されて Firefox Nightly で使えるようになったり、W3C からも Fullscreen （Editor's Draft） が公開されたりと色々動きが活発になってきましたので、いい機会ということで、お勉強ついでに簡単に試してみました。
例えば HTML5 で追加された video 要素は、今まで Flash などのアドオンに頼ってきた動画の Web ページへの埋め込み、再生を HTML 側で対応することを可能にしましたが、フルスクリーン （全画面） 表示に関しては機能として含まれていませんでした。Fullscreen API は、JavaScript を使用して、video 要素や、canvas をはじめ、任意の要素内をフルスクリーン表示することを可能にしてくれます。
明日ですが、9月27日に新しい著書、「できるクリエイター 逆引きHTML+CSSデザイン事典 Webクリエイターの現場で必要な基本と最新動向」 がインプレスさんより発売されます。今回も CSS HappyLife の中の人と共著です。
今回の書籍は、主にWebサイト制作、初級～中級の人向け。タイトルの 「逆引き」 からもわかるように、「困ったこと」 や 「やりたいこと」 からその解決策を逆引きできる感じの書籍になってます。頭から体系立てて学んでいくような書籍ではないので、手元に置いておいて、「あれどうすんだっけ？」 という時に開いてもらえたらいいなっていう感じの内容と作りになっています。
いや、これは単純に私が知らなかったというか、普通に使えると思い込んでいただけなんですけどね。
前のエントリで 「HTML5 + CSS でコバトン描いてみた」 っていうお遊びを紹介したのですが、その後 iPhone / iPad で確認してみたらコバトンさんのお顔が四角い顔になっていて、そこで初めて気がつきました。結論から言ってしまえば単なる勘違いという間抜けなお話ではありますが、メモ代わりにエントリ。
なんか、CSS で色々描いてみた的なやつを見てたら自分も描いてみたくなったので、埼玉県民にはおなじみの鳥さんマスコット 「コバトン」 を HTML5 と CSS で描いてみるテスト。
単純に 空の div 要素を並べて CSS で整形して position: absolute; でもいいんですが、今回は CSS 無しの、HTML としてもある程度意味のわかる文書になるように、元の HTML も書いてみました。
あまり時間をかけずにとりあえずという感じで描いて、細かい検証とか、ソースコードのブラッシュアップとかしていませんので、絵としての再現度やソースコードは微妙なところも多々あります。また主要なブラウザの最新版ならほぼ問題なく表示できると思いますが、Chrome、Safari などでは顔がちょっと崩れていたり、IE は text-shadow が効いてなかったりと一部おかしい部分もありますが、その辺はご愛敬と言うことで。
ちなみにコバトンが浦和レッズバージョンなのは個人的な趣味の問題です…
無料ブログサービス 「Seesaaブログ」 などを運営する シーサーが、Tumblr のコンテンツを EPUB ファイルに変換するサービス 「puble（パブル）」 を公開したので早速使ってみました。
Tumblr から EPUB 形式のファイルを生成するサービスとしては、1年くらい前に ssig33 氏が公開した 「Tumblr 2 ePub」 があり、一部では話題になりましたが、puble もこれと同様、アカウントを指定してあげると、そのアカウントの投稿を自動取得し、そこから選択したもの最大 50件を EPUB 形式で書き出してくれるもの。
リニューアルと同時に、Facebook ページを作ってみたんですが、タブ追加機能を使って、Facebook ページにアクセスした際に最初に表示されるページをカスタマイズしてみましたので、その作り方や設定方法などを簡単にご紹介。恒例（謎）の 5分でわかるシリーズ。
Facebook ページは iframe を使用して、外部のサーバにあるコンテンツを比較的簡単に読み込める仕様になっていますが、これを利用することでオリジナルのページを自分の Facebook ページにタブとして表示することができます。