HTML/CSS カテゴリーの記事一覧

HTML や CSS のコーディングなどに関する記事の一覧を表示しています。（3 / 5 ページ）

Chrome Beta for Android 28 が Fullscreen API に対応

Chrome Beta for Android 28 がリリースされ、Fullscreen API に対応したとのことですので試してみました。このバージョンから、レンダリングエンジンが Blink に変更された他、いくつかの新機能も追加されています。

CSS だけで作るタブ切替ユーザインタフェース（float 使用版）

:target 疑似クラスを使って、JavaScript は一切使用せず CSS だけでタブ切替のユーザインタフェースを実装するテストの、position: absolute; を使わない版です。

CSS だけで作るタブ切替ユーザインタフェース

:target 疑似クラスを使って、JavaScript は一切使用せず CSS だけでタブ切替のユーザインタフェースを実装してみます。

Google が Microdata による組織ロゴの意味づけに対応したそうなので

Google が Microdata （schema.org）による、組織ロゴの意味づけをサポートしたとのことですので、実際に使用する際のサンプルソースを挙げてみます。

HTML5 input type="range" で作る「へぇボタン」

HTML5 で input 要素の type 属性として追加された「range」を使って、「へぇボタン」を作ってみました。

Firefox 21 が正式リリース、main 要素などに対応

Firefox 21 が正式にリリースされ、HTML5 関連では、main 要素への対応、style 要素の scope 属性への対応などが行われました。

Firefox 23 より text-decoration: blink; による点滅効果が削除

Firefox 23 で、以前アナウンスされていた blink 要素と CSS の text-decoration: blink; による点滅エフェクトのサポートが廃止されました。

Google Drive に Web ページから簡単にファイルを保存するボタン

Web ページ上にある画像やファイルを、ワンクリックで Google Drive に保存できる「Save to Drive」ボタンが公開されました。

Selectors Level 4 の Working Draft が更新される

5月 2日付けで、Selectors Level 4 の Working Draft （草案）が更新されました。

CSS からベンダプレフィックスという仕組みが消える日

Google Chrome が採用する新しいオープンソースレンダリングエンジン「Blink」のプロジェクトページの記述や Mozilla の方針から、今後ベンダプレフィックスがなくなるかもというお話

HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除

HTML5 の勧告候補に main 要素が追加されました。また、勧告候補からの削除がアナウンスされていた hgroup 要素が予定通り削除されました。

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

Tumbler の Android アプリ（Tumblr for Android）の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用）で再現してみました。

hgroup 要素が HTML5 勧告候補から削除される

W3C のメーリングリスト経由ですが、hgroup 要素が HTML5 の勧告候補（Candidate Recommendation）から削除されるようです。また、HTML 5.1 の仕様からは削除されました。

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

Bugzilla@Mozilla で、Gecko レンダリングエンジンにおける blink 要素と CSS の text-decoration: blink; のサポート廃止が提案され、それが承認されたようです。

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

「HTML5 ロゴを使ったクレイジーな何か。もしくは、ハット（hat.ioロゴ）を使ったクールな何か。」をお題に開催されている Golden Hat Contest に応募してみました。

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

もう 6年近く前の話なんですが、JamGraffiti さんが企画した CSS コーディングの大会、「画像の使用を極力控えてかっこいい CSS デザインをやってみよう大会」を今さら思い出したので懐かしさついでに紹介。今の技術でやったらまた新しい発見があるかも。

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

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

meta 要素に対する Microdata の指定

meta 要素に対する Microdata の指定について、過去に書いた記事に間違いがあったので修正とその解説。また、itemprop 属性もつ meta 要素や link 要素の body 要素内での使い方に関しても解説してみます。

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

HTML5 Advent Calendar 2012、7日目の記事として、Microdata （マイクロデータ）に触れてみます。サンプルソースを中心に、実際のページでどのように使えるのかを示しました。これから Microdata を使ってみたいという人に少しでも参考になればと思います。

Instagram バッジ試してみた

Instagram が Web サイトなどに設置できるバッジをリリースしたとのことで早速試してみました。先にリリースされた Web プロフィールページとあわせて、自分の Instagram を色んな人に見てもらう機会を増やすことができそうですね。

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

