HTML/CSS Category Archive

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

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

いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。

改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイズを削減できますので gzip 使うのとあわせて改行削除もやったらいいと思いますけども。Sass とか使ってるなら CSS の改行やスペース削除なんかは簡単だしね。

Posted by:

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

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

Posted by:

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

Source Code ProPublickey さん経由で知ったんですが、Adobe さんがソースコードを見やすく表示するためのフォントとして、その名も 「Source Code Pro」 というフォントを発表したとのこと。

そこで、早速ですがこの Blog でも使ってみました。Google Web Fonts 等でも使用できるようになっていますので、試すのは簡単です。

実際にこの記事のソースコード部分も 「Source Code Pro」 で表示されていると思いますので確認してみてください。確かに見やすいかも。

Posted by:

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

iPhone 5iOS 6 がリリースされましたがアップデートされましたか?私はマップアプリをよく使うのですが、早速アップデートした方々の、マップがぁぁという叫びにびびってまだアップデートできておりません…

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

Posted by:

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

すべての人に知っておいてほしい スマートフォンサイトデザインの基本原則えっと、久しぶりに Blog 書いたと思ったら宣伝で恐縮ですが…MdN さんより 8月27日に発売される書籍 「すべての人に知っておいてほしい スマートフォンサイトデザインの基本原則」 に寄稿しました。リンク先の Amazon さんでは予約受付中です。

過去に出版されている、同シリーズの書籍、「すべての人に知っておいてほしい Webデザインの基本原則」 でも書かせて頂きました (参考エントリ) が、今度のはスマートフォンサイトやアプリケーションを作成する際に役に立つ内容の書籍になっています。

Posted by:

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

HTML5昨日 (6月6日) に Firefox の最新版であるバージョン 13 が正式リリースされました。

この Firefox 13 で実装された新機能や変更点に関しては下記の記事で紹介されていますが、

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

Posted by:

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

WebKit Nightly BuildsWebKit Nightly Buildsが iframe 要素に追加された seamless 属性に対応したとのことなので、早速どんな感じになるのか確認してみました。

現在公開されている WebKit Nightly Builds の最新版、及び Google Chrome も、開発者向けビルド (Dev channel) の最新版 「21.0.1155.2」 で動作しているのが確認できました。インストール済みの方は下記にデモページを置いておきましたので確認できるかと思います。

Posted by:

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

iOS Safari去年の話ですが、「HTML5 + CSS でコバトン描いてみた」 っていうお遊びを紹介するエントリを書いたんですが、その後 iPhone / iPad で確認してみたらコバトンさんのお顔が四角い顔になっていて、あぁ。iOS の Safari では border-radius プロパティに 「%」 値が使えないんですねっていうエントリを追加で書きました。

で、そのまま放置してたんですけど、昨日、ちょっと用事があって 「%」 値の指定を試したら普通に使えるようになってましたってことで、フォロー記事として書いておきます。

Posted by:

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

フォームの入力コントロール (input とか textarea) に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用する (プレースホルダ) なんてことはよくやります。

プレースホルダ

HTML5 では、プレースホルダを指定する属性として、まさにそのままの名前が付いた、placeholder 属性が新たに追加され、ブラウザさえ対応していればとても簡単に実現可能になっていますが、今のところ IE が対応していないのが悲しいところ…

Posted by: