サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
smartphone.vi-king.net
以前の記事でsafariによるユーザーエージェントの偽装でのスマートフォンサイト開発を紹介しました。 今回は前回にも少しだけ触れたiOSシミュレーターを紹介します。 Xcodeをダウンロード えっ?iOSシミュレーターをダウンロードするんじゃないの? と思われた方はご心配なく、Xcodeとはソフトウェアを開発するためのアップルの統合開発環境 (IDE) で、その中にiOSシミュレーターが入っている、というわけです。 なので残念ながらMAC専用です。 windows、LINUXの方ごめんなさい。 iOS SDK と iPhone シミュレーターのインストール ↑こちらのブログでダウンロード方法が分かりやすく解説されてます。 ちなみに現在の最新版のXcode4.3は有料なので、Xcode 3.2.6 and iOS SDK 4.3をダウンロードしましょう。 iOSシミュレーターはど
text-shadowプロパティ text-shadowプロパティで、テキストから影までの距離、ぼかしのサイズ、影の色を指定します。 指定の順番は、 text-shadow: [左右の距離] [上下の距離] [ぼかしのサイズ] [影の色] です。 前回のborder-radiusプロパティや他の多くのCSS3プロパティで指定の必要な、-webkit-、-moz-の指定は必要ありません。 こんな使い方も! text-shadowプロパティはカンマで区切れば複数の影を指定できます。 text-shadow: 1px 1px 1px #000,-1px -1px #fff; みたいな感じです。 これをうまく使えば、縁取りっぽいものをつけたり サンプル2 HTMLコード
.Border-radius{ padding: 10px; background-color: #ECECEC; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .Border-radius p:last-child { margin-bottom: 0; } border-radiusで「かどまる」 border-radiusプロパティで角の半径を指定します。 -webkit-border-radiusはSafari・Chrome、-moz-border-radiusはFirefoxのための指定です。 IEも9から対応しています。 ここではすべて10pxを指定しています。 おまけでlast-childセレクター last-childはCSS3のセレクターの1
iUIとは? iUIは、ページをiPhoneのUI(ユーザーインターフェース)のように表示させるJavaScriptで作られたライブラリです。 タグの組み合わせで、簡単にiPhoneのUIそっくりにページを表示することができます! まずはダウンロード 現在のバージョンは0.31です。 http://code.google.com/p/iui/ ↑こちらからダウンロードできます。 解凍したらiUIを使用するフォルダに入れてjsファイルとcssファイルをlinkタグで読み込むだけです。 ※環境によってパスは変えてください。 サンプルコード <html> <head> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <
iphoneアプリでスマホサイトをキャプチャー「Page Capture」 スマホサイト制作に役立つiphoneアプリを紹介していきます。 Page Capture 2.0(¥230) iPhone、iPod touch および iPad 互換 iOS 3.0 以降が必要 カテゴリ: 写真 価格: ¥230 更新: 2010/07/22 目的のページへ行きカメラボタンをタップします! カメラロールに保存かメール送信かを選びます! 試しにメールでEvernoteに送ってみると画像がちゃんと入ってます! こんな感じで通常のスクリーンショットでは撮れない一番下の部分まできちっと撮れてます!
みなさんはスマートフォンサイト制作の開発環境はどうされているでしょうか?Xcode付属のiphoneシュミレータ?実機?等々あると思います。今回は、一番お手軽にスマートフォンサイトのプレビューができるSafariの設定の方法を紹介しようと思います。 Safariの開発機能 Safariの開発機能をご存知でしょうか?Safariにはデフォルトで強力な開発機能が備わっています。今回使うのは、ユーザーエージェントの偽装です。Safriが「僕はiPhoneだよ!」と偽ってくれます。図はSafriでYahoo!のトップページを開いてる画像です。iPhoneの表示になってますよね? やり方 やり方はとっても簡単です。Safariを開きます。キーボードで「Command+,」を押すとSafariのPreference(設定画面)がひらきます。一番右の「Advanced(詳細)」をクリックします。「Sho
スマフォサイトへの第一歩 viewport viewportについて説明します。viewportを設定しないことにはスマフォサイトの制作が始まりません。 viewportって? viewportはウィンドウのサイズのようなものです。初期値はなんと横幅980pxに指定されています。スマートフォンの第一人者であるiPhoneの横幅は320pxですから約3倍の幅が指定されています。そのため図のように表示されてしまいます。なんとも文字が小さくて見にくいです。 viewportを指定してみる viewportで横幅を320pxに指定してみると図のようになります。文字の大きさはちょうどPCで見るのと同じぐらいの読みやすいサイズになりましたね! なぜviewportを指定するのか? 開発しやすいからです!開発はPCで行います。プレビューもPCで行います。PCでのフォントサイズの見栄えとスマフォでの見栄え
iphoneやandroidなどのスマートフォンでご自身のホームページを一度御覧ください。サイトが小さく表示されてしまい、拡大しないと見えにくく、文字なども読みにくくありませんか? スマートフォン用にサイトを作り替え、最適化する必要があります。このページをスマートフォンで御覧ください。スマートフォン用のサイトが表示されます! スマートフォンの出荷台数がパソコンの出荷台数を超えたという事実をご存知でしょうか?まさに今、スマートフォンでホームページを見る時代に突入しています。 いち早い対策が、必要です!さらに、2013年にはスマートフォンのユーザー数が携帯のユーザー数を超えると報告されています。携帯への対策だけでは十分な時代ではなくなってきています。
このページを最初にブックマークしてみませんか?
『スマートフォンサイト制作』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く