Windows Phone Developer Blog に「Webkit に最適化されたサイトを IE10 に適応させるためのガイド」っていうお役立ちな感じの記事があったので、翻訳してご紹介。長いです。

改行削除するくらいなら gzip したらいいじゃない

CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。

Web フォントでアイコン表示。 Font Awesome 使ってみた

Blog のデザインをリニューアルした際、アイコン関係を Web フォントを使ってやってみました。その時に利用させてもらったのが「Font Awesome」ですが、今回はその簡単な使い方について書いてみようと思います。

Adobe のフォント「Source Code Pro」試してみた

Adobe さんがソースコードを見やすく表示するためのフォントとして、その名も「Source Code Pro」というフォントを発表したとのことで、早速ですがこのブログでも使ってみました。Google Web Fonts からの使用方法を簡単に解説。

HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ

iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。

「すべての人に知っておいてほしいスマートフォンサイトデザインの基本原則」に寄稿しました

MdN さんより 8月27日に発売される書籍「すべての人に知っておいてほしいスマートフォンサイトデザインの基本原則」に寄稿しました。今度のはスマートフォンサイトやアプリケーションを作成する際に役に立つ内容の書籍になっています。

Firefox 13 における HTML5 canvas 要素のアクセシビリティ

アクセシビリティコンサルティングを提供する Paciello Group の公式 Blog で、新しい Firefox 13 が canvas 要素のフォールバックコンテンツに対するフォーカスに対応したことに関する記事が上がっていましたので、紹介して見ようかと思います。

Firefox 15 （現 Nightly）にレスポンシブモードがついたよ

現在、Nightly として提供されている、Firefox 15 ですが、デベロッパー向けツールに、「Responsive Mode （レスポンシブモード）」と「Layout View （レイアウトビュー）」という 2つの便利そうな機能がついたそうなので紹介。

iframe 要素の seamless 属性を試してみた

WebKit Nightly Builds が iframe 要素に追加された seamless 属性に対応したとのことなので、早速どんな感じになるのか確認してみました。現在公開されている WebKit Nightly Builds の最新版、及び Google Chrome も、開発者向けビルド（Dev channel）の最新版「21.0.1155.2」で動作しているのが確認できました。

iOS Safari で border-radius に「%」値が使えるようになってた件

去年の話ですが、「HTML5 + CSS でコバトン描いてみた」っていうエントリを書いたんですが、その際、iOS の Safari では border-radius プロパティに「%」値が使えないんですねっていう追加エントリも合わせて書きました。ところが昨日試したら普通に使えるようになってましたってことで、フォロー記事です。

placeholder 属性と jQuery で IE にもプレースホルダを

フォームの入力コントロール（input とか textarea）に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用するプレースホルダ。HTML5 では、placeholder 属性が新たに追加され、プレースホルダの提供が簡単に行えますが、この属性の値を活かして、未対応環境にもプレースホルダを提供する jQuery プラグインを紹介します。

CSS で作るスマートフォン向け片手操作メニュー

ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック（タップ）で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用）で作ってみたので紹介。

Facebook ページで自作のタブがカラム落ちしている件

Facebook 側の仕様変更による一時的なものなんでしょうけど、iframe で読み込んでいる外部のページがサイズ的に中央のカラムに収まらずに落ちてしまうようですね。

Fullscreen API を簡単に試してみた

Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API ですが、お勉強ついでに簡単に試してみました。

HTML5 は SEO に有効なの？

「HTML5 でコーディングしたら SEO （検索エンジン最適化）的に有利になりますか？」っていう質問、たまに聞かれるんですけが、それに対する答えとして私がまとめて書こうと思っていた内容をすべて言ってくれてしまっている記事が Impressive Webs で投稿されましたので、便乗して簡単に訳しつつ紹介してみようと思います。

HTML5：ジャーナリスト、アナリストのための覚書

HTML5 Doctor で「HTML5: briefing notes for journalists and analysts」という記事が上がっていましたのでまたまた稚拙ではありますが翻訳など。今回の記事は、ジャーナリスト、アナリスト（つまり、あまり技術的な話に精通していない人）向けに、よくある質問とその答えをまとめたものです。技術者以外の人に「HTML5 って何？」って聞かれたときの参考になるかも。

新著「逆引き HTML+CSS デザイン事典」が9月27日発売

