クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
スマートフォンサイトをデザインする7つのポイント (1/3)
Webサイトをデザインするときは、単なる見た目の美しさだけでなく、情報の見やすさや使いやすさなどの「ユーザビリティ」や、高齢者や障がい者の方も快適に使える「アクセシビリティ」に留意する必要があります。さらに、スマートフォンサイトのデザインでは携帯電話端末ならではの特性も考慮しなければなりません。 デザインに必要な環境を整える WebサイトのデザインではいきなりHTMLを書くのではなく、まずPhotoshopやFireworksなどの画像作成ソフトを使って「デザインカンプ」を作成し、画像パーツを切り出してHTML化していくのが一般的です。こうした流れはスマートフォンサイトの場合でも変わりません。 ブラウザー枠を用意しよう PCサイトを制作するときには、デザインカンプを実際のサイトのイメージに近づけるため、Webブラウザーの枠を含む状態でデザインすることがよくあります。そこで、スマートフォンサ
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
最近のブラウザはDoctypeスイッチによって、後方互換モードと標準モードに切り替わります。…
最近のブラウザはDoctypeスイッチによって、後方互換モードと標準モードに切り替わります。 このモードを、IEで調べる方法を教えて下さい。 webページを開いている時、今どのモードで表示しているかを表示する方法はFirefoxでは簡単で、ページのどこかを右クリック→ページの情報を表示で確認できます。(画像参照) FirefoxとIEでは、同じページを開いてもモードが異なる場合があり、IEでもこれを確認したいと思っています。 アドオンなどの拡張を追加する方法でも構いません。 IEでDoctypeスイッチによるモードを確認する方法をお願いします。
携帯サイト作成のときに必要な基本的な情報
このカテゴリでは、iPhone、Androidスマートフォン向けのサイト制作に関する情報を掲載しています。 また、昔の携帯電話（ガラケー）向けの情報も残しています。 スマートフォン iPhoneをiOS17にアップデートしたらサイトのフォント（文字）の表示が太くなった Androidで明朝体が表示されるようになった レスポンシブデザインの仕組みと作り方、メディアクエリの書き方 スマホの画面サイズに合わせて画像・写真を縮小・拡大表示するレスポンシブデザイン スマホで画像を表示するとボヤける。srcsetを使ってパソコンとスマホの両方でロゴ画像などを綺麗に表示する。 JavaScript でスマホの位置情報（GPS）、緯度・経度を取得する JavaScript でスマホの加速度センサーやジャイロによる加速度、向き、傾きの値を取得する Googleのモバイルフレンドリーテスト、サイトのスマホ対応
なぜFlashは検索エンジンにひっかかりにくいのか？-SEO対策-
「Flashは検索エンジンに引っかからないという思い込み」にも書いたように、一部の検索エンジンでは「FlashのSWFファイルが直接検索結果に含まれる」ことがわかりました。 ですが、多くの人は検索エンジンでSWFファイルが検索できることさえ知りませんでした。 では、なぜFlashのSWFファイルは検索エンジンにひっかかりにくいのでしょうか？ 今回は、検索エンジンのアルゴリズムを追いながら、それを元にFlashのSWFファイルが検索に引っかかりにくい理由を考えてみたいと思います。 ＊この記事に書かれていることは、ほとんどが管理人の想像により成り立っています。あまり信頼しすぎないでください。 1.検索エンジンのアルゴリズムについて よく「SEO対策」という言葉を目にします。 日本語でいうところの「検索エンジン最適化」を意味する対策です。 つまり、Googleなどの検索エンジンで検索結果が上位に
無料で設置「ホバーウィンドウ」または「ドロップインウィンドウ」
大きな栗の木の下で ■当ブログ投稿内容の当事者や関係者の方で、コメントの削除や記事訂正を希望される方は、該当ページのコメント欄よりお申し付けください。可能な限り対応させて頂きます。 「ホバーウィンドウ」または「ドロップインウィンドウ」と言われるツール。 あるサイトでは有料設置で数千円から数万円をとっている。 しかし海外のサイトでは無料配布中。 ということでタダで「ホバーウィンドウ」「ドロップインウィンドウ」を設置する方法を記事にすることにした。 http://www.uriagejouzu.co.jp/hover.htmlこんな感じのもの。 デザインはhtmlを少しいじればいい。 あきばれネット代表の吉本俊宏氏によれば「普通のメルマガ登録フォーム等の５倍は反応が高く･･･」とある。 ■方法■ １．次のソースを「ホバーウィンドウ」「ドロップインウィンドウ」を設置したいページの<HEAD></
cyano: Google Analyticsで高度なトラッキングをする方法
ユーザーがページをロード開始してから閲覧できるようになるまでのロード時間はユーザーが自分のページを快適に閲覧できているかどうかを示す重要なファクターです。Google Analyticsのイベントという機能を使用することで、ユーザーの実際の体感速度を可視化することができます。 たとえば、このブログのある期間における体感速度のグラフはGoogle Analytics上で以下のように出ています。 44.84%のユーザーは100〜499msでロードできており、1秒未満でロード完了しているユーザーは合わせて73.49%であるとわかります。また、3秒以上かかっているユーザーも7.42%居ることも分かります。3秒以上ロードにかかるようだと離脱率も高くなるので、7.42%のユーザーに対して何かの施策が必要であるということも分かります。 このように、ユーザーが実際感じている体感速度を可視化することで、この
視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007
視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007 [English] ■ 調査の概要 背景と目的 前回（2002年）の調査より5年が経ち，視覚障害者のICT（情報通信技術）利用状況にも様々な変化が生じています。とりわけ，インターネットの利用が一般的になったことと，視覚障害者にも使いやすい携帯電話が普及したことが挙げられます。そこで最新の利用状況を捉えるため，2007年5月から6月にかけて，視覚障害者のパソコン・インターネット・携帯電話の利用状況を調査しました。 調査結果をWebサイトなどで公表することで，視覚障害者支援技術のニーズを研究者・開発者らに伝え，最終的に視覚障害者の福祉に役立たせます。 方法 調査票への任意回答方式で調べました。回答者の募集方法は，視覚障害関連メーリングリストへの案内，視覚障害者用施設への調査票（点字版・拡大印刷版）の配備，視覚障害者向け新聞・放
ポータルメニューとウィンドウコントロール
・初期費用が高くて手が出せない ・ホームページの運用方法がわからない ・競合弁護士との差別化のやり方がわからない ・手間なく管理できるホームページが欲しい 「弁護士集客サポーター」はこのようなお悩みをお持ちの弁護士や法律事務所のために作成したサービスです。 サブスクサービス 弊社が運営しているホームページをご利用いただけます。 ・初期費用無料 ・契約期間の縛り無し ・最長3カ月間無料 でご利用いただいた上で、集客の効果を実感いただけましたら月額2.2万円でサブスク開始となります。 運営・集客サポート ホームページの運営やWEB集客でわからないことは何でも相談いただけます。 ご利用いただいているホームページのみならず、他社ポータルサイトやGoogle広告などの相談にも対応しています。 ご利用者様が「WEB集客で勝つ」ためにできるサポートならリソースが許す限り対応いたします。
Photoshop で背景透過の美しい favicon を作成する - 2xup
2006-04-28T23:23:04+09:00 favicon (ファビコン)はウェブブラウザのアドレスバーや、ブックマークした URL の横に表示される小さなアイコンです。いまやもうサイトのアイデンティティを明示するツールとしてほとんどサイトでみることができますが、小さいファイルであると共に、ファイルを扱えるソフトェアがそれほど多くは無いため、なかなか想い通りにデザインできない。という悩みを持っていました。できれば背景を透過にして、マットの少ない美しいものを作りたいと考えていて、使い慣れたソフトウェアである Adobe Photoshop で作れれば幸せだなあ。と思ってました。 これまでは、FavIcon from Pics という Web 上のツールを利用して作っていましたが、これは背景を透過にできなかったり、元の画像から変換される際に大きく画像の質が落ちてしまうという欠点がありま
Nifty Corners
Nifty Corners: rounded corners without images By Alessandro Fulciniti Update This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. You can read it here. The final version is Niftycube. Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of
br 要素問題は CSS2.1 で解決か!?
br 要素（カナかな団首領さん） 改行（カナかな団首領さん） そもそも br 要素は使ってはイケナイの？ なんで仕様書に載ってるの？ 仕様書に、なるべく使うなとか書いて有るの？ HTML4.01 の仕様書には書いてないみたいだけど、XHTML1.0 では、使うの推奨されてないの？ XHTML2 の草案が br 要素退治のアイデアをいろいろ試していたので、一時期、W3C 的に br 要素は廃止したいのかもね、という雰囲気はありました。最近はどーなってるのか知りませんが。 私は p 要素のスタイルとして1行目の1字下げを指定しているので、p 要素中の改行をしないと自分で決めているようなもの（改行すると見た目に難が出る）。引用するときも、勝手に改行を捨ててます。ただ、これは私の好みの問題で、br 要素自体に反対ということではありません。 仕様から br 要素がなくなったら、ガッカリする人の方が多
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Code Archive - Long-term storage for Google Code Project Hosting.
http://pekestyle.net/2007/05/post_11.html