-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？
WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？ 2013年3月23日 Webサイト制作, Wordpress, スマートフォン 以前「WebサイトをiPhoneで見やすくする5つの方法」という記事でWebサイトをスマートフォンに対応させる方法を紹介しました。当時はそこで紹介しているMobifyというサービスでスマートフォンに対応させていたのですが、JavaScriptが使えないので、リデザインを期に別の方法でスマートフォンに対応させる事にしました。タイトルにあるとおり、WordPressのテーマを変更する方法とCSS Media Queriesを使った方法の２通りを試したので、その比較についても書いてみようと思います。 ↑私が10年以上利用している会計ソフト！ 最初に試した方法はCSSのMedia Queries（メディア クエ
はじめてスマートフォンサイトを作る人へ。制作で気をつけたいポイント５つ
スマートフォンの普及に伴い、スマートフォンサイト制作案件が増えてきている方も多いと思います。かくいう私もその一人です。 最近は一人でカバーしきれない程のご依頼をいただくようになり、新たに担当者を増やすことにもなりました。 普段私が気をつけている点、どういったことを考えてスマートフォンサイトを制作しているかを伝えることになったので、ついでに記事にしてしまいたいと思います。 私がスマートフォンサイトを制作するときのポイントは、以下のとおりです。 1.そのサイトはいつ・誰が・どんな時見るのか2.実際のサイズ感を考えて、使いやすさを確かめる3.死角と押しやすい位置を意識する4.CSS3で実現可能なデザインを5.ユーザは本当にスマホサイトを求めているのかそれでは、詳しくお話していきたいと思います。 こんなの当たり前だよ！ということばかりかもしれません。 案件やサイトのジャンルによっては当てはまらない
PCサイトスマホ変換「shutto（シュット）」サービス終了
shutto（シュット）サービス終了 PCサイトのスマホ変換サービス「shutto（シュット）」は、2024年3月31日をもってサービスを終了しました。 今まで多くのお客様にご愛顧いただきましたこと、スタッフ一同深くお礼申し上げます。 ※Webサイト多言語化ツール「shutto翻訳」は「shutto」とは別サービスとなります。 「shutto」はサービス終了となりますが、「shutto翻訳」には影響ございません。 「shutto翻訳」はこちら shutto終了後のスマートフォン変換にお困りの方 株式会社アイスリーデザイン様が提供している「flamingo」サービスでスマートフォン変換が可能です。 詳細は株式会社アイスリーデザイン様にご確認ください。 ■「flamingo」に関してのお問い合わせ先 株式会社アイスリーデザイン 営業本部： 担当 原島(はらしま)/野林（のばやし） お電話でのお
スマフォのフリックにも対応しているカルーセルを実装できるJSライブラリ・inflickity
フリックに対応したカルーセルを 実装するライブラリ・inflickity です。動きもかなり軽快ですので、 使いどころも多々ありそうです。 よくあるUIキットにも似たような ものが含まれてますけど、こうして 単体で使えるのも欲しいところです。 永久にフリックできるカルーセル、みたいなのを作れるライブラリです。 PCではドラッグで操作できます。 スマフォはフリックで動かせます。と言ってもiPhoneでしかテストしてませんが。 Sample以下サンプル。スマフォはQRからどうぞ。 Sample 斜めのと混同してて操作はしにくくなっていますがその点はご了承下さい。 コード<script src="inflickity.js"></script> <script> var init = function() { var slider1 = document.getElementById('slid
スマートフォンに最適化された管理画面を表示するWordPress Mobile Admin
WordPress Mobile Adminとは？ iphoneやAndroid等のスマートフォンに最適化されたWordPress管理画面を表示するための、プラグイン。尚、スマートフォンからの記事投稿に特化したものとなっており、余計な機能は表示されないようにも最適化されています。画像付きの記事も投稿できるようです。 インストール方法 【ステップ１】 プラグインをダウンロードします。 http://wordpress.org/extend/plugins/wordpress-mobile-admin/ 【ステップ2】 ＦＴＰソフト等で、wp-content > plugin にダウンロードしたファイルを解凍し、フォルダごとアップロードします。 【ステップ3】 WordPressの管理画面にログインし、プラグインページから、WordPressMobileAdminを有効化します
少しのコードで実装可能な15のスマートフォンサイト用小技集
少しのコードで実装可能な15のスマートフォンサイト用小技集スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ スマートフォンサイト用小技集 目次いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントを iPhone などに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる文字サイズの自動調整をオフリストのクリック（タップ）範囲を広げる画面の幅にあわせて CSS を変えるリンクテキストのある Div 全体をクリック（タップ
testmobileview.com
testmobileview.com This domain is expired. The domain owner has to renew it from the admin setting if you continue using it. 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owne
iPhone等での表示をPCで確認出来るAir製のシミュレーター・Mobilizerがローカルファイルにも対応出来るし、割と良かった
iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。 シミュレーター（エミュレーター？よくわからｎ）はいくつかありますが、選択肢の一つとして。WinでもMacでもOKです。完璧ではないですけど、今までで一番良かった気がしました。もともと優れたシミュレーターはまだ無い気がしますしね・・・あるのかな？ｗ 動画あったので貼っておきました。iPhone4は勿論、Plam PreやBlackBerry、HTCなど4種のデバイスを同時に確認出来ます。ローカル上のHTMLも動作確認出来ますよ。Airアプリなので動作にはAdobeAirが必要です。 4つ同時に起動可能 日本なら、基本的にiPhoneとAndroidだけあれば
WordPressプラグイン『WPtouch』を改造して、ブログを見やすくしてみよう！ | NANOKAMO BLOG
はい、してみました！ というわけでどこを改造したのかと、参考にさせていただいた記事を紹介しようと思います。 改造後のNANOKAMO BLOG ホームに並んでる記事、1つ1つがこんな感じで表示されてます。 イイ感じでしょ！（どやぁ） 比較のために改造前のを撮っとけば良かったんですが、いじくるのに夢中で忘れてました。すいません。 なので一応どこを変えたかってのをマークしてみました。 細かいとこはもっとあるんですが、そこらへんは後で紹介する記事を参考にして真似するなり自分なりにいじるなりコロ助なり。 ①カレンダーアイコンを消す あんまかっこ良くないんで消しましょう。 参考にしたのはこちらの記事。 私がWPtouchのトップページ画面をカスタマイズするために行った5つのこと WordPressのテーマにこだわっている人はたくさんいらっしゃいますが、スマートフォン用のテーマにも少
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
jQueryMobileでリアルタイムなフォームバリデーションを使う
jQueryMobileでのフォームバリデー ションに関して調べ物をしたのでメモ。 実装した事が無かったのですが、も しかしたら近いうちに使うかもなので 動作テストしてみました。バリデーシ ョンには他プラグインを使います。 結論から言えば非モバイルサイトのバリデーションの方法となんら変わりませんでした。一安心、みたいな記事なのでなんだかすみません。 コード<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>当たり前ですけど、まずは本体とJQMを読み込む。 バリデーションはjQuery Validationです。日本語ローカライズはg
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ
以前ご紹介した、スマートフォン向けの JavaScriptフレームワーク、Wink Toolkit がバージョンアップしたんだぜ、と開発者 さんからわざわざお問い合わせ頂いたの でご紹介。以前もかなり豊富なUIでとても 有意義なフレームワークだと感じましたが、 今回はUI面が特にパワーアップ。 Wink Toolkitがバージョン1.3になって機能もいくつか追加されました。3ヶ月間、UIの改善にかなり力を入れてくれたようで、スマフォにかなり合わせてくれましたよ。 jQuery Mobileライクなインターフェースになりました。もともとUIエフェクトの評価は高かったWink Toolkitですが、全体的なデザインが見直されてかなり垢抜けた感じです。 尚、以前の機能やUIは過去記事をご参照下さい。 Wink Toolkitが割と良かったので日本語サンプル作った Demo 前回はほぼ全てのデモを
【インフォシーク】Infoseek ： 楽天が運営するポータルサイト
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作の知識が無くても、素敵なデザインのスマートフォン向けサイトを無料で簡単に作成出来るWebサービス・WixMobile - かちびと.net
スマートフォンサイトを10分で作成
jQuery Mobile 1.1.0 日本語リファレンス
screamo.jp
