「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた -1.メニュー編-（※iPhone寄り） - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） 今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん！！」って方も多いのではないでしょうか？ ということで、記事でも書いてみっかぁ！と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です(￣▽￣;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhon
jqPlot - Pure Javascript Plotting
jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features: Numerous chart style options. Date axes with customizable formatting. Up to 9 Y axes. Rotated axis text. Automatic trend line computation. Tooltips and data point highlighting. Sensible defaults for ease of use.
Marketcircle iPhoney
Looking for a way to see how your web creations will look on iPhone? Look no further. iPhoney gives you a pixel-accurate web browsing environment—powered by Safari—that you can use when developing web sites for iPhone. It's the perfect 320 by 480-pixel canvas for your iPhone development. And it's free. iPhoney is not an iPhone simulator but instead is designed for web developers who want to create
スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope
【スマホ対応サイト制作のより詳しい記事はこちら】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか？ ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait（縦）表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 （まぁ、拡大とは意味が違うので当然なのですが。。。） 具体的にどうい
jQueryMobileを使ってのスマートフォンサイトの構築メモ at HouseTect, JavaScriptな情報をあなたに
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
AwesomeChartJS
Easy to use Just create a new AwesomeChart object and pass the canvas element's id as a parameter to the constructor. Then set the chart's data and call the object's draw() method. That's it! Your chart is ready! Fully customizable Control how your chart looks by defining: Font styles Fill and stroke styles for bars and pies Margin sizes
ウノウラボ by Zynga Japan: iPhone向けのサイトを作るときのちょっとした気配り
yamaokaです。 だいぶiPhoneやAndroidといったスマートフォン向けのwebページを作ることが増えてきたのではないでしょうか。ちょっとした気配りで使いやすくなるケースもあるかなと思うので、いくつか使えそうな工夫について書いてみたいと思います。 ただし、今回はiPhone向けです。 タップされた場所をハイライトする iPhoneのSafariでは「-webkit-tap-highlight-color」という拡張された属性があり、タップされた箇所に色を付けることができます。CSS3ではRGBaによる色指定ができるので、半透明の色を指定すればタップされた箇所をわかりやすく示すことができます。例えば、-webkit-tap-highlight-color:rgba(255,0,0,0.40);と指定すると薄い赤色を付けることができます。「outline:none;」と併せてリンク文
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
クロスプラットフォーム＆クロスデバイス対応「jQuery Mobile」、2010年中に登場予定
JavaScriptで開発されたAjaxライブラリとして圧倒的に有名かつ人気を誇っている「jQuery」、各ブラウザごとの依存コード対応などをしなくて良くなるので非常に便利なのですが、そのモバイル版「jQuery Mobile」開発中のアナウンスが出ました。 AppleのiOS・GoogleのAndroid・BalackBerry・マイクロソフトのWindowsPhone・palmのwebOS・symbianなどの各種モバイル用OSとモバイルデバイス、スマートフォンに対応するとしており、かなり期待が持てます。 詳細は以下から。 jQuery Mobile | jQuery Mobile http://jquerymobile.com/ スマートフォンのユーザーインターフェース要素 タブレットのユーザーインターフェース要素 デスクトップアプリの調査 メールアプリの調査 なお、下記ページに各種
これは便利！jQtouchのGUIデザインパターンチートシート
「便利！」とか、自分で言ってりゃ世話ないですが。笑 すみません… 現在、iPhoneアプリの開発に勤しんでいる私でありますが、jQtouchのGUIインターフェース研究の中で出来た副産物が、ニーズがありそうなので公開します。 jQtouchのデザインパターン サンプル集です。 おそらく日本初ではないかと。 jQtouchって何？ jQtouchはiPhoneやAndroidなどのスマートフォン向けWebkitブラウザ（iPhone向けだけじゃないですよ）に人気のJavaScriptライブラリ「jQuery」を組み合わせて、Webアプリの開発を簡単にしようという試みで作成されたJavaScriptライブラリです。 主にiPhoneの魅力の一つであるGUIインターフェースとアニメーションのビジュアル化をエミュレートします。 ただ、いかんせん情報源が少ないので英語が分かる人しか手がつかないのが欠
「第10回 HTML5とか勉強会」活動報告 | gihyo.jp
毎月第3水曜日に開催している「HTML5とか勉強会」。その記念すべき第10回を9月15日に開催しました。本稿では、その模様をUstreamでのアーカイブ含め報告します。 今回は、最近注目を集めているスマートフォンでのWebアプリケーション開発に関する各種フレームワーク（JQTouchやSencha Touchなど）について、講演いただきました。これらのフレームワークは、HTML5およびCSS3などの最新Web技術を活用しており、ネイティブアプリケーションと見間違えるようなユーザーエクスペリエンスをWebアプリケーションで提供することが可能です。また、現状スマートフォンにおいてデファクトとなっているiPhoneやAndroidで動作することから、商用環境でも使いやすいことが特徴になっています。 勉強会の開催場所は、前回と同じくGoogleの日本オフィスを提供いただきました。 「第10回記
iPadでHTML5でWebアプリを作ってみました。
こんばんは。LatLongLabの河合（@inuro）です。 ようやくiPadが日本でも発売されましたね。入手された方もたくさんいらっしゃることかと思います。 ヤフーではこのiPad国内発売にタイミングを合わせ、Yahoo!ラボで「yubichiz」というiPad専用の地図Webアプリを公開しました。 Yahoo!ラボ - yubichiz（ゆびちず） 詳しい機能はリンク先ページを見ていただくとして、 地図に書かれた文字（大塚家具、とか紀伊國屋書店、とか）をタップするだけでその店舗の詳細情報が表示されます 地図を指でなぞるだけで、なぞったラインの距離を測定できます 同様に地図を指でなぞるだけで、道沿いのお店を検索できます といった特徴があります。 またyubichizは、App Storeからダウンロードするいわゆる「アプリ」ではなく、HTML5を用いてiPadのSafari上で動作するW
How to Make an HTML5 iPhone App
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. You’ve been depressed for like a year
オフライン状態のiPod touchでSafariを使う。 - WoooFla@Blog
先月初旬に発売されて、もうすでにJailbreakツールやらなにやらが色々出回っているiPod touch。iPod touchにはミュージックプレイヤーとしての機能だけでなく、ウェブブラウジング、動画鑑賞、画像鑑賞、アドレスブック、カレンダー、電卓など、（使える使えないは別として）色々な機能が備わっています。 中でも、一番注目すべきはウェブブラウジングでしょう。つまりはiPod touchがWi-Fiによってインターネットに接続でき、iPod touchでWEBページが見れるのです。そのためのブラウザとしてMacではお馴染みのSafariが入っています。 しかし、いくらiPod touchでインターネットができるといっても、無線LANが飛んでいるところに限られています。公衆無線LANが飛んでいるところであれば外出先等でもネット接続は可能ですが、現在の日本では都会でもそうそう満足のいくほど
iPod touch - Safariのdata:URLでJSアプリをオフラインで使う - bonar note
ついに念願の iPod touch を手に入れました！ 想像通りの素晴らしいデバイスですね。これにカメラと外部キーボード接続があればさらによかったかなと思いました。昨日のよるから嬉しくてずっと触りっぱなしなのですが、せっかくなので何かしてみたいなあと。 iUI iPod touch の一番の目玉はやはりSafari、ということで、ちょっとした iPod touch 用ページを作成してみました。 テストサイト丸出しでかなりしょっぱいですが、なんというか、これはかなり楽しいですね。 http://bonar.jp/ iPhone風のUIを作成するおなじみのJavaSriptライブラリ「iUI」で作成しています。 iUI http://joehewitt.com/iui/ iUIのjsとCSSを読み込んで、決まったidやclass名を振って行くとそれっぽくなります。例えば、class="pane
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてな
Interactive charting library | Highcharts
Google Code Archive - Long-term storage for Google Code Project Hosting.
Webサイトをスマートフォン対応してと言われた時に見ておきたいサイトまとめ｜caraldo.net | WebとiPhoneとロードバイクが大好き！