CSSに関するネタを中心に色々書いてます。
先日、こそこそと作ってたAndroid向けの電卓アプリ「LateCalc」をリリースしました。ボクは企画設計、デザイン辺りを担当してます。
なんで、電卓！？とか色々有りますが、まだ実装したい機能とかが全然実装出来てないので、その辺の紹介はある程度機能が実装された頃に書きたいと思ってます。はい。
さて、今回は久々にCSS関連なエントリーです。
ここ数年、レスポンシブ対応な案件が増えていると思われますが、実際にコーディングしていると色々有りますよね...
そんな中でも、画像周りは何かと厄介だったりすると思うので、今回は、PCで見た時とスマホとか（640px以下）で見た時に、違う画像を使いたい場合に使えそうなTipsです。
レスポンシブなんだからPCとスマホで違う画像を使うとかしないで、おとなしく縮小しただけの画像を使った方が良いと思いますが、スマホで見ると画像のテキストが潰れちゃうとか、お客さんの要望とかデザイナーの拘りとか色んな要素が絡むので、中々そうもいきませんね。
Numb.の吉澤さんと、WWW WATCHの加藤さんが書いた「スマートフォンサイトUI/UXデザイン実践テクニック ~理想的なユーザーエクスペリエンス実現のために~」を献本して頂きました。
ありがとうございます！
普段、あまり書籍を読まないのですが、せっかく献本していただいたので時間が空いた時に読んでみました。
じっくり読み込んでは居ませんが、ひと通り読んだ感想なんぞを書いてみようかと。
結構前に、ここの名刺印刷が良かった！的な記事を書いたんですけど、結構な方に紹介者コードを利用して登録してもらったようで嬉しい限り！
名刺印刷をどこに頼むかお悩みの方はぜひ！
さて、適切なタイトルが浮かばなくて何だかよく分からない感じのタイトルですが、iPhoneやiPod TouchのMobile Safariですが、通常a要素を display: block; な感じにしてタップできる範囲を広げた場合、その部分全体がハイライト表示されるかと思います。
その辺りに関してちょこちょこと。
前回の更新日が見たくない程に時が流れている今日この頃・・・。
ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。
こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。
なので、これからはちょろっとでもネタが有れば更新していきたいなーと。
何をモチベーションに更新するかはまだ見つかってないけど＞＜
さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。
WebKit系のブラウザならそのまま確認できます。その際、ウィンドウサイズを変更して横幅を小さくするとポートレート用の表示になります。
スマートフォンから見たい場合は、
http://bit.ly/new_sp_v1
からでも見れます。
ついでにQRも用意しました。
ちょうどCSS Nite LP16 も有りますし。LP聞いて、テンションが上がったところでコレを使ってもらおうと言う算段ですね。分かります。
では、中身のご説明などを続きにて。
昨年後半辺りから、iPhoneやAndroidなどのスマートフォン案件を実際にやる機会が増えて、今年はもっともっと増えるんだろうなぁと思う今日この頃。
なので今回は、スマートフォン向けサイトのフォームを作成する時に使うかも知れないラジオボタンにフォーカスした記事なんぞを。
2008年7月11日にiPhone 3Gが発売されて以降、新しい形のWebブラウジングを楽しまれている方も多いことでしょう。
ボクはそんな世の中を横目で眺めながら過ごし、つい先日まではiPhoneやiPod Touchはほぼ触ったことが無い状態でした。
そんなボクも、お仕事でiPhoneやスマートフォンに対応したサイトをコーディングする必要があり、iPod Touchを借りたのを切っ掛けに、今後もお仕事で使うだろうという名目で、新しい iPod Touch を購入してしまいました！
で、手に入れたからには仕事以外でも何か作りたいって事で、24日に届いたばかりでMobile Safariがよく分かってないのにMT用のテンプレート作ってみました。
それと同時に、MT5用のテーマとしても配布しております。
このテーマ、だいぶ成長しました。スキンも結構有るんですよ、奥さん！
テーマの場合は、既存のブログに追加する形は中々難しいですが、これからブログを始める人や今のブログのデザインを無理に使う必要がない方などに最適でございます。
テーマだと面倒な設定が無く、アップロードして適用後に全再構築するだけでOKなのでとても簡単です。
こっちのテンプレートには無い機能として、簡易的な設定も行えたりします。
で、このテンプレートだかテーマを適用すると、次のような感じになります。
Retinaディスプレイ対応と言ってるくらいなので、iPhone 4辺りが一番キレイに見れるかと思います。
PCの場合はWebKit系ブラウザで見てやってください。ウィンドウサイズ変更すれば、480pxから320px用に変わります。
では、このテーマ・テンプレートの特徴や導入方法などを続きにて。
当ブログをスマートフォン対応したいなーと思ってはいたけど、iPhone持ってないしXperiaの需要はどうなんだろうとか考えたり言い訳しつつずっと放置してましたが、今回 iPod Touch （先代の）を借りたので、勉強がてらiPhone対応と言うかスマートフォン対応してみました。
何かを実験するには自分のサイトが一番手っ取り早くて良いですね。
サイト持ってない方は、ホント何でもいいので、何かしら作ったほうがいいかなーと思います。
ドメイン取得して、サーバレンタルして、構成練って、デザイン・コーディングして、FTPクライアントでファイルアップしてみたり、MTやWPインストールしていじったり、CSS3の実験したり色々使えて便利ですし、カッチリ作れば実績にもなりますしね。
と、それは良いとして、スマートフォン対応したんです。えぇ。
URLのオシリに、i/ を付けていただく感じです。
Xperiaを買おうかどーしようか結構悩んでいたのですが、途中から物欲に負けて発売日に買ってしまったhirasawaです。
今まで、スマートフォンやiPhoneを使った事が無いので、Xperiaでスマートフォンデビューした人の一人です。
とは言え、Androidケータイ自体はHT-03Aをちょっとだけいじってたりしたので特に戸惑う事無く使い始める事が出来ました。
今回購入した動機は、Androidケータイに元々興味が有りましたし、iPhoneもいらない！とか思いつつも内心欲しかったりしたのも有りますね。
べ、べべべ別に、ソニエリを待ってたわけじゃ無いんだからっ！！ ＞＜
・・・はい。
えっと、個人的に「docomoでソニエリのAndroidケータイ」が欲しかったので、不満が有っても有る程度は飲み込むことができますが、メーカーとかキャリアに関係なく「Androidケータイ」が欲しいのなら、現状ソフトバンクの「HTC Desire」を選ぶのが正解だと思います。えぇ。
こういうおもちゃを手にしたら時間が許す限りいじってしまうんだろうなぁ・・・と思ってはいましたが案の定と言いますか、ひたすら色々いじったり調べたり、アプリ入れまくってました。
そんな訳で、ボクと同じようにスマートフォンがXperiaでデビューして模索している人とかのお役に立てたらという気持ちを込めて、この二日足らずで入れたアプリや現在のホーム画面をご紹介です。
紹介と言いつつも一つ一つは簡単な説明程度しか書いてないで詳しくはリンク先もしくは、ご自身で調べてください。
何気に、このエントリーの真の目的は、半年後や一年後にどう変化しているかを自分が見たいので書いていると言う（笑
モバイルも検索エンジンの登場で一気に市場が拡大してるので、今後モバイルもCSSである程度見た目を制御する時代も近い内に来るのかなーと思う昨今。
現状で少なくともSofｔBankのケータイ（911SH）はCSSをかなり読み込むようです。
全て検証していないので定かではありませんが、他キャリアも対応してくる日は確実でしょう。
そんな訳で今回は、モバイルの文字コードについて扱っているサイトが御座いましたので、ボクも協力してみようと思います。
中々レトロなケータイですから、正常に表示されない文字コードがある事は分かっていたけど、EUC-JPが正常に表示されるのはビックリしました。
Shift JIS以外全滅だろうと予想していたので。
この人↓も仰ってますが、DoCoMoの一部古いケータイはUTF-8には対応してない模様です。
SEOについての覚書