スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
グーグルのセミナー「楽しみながら収益アップ！AdSense Partner Day in 東京」に参加してアドセンスについて勉強してきましたよ。 ライブ最適化講座 まず最初に、ゲストのサイトに対してアドバイスを行うライブ最適化講座がありました。 一人目 ログハウス.com－ 建築とログハウスキット ビッグバナーとコンテンツのリンクの距離が近すぎる。誤クリックする可能性があるので離した方が良い。 ビッグバナーとリンクユニットの場所が近すぎて食い合っている。離した方が良い。 右サイドバーのスカイスクレーパーを無くして300×250に代えた方が良い。 情報をカテゴリ化してもう少し分かりやすくすると良い。 検索ボックスを設置する。 二人目 シェアーズカフェ・オンライン 右カラムの一番上に300×250を置きたい 特に日本では記事下が収益性が高いので、そこに300×250を2つ並べる。 ランキングの
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
Androidブラウザ決定戦。 - うぐ美だいありー
21:19 | 先日Xperia rayに機種変しました。で、今までNexusOneではずっとDolphin Browser miniに落ち着いていたのですが、こいつ、ほぼ唯一の欠点としてbackやexit時の挙動がアレ。ずっと我慢して使っていたのですが、この機会にブラウザアプリを再検討しよう！ということでひたすらブラウザアプリを試してみました。 今回試したのはこの子達です。1.Angel Browser2.Boat Browser Mini3.Dolphin Browser HD4.Dolphin Browser mini5.Firefox6.Maxthon Mobile Browser7.Miren Browser8.Natar Browser9.Netfront Life Browser10.Opera Mobile11.Skyfire12.Sleipnir13.Sxブラウザ14.U
2009/05/08【最終更新日】 アップデートではなく新規インストールからカスタマイズするから多分Opera10を入れるときに役立つ自分備忘録なメモ。 参考になるかといえば、ならない可能性の方が高い 俺イズムの継承者は現れず 過去にblog公開しているカスタマイズOperaの詰め合わせっちゃ詰め合わせ 書き出してみると、全然カスタマイズしてないことがわかった 普通のOperaと大差はないのでカスタマイズなんて大それたことは言わない いつかスナップショットをちりばめる予定 書きかけで疲れたので公開... フォントの設定 LinuxのOperaはフォントが糞なので修正 最新bulid（でもβ版）だと/usr/share/ini/font.iniファイルがなくなっててどこを変えていいのかわからん... WindowsはOpera-wikiに習ってMSフォント中心に置き換え Opera 9.50
ブルーです。 先日のWordBench Kobeの「レスポンシブデザインやるなら座談会」に出席しました。主に経験者がどんどん発言してレスポンシブデザインで困ったことやAndroidの不思議仕様、レスポンシブデザイン案件でのディレクションの進めかたやAndroidの不思議仕様、実機確認どうしてるの？という疑問、あとAndroidの不思議仕様などについて情報交換しました。マジviewportの指定通りに動かないとかヤメテ。 その中で、これからレスポンシブデザインを提案してみようと思っている方から、「レスポンシブならプラス○万円、UA切り替えなら○万円、みたいな相場観はありますか？」という質問が出たのですが、個人的にはこういうオプション的な考え方では無理だと思います。 理由のひとつは、もしオプションとして提示してしまうと、「予算の関係で不必要って言ったけど、やっぱりスマートフォン必須ということに
スマホ用サイトをパソコンで見たい時ってありますよね。お小遣いサイトでもスマホ専用のコンテンツがあったりしますが、ネットを主にパソコンで見てる方からしたら、できることなら全部パソコンで済ませたいと思いますよね。 そんな方への覚えておくと便利な、PCからスマホサイトを見る簡単な方法をご紹介します。 PCからスマホサイトを見る方法は色々あるのですが、１番簡単な方法はUA（ユーザーエージェント）を偽装してサイトにアクセスするという方法です。 PCで使っているブラウザから、スマートフォンのUAに切り替える事で、「これはスマホからのアクセスです」と偽り、スマホサイトを表示させる事ができます。IPアドレスでアクセスを判別しているサイトを除き、だいたいのサイトはこの方法で見ることができます。 PCからスマホサイトを見る方法 目次 Google Chromeからスマホサイトを見る方法 Safariからスマホ
バックアップがてらに晒してみる。重いのでだいぶ削除した。ので今のところこんな感じ。 Adaptive Referer Remover 0.2.3 特定のURLでリファラを切る。URLは正規表現で指定可能。開発中のサイトとか、プライベートなページとかに。 All-in-One Gestures 0.17.4 マウスジェスチャ All-In-One Sidebar 0.6.4 いろいろサイドバーに表示させる Autohide 1.1.2 全画面表示を便利に CoLT 2.2.1 リンクされているテキストをコピーなど Copy URL + 1.3.2 表示中のページのタイトルとURLをコピー CuteMenus - Crystal SVG 1.5 [disabled] メニューにアイコンを表示。なんかいかれたので無効中 FireBug 0.4 デバッグのお供 FlashGot 0.5.96.06
スマートフォン用ページの制作工程として ・まず「PC上でコーディング」してから ・表示を「実機スマートフォン」で確認する という流れがあります。 制作途中でちょっと表示を確かめたい・調整したいときなど、PCと実機スマホを何度も往復していては時間がかかってしまいます。 作業中はPCブラウザの幅を縮めたり、何かしらのツールを使って、PC上でスマホ画面に近い環境を作って表示をチェックしているのではないでしょうか。 今回はPCブラウザでお手軽にスマホページを表示する方法を紹介します。 主要ブラウザをリストアップしました。 Firefox Google Chrome Safari Internet Explorer Opera それぞれ自分の使いやすいブラウザや開発ツールがあると思いますので 各ブラウザでの方法をまとめます。 【UA（ユーザーエージェント）の変更】 【ブラウザ幅・サイズの変更】 この
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
FirefoxでUser-Agentを変えるとき必須の拡張 - なんたらノート第三期ベータ
FirefoxにはUser-Agentを切り替える拡張がいっぱいありますね。本体の開発ツールに「レスポンシブビュー」なんてあるので、あとは拡張でUA切り替えを使えば、かなりいい線でスマートフォンの真似ができそうです。 でも... けっこう多くのUA切り替え拡張で、サーバに送信するときのUAは変更できても、いざJavaScriptでnavigator.userAgentを取ると、まだFirefoxのまんまだったりします。 そこでこの拡張もいっしょに! User-Agent JS Fixer https://addons.mozilla.org/ja/firefox/addon/user-agent-js-fixer/ サーバに送信したUAの値を取り、レスポンスを受けたとき、それをそのまま、navigator.userAgentにセットしてくれます。で、JavaScriptから見てもUAがちゃ
Mozilla Re-Mix: ユーザーエージェントをランダムに切り替えることができるFirefoxアドオン「Random Agent Spoofer」
一般的なブラウザでサイトにアクセスする際、リクエスト要求と同時に「User-Agent」を送信するようになっています。 サーバー側はこれを受けてブラウザやOSの種類を判断できるようになっており、このような方法をとることで特定のブラウザに特化したページを表示したり、モバイル用のページを表示することができるわけです。 このような情報は基本的にブラウザの種類、OSの種類、各バージョンなどで構成されており、個人情報などを特定できる類のものではありません。 このUA情報は、Firefoxならアドオンで簡単に偽装することもできますし、safariなどにもユーザーエージェントを変更する機能がデフォルトで用意されており、変更するのはそう難しいことではありません。 もし、あなたがこうした情報を取得されるのが嫌だったり、何らかの理由であるブラウザに特化されたページを他のブラウザから閲覧したいというのなら、こう
2012/11/27更新 モバゲーはその名称のとおり、基本的には携帯電話を中心にサービスが提供されています。 Yahoo!と連携した「Yahoo!モバゲー」というのも登場しましたが、携帯用のものとは別のサービスという扱いのようで、携帯向けのものは原則として携帯からしか遊べません。 モバマスについても、通常はパソコンから遊ぶことはできません。 モバマスのURLにスマホからアクセスした場合は遊べるのに、同じURLにパソコンからアクセスした場合はYahoo!モバゲーに飛ばされてしまいます。 これは、ユーザーがアクセスしているのがPCからなのかスマホからなのかを、ユーザーが使っているブラウザの「ユーザーエージェント」（UA）を用いて判別しているためです。 しかしこのユーザーエージェントは他のブラウザからアクセスしているように見せかける（「偽装」あるいは「詐称」または「切り替え」と呼ばれます）ことが
スマートフォン用ページの制作工程として ・まず「PC上でコーディング」してから ・表示を「実機スマートフォン」で確認する という流れがあります。 制作途中でちょっと表示を確かめたい・調整したいときなど、PCと実機スマホを何度も往復していては時間がかかってしまいます。 作業中はPCブラウザの幅を縮めたり、何かしらのツールを使って、PC上でスマホ画面に近い環境を作って表示をチェックしているのではないでしょうか。 今回はPCブラウザでお手軽にスマホページを表示する方法を紹介します。 主要ブラウザをリストアップしました。 Firefox Google Chrome Safari Internet Explorer Opera それぞれ自分の使いやすいブラウザや開発ツールがあると思いますので 各ブラウザでの方法をまとめます。 【UA（ユーザーエージェント）の変更】 【ブラウザ幅・サイズの変更
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォンサイト制作時に覚えておきたいCSS 15
AdSense収益アップの秘訣をグーグル日本法人で聞いてきたよ
俺々Operaのカスタマイズメモ - MOMIZINE
レスポンシブウェブデザインの相場観とは
【UA】PCからスマホサイトを見る１番簡単な方法【偽装】 | ネオニートになりたい
使っているFirefoxの拡張を晒してみる - spiritlooseのはてなダイアリー
PCブラウザでスマホチェック ｜ Tips Note by TAM
スマートフォンサイト制作時に覚えておきたいCSS 15
ニコ典 － PCからアイドルマスターシンデレラガールズ(モバマス/モゲマス)をプレイする方法
TAM テクニカルチーム | PCブラウザでスマホチェック | Tips Note