9月27日に新しい著書、「できるクリエイター逆引きHTML+CSSデザイン事典 Webクリエイターの現場で必要な基本と最新動向」がインプレスさんより発売されます。今回も CSS HappyLife の中の人と共著。主にWebサイト制作、初級～中級の人向け。「困ったこと」や「やりたいこと」からその解決策を逆引きできる感じの書籍になってます。

iOS Safari で border-radius : <percentage> が使えない件

Safari が 5.1 （Webkit2）になってから、border-radius プロパティに「%」値を指定できるようになっていたので iOS 版の Safari も「%」値が指定できると思い込んでいたら使えませんでした。というお話。単なる勘違いという間抜けなお話ではありますが、メモ代わりにエントリ。

HTML5 + CSS でコバトン描いてみた

なんか、CSS で色々描いてみた的なやつを見てたら自分も描いてみたくなったので、埼玉県民にはおなじみの鳥さんマスコット、「コバトン」を HTML5 と CSS で描いてみるテスト。ちなみにコバトンが浦和レッズバージョンなのは個人的な趣味の問題です...

非同期コードで Google +1 ボタンを設置してみた

表示速度を従来より 3倍高速にした新しい Google +1 ボタンが発表されましたが、同時に追加された非同期スニペットに関して、それを有効にするためのソースコードが、現時点ではボタン設置コード生成ページの言語設定を英語にしていないと表示されないようなのでメモ。

HTML5 でやりがちな間違い

HTML5 Doctor で「Avoiding common HTML5 mistakes」という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。

HTML5 におけるアウトラインに関して簡単解説

HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。

Tumblr から EPUB を生成する Puble

無料ブログサービス「Seesaaブログ」などを運営するシーサーが、Tumblr のコンテンツを EPUB ファイルに変換するサービス「puble（パブル）」を公開したので早速使ってみました。puble は　Tumblr アカウントを指定してあげると、そのアカウントの投稿を自動取得し、そこから選択したもの最大 50件を EPUB 形式で書き出してくれるサービスです。

5分でわかる Facebook ページへのタブ追加

タブ追加機能を使って、Facebook ページにアクセスした際に最初に表示されるページをカスタマイズしてみましたので、その作り方や設定方法などを簡単にご紹介。Facebook ページは iframe を使用して、外部のサーバにあるコンテンツをタブとして表示することができます。

CSS 2.1 が W3C 勧告に

CSS 2.1 が長い時間をかけてやっと W3C 勧告になりました。

HTML5、W3C で Last Call （最終草案）へ

本日（米国時間 25日）、先に公開されていた仕様策定スケジュールに対して予定通り、HTML5 及び、関連仕様 5つの Lasc Call が宣言されました。

W3C Cheatsheet が HTML5 に対応

去年、W3C が公開していた「W3C Cheatsheet」ですが、今回更新されて HTML5 にも対応し、より使いやすくなったので紹介してみます。

Firefox 4 がサポート予定の calc() とは

Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。calc() 自体は CSS3 で策定中の機能としてかなり前から存在しますが、まだサポートしているブラウザがないので、馴染みはないかもしれません。Firefox にしてもまだサポート予定の段階ですし、正式に使えるようになるのは先の話ではありますが、calc() を使うことでどんなことができるようになるのか簡単に触れてみたいと思います。

CSS の情報サイト「CSS HappyLife ZERO」

CSS HappyLife の中の人が「CSS HappyLife ZERO」という新しい Web サイト始めたみたいです。

HTML5 でソースコード書いてみた

今のところすぐに HTML5 を使う理由もないので、実際に HTML5 でソースコードを書いてみるってことをしていなかったのですが、思い立って簡単に書いてみました。この Blog のトップページを HTML5 で再コーディングしたらどんな感じかなということで、今ある構成要素をほぼそのままに、HTML5 でサンプルを作ってみました。

Page Top

このブログの著者: 加藤善規 - 埼玉県出身男性。サッカー、フットサル（観戦 / プレー）、モータースポーツ観戦、インターネット、音楽鑑賞、筋トレ、腕時計収集が趣味。ウオッチコーディネーター（上級 CWC）資格認定者。好物はゼリー、グミ、お酒、ラーメン。

いいね！で最新情報を取得

このブログが気に入ったらいいね！してください。

Facebook で最新の記事をお届けします。

Information