Appleに学ぶ、横スクロールナビを組む時のCSSメモ - Qiita
やりたいこと 横スクロールするナビを組みたい … ① スマホ(iOS)で慣性スクロールにしたい … ② スクロールバー非表示にしたい … ③ ②と③を両立させたい ① 横スクロールするナビを組みたい スマホサイトでよく見る上図のようなナビゲーションを組みたいとします。 今回は、一つ一つの li を table-cell にし、水平に並べつつ、ウィンドウからはみ出た分を overflow-x: auto; で横スクロールさせるシンプル組み方で考えます。 デモ → https://s.codepen.io/skwbr/debug/QjaBLV/NjrYzwNZpgwA (コードは下記にて) ② スマホ(iOS)で慣性スクロールにしたい overflow: auto; をかけている要素に下記を指定すればOK。 ③ スクロールバー非表示にしたい webkit独自拡張の ::-webkit-scro
5.5インチフルHD液晶＋Snapdragon 615採用のSIMロックフリースマホ「ALCATEL ONETOUCH IDOL 3」が4万円台後半で国内発売
5.5インチフルHD液晶＋Snapdragon 615採用のSIMロックフリースマホ「ALCATEL ONETOUCH IDOL 3」が4万円台後半で国内発売 編集部：小西利明 2015年8月21日，シネックスインフォテックは，中国TCL Communication製のAndroidスマートフォン「ALCATEL ONETOUCH IDOL 3」を8月28日に国内発売すると発表した。5.5インチで解像度1080×1920ドットの液晶パネルを搭載する本機はSIMロックフリー仕様。上下逆さまでもアプリや音声通話を支障なく使える「リバーシブル仕様」や，JBLによる音質認証を取得したステレオスピーカーの搭載が特徴とのことだ。 販売代理店想定売価は4万2800円（税別）とされているので，単純計算した税込価格は4万6224円となる。 ALCATEL ONETOUCH IDOL 3。カラーバリエーション
儲かる？儲からない？アプリの広告収入まとめ | アプリマーケティング研究所
ネットや書籍等で公開されているアプリの広告収入をまとめてみました。 自分のアプリの広告収益性が高いのかわからない、これからアプリ開発をしようと考えているけど、どのくらいの収益になるのか知りたいという方は参考にしてみてください。 【更新8月】参議院まとめアプリ,進撃のスライムを追加。 【更新7月】虹をのぼれ！(7/8),脱出ショボン(7/11)を追加しました。 【更新6/29】ModokiClock ,バッテロイド,電波回復,ネットで流れた怖い話,ゴキブリ専用バリアを追加しました。 【更新6/3】猫まっしぐら,斬れ！気円斬,Drにゃんこを追加しました。 【更新5/5】Touch the numbers,角栓にゅるっ,ソフト職人,毛抜きの達人,いも収穫,おにぎり職人,暗算トレーニング-計算で脳トレ！,欲張りにゃんこ,新着!NEWS2 を追加しました。 Touch the numbers ジャン
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
新・三大JavaScript タッチ対応ライブラリ比較(Hammer.js/QuoJS/ TouchSwipe) - Qiita
モバイルデバイス全盛の昨今、サイトのデザインだけでなく動きも対応しなくては！というケースがあります（私はありました）。 そんなわけで、JavaScriptのタッチ対応ライブラリについて評価を行ってみました。ライブラリの一覧についてはこちらのサイトが詳しく、ここから対応イベント・更新頻度を基に評価対象を表題の３つに絞り、その動作を比較してみました。 各ライブラリによるタッチの挙動は、以下で比較可能です(おまけでTouchyも入ってます)。 Gesture Detector 今スマホやタブレット的な何かでこの記事を読まれているあなた！はぜひ実際に動かしてみて下さい。 私はAndroid4.0デバイスしか持ってないので、xxで動かんぞ、ということがあるかもしれないです。そんな時はコメントなどで連絡いただけたらうれしいです。また、コードはこちら。 結論 結論としてはHammer.jsをお勧めしたい
ときどきWEB | 『スマホサイトでアンカーリンク効かない対策してやんよ!!!』(改良版編)
以前、スマホサイトでページ内アンカーリンクが効かない件についての投稿をしました。 『スマホサイトでアンカーリンク対策してやんよ!!!』(かなり力技編) ですが、この荒技故の欠点として・・・ ①ページのコンテンツが増えたり減ったりの変動で移動すべきアンカーポイントが変わってしまう。 ②ページ内でアンカーリンクポイントが複数あった場合にそのID、Classへ遷移するための記述を増やすのはいくない!! ③そもそもイチイチ座標を取得すんのがメンドクセー!!! 以上のポイントを踏まえて改善版のスクリプトを作成します。 アドレスバー非表示スクリプトについておさらい スマホ実機でページを開いた際にアドレスバーを非表示にしてコンテンツ表示領域を広くするスクリプトについて少しおさらい。 記述その１ window.onload = function() { scrollTo(0, 0); } 尚、こちらの記述
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
完全無料のスマホ収益化支援ツール「appC cloud」であなたのスマホアプリが金のなる木に！ - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -
スマートフォンアプリ開発者にとって、「アプリをどう収益化するのか」というのは事業の明暗を分ける大切なポイントの1つです。広告収入、ユーザー課金など色々と方法がありますが、収益化の仕組みを開発するのもかなりのコストがかかります。
![完全無料のスマホ収益化支援ツール「appC cloud」であなたのスマホアプリが金のなる木に！ - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2cf4277f21d329ea409f890a639577edd744add/height=288;version=1;width=512/https%3A%2F%2Fimgs.u-note.me%2Fnote%2Fcaption%2F47489700.jpg)
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
ゲーマーの夢がまた1つ実現。1キャラ1画面、複数端末を使用して遊ぶTRPG風ゲーム『Eon Altar』が発表 - ゲームキャスト
昨日、ゲームの中でアナログゲームであるTRPGを遊んでいるという設定のRPGを『Knights of Pen & Paper』を紹介した。 が、今回紹介する『Eon Altar』はその逆。 タブレットとスマホを利用してTRPG風にデジタルのRPGを遊ぶ…デジタルにアナログ感を持ち込んだ、いまだ誰も遊んだことがないであろう、スマホが普及したから遊べる新しいゲームだ。 このゲームを遊ぶにはメインとなるタブレット1つと、プレイヤー人数（最大5名）分のスマホ・タブレットが必要。 それぞれのプレイヤーは自分の手元にキャラクターを管理するための端末を持つ。 テーブルの中央にメインとなるタブレットを置き、それとは別に各プレイヤーは自分専用にタブレットか、スマートフォン（これはiPhoneでも、iPadでも、Androidでもいい）を手元に持ち、自分が操作するキャラクターを選択する。 オンラインゲームのよ
retina.js – Retina用に高解像度の画像を表示するJavaScript – creamu
When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. とのことで、ページロード時に高解像度の画像があるかをチェックして、ある場合はそれを表示するようです。 retina.js is a JavaScript serves a high-resolution version of an image for a retina display. When your users load a page, r
PCサイトをスマホに最適化するツール、Googleがリリース 1年間無料
Google日本法人は11月28日、PC向けWebサイトを簡単にスマートフォンに最適化できるツールの提供を始めた。最初の1年間は無料。2年目以降は月額1180円。中小企業が低コストにスマートフォン向けサイトを作成できるようにするのが狙い。 PCサイトのURLを入力すると、スマートフォンに最適化した画面を自動で表示。テンプレートや色、ボタンの配置などを調整するだけで、スマートフォン版の簡易サイトを作成できる。ワンクリックで電話をかけられるボタンを付けたり、地図を挿入することも可能だ。 サイトデザインが完成するとURLを発行。PCサイトにアクセスしたスマートフォンユーザーを、スマートフォン版にリダイレクトさせる設定もできる。 Googleのモバイル化プロジェクト「GoMo」パートナー企業のDuda Mobileのツールを活用。Duda Mobileのアカウントを登録して利用する形だ。 関連記事
巨大立方体を50万人が破壊していくゲーム « WIRED_.jp
2012.11.12 MON 巨大立方体を50万人が破壊していくゲーム 640億個の小さなブロックが構成する巨大な立方体をひたすら破壊していくゲーム「Curiosity」が人気だ。立方体の中に何があるかを見られるのは、幸運な最後のひとりだけだ。 この立方体のうち、これまでに1億7,100万ピースが破壊された。あとはわずか638億ピースだ。Image：22Cans 大統領選挙が行われた日、わたしは友人たちと一緒にTVの開票速報を見ていた。友人のひとりであるリーが、わたしのiPadを無造作にとりあげ、新しいアプリを立ち上げた。無料ゲーム「Curiosity – What’s Inside the Cube? （好奇心：立方体の中には何がある？）」だ。 まだらに見える立方体のブロックがiPadの画面に広がった。リーがピンチで拡大すると、この立方体自体が大量のもっと小さい立方体でできているのがわ
スマートフォン向けWebサイトの表示速度 高速化手法
対象読者 スマートフォンWebサービス開発者 特に、フロントエンド周りの開発に従事する方 スマートフォン向けWebサイト高速化のテクニック スマートフォンはOS／デバイスの進化が激しく、要求される最適化の内容も半年で別物になることがあります。そのため最適化に際しては、案件ごとの状況や目的、デバイス／OSのシェアに応じて、まずターゲット端末を選定し、問題の検出を行います。 この記事では「iPhone 4＋iOS 5」を想定して話を進めます。実際に「iPhone 4＋iOS 5」はよく現場でも最も動作が重い組み合わせとしてターゲット端末に挙がります。これはiPhone 4がRetinaディスプレイを採用したことで960×460ピクセルの高解像度を備えながら、CPUなどのデバイス性能が潤沢とはいえず、ボトルネックが生まれやすいためです。iOS 4ではなくiOS 5をターゲット端末として扱うのは、
子育てハンドブック「お父さんダイスキ」アプリについて - 愛知県
本県ではお父さんの子育てを応援するため、お父さんに知ってほしい子育てに関する情報が入った子育てハンドブック「お父さんダイスキ」を2011年3月に発行し、このハンドブックのスマートフォン向けアプリを2021年3月から新たに配信しています。 このアプリの日記・アルバム機能には、カレンダーに日々の出来事やお子様の写真が登録でき、お子様の成長や思い出などを記録することができます。 また、お子様の予防接種の予定や実施日、病歴などの登録機能も搭載していますので、父子手帳としても御活用いただけます。 是非、このアプリを使って、お父さんもお母さんも御一緒に子育てをお楽しみください ○子育てハンドブック ・妊娠から出産までの10か月について ・乳児期の赤ちゃんの様子について ・赤ちゃんのお世話について ・キーワード検索機能 ・ブックマーク機能 等 ○日記・アルバム機能 ○予防接種・病歴の記録機能 対応ＯＳ
iOS 6 vs. Android Jelly Bean vs. WP8、次に来るモバイルOS徹底比較！
iOS 6 vs. Android Jelly Bean vs. WP8、次に来るモバイルOS徹底比較！2012.06.29 12:00 福田ミホ Android Jelly Bean発表で、三役そろい踏み！ 先日ギズモードではiOS 6とAndroid Ice Cream Sandwich（以下ICS）の比較をしたのですが、その後グーグル、そしてマイクロソフトから、それぞれJelly Bean（以下JB）、Windows Phone 8（以下WP8）と発表がありました。役者がそろったところで、再度比較してみましょう！ 念のため断っておくと、まだそれぞれのOSの正式版は誰も使えないので、これはレビューではないんです。発表されている情報ベースで、どうなのか？ を比較しています。 アプリ iOS：65万個のアプリがあります。iPad用には22万5000個です。スマートフォンプラットフォームとし
【お知らせ】スマートフォン版4Gamerを大幅リニューアル。便利なゲーム検索機能も実装
【お知らせ】スマートフォン版4Gamerを大幅リニューアル。便利なゲーム検索機能も実装 副編集長：TAITAI いやぁ，時代はスマートフォンですよね！ でも，略すときはなんで「スマフォ」じゃなくて「スマホ」なの？ という，どうでもいい疑問が絶えない昨今。キャリアの新機種発表会も，いまやスマートフォン一色というご時世ですが，本日（5月25日）4Gamerでは，そんな時代の変化に対応すべく，iPhoneやAndroid携帯での表示に最適化した「スマートフォン版4Gamer」を大幅リニューアルしました。 今回のリニューアルでは，インタフェースデザインを一新しただけではなく，ジャンルやテーマからアプリを探せる「アプリ検索機能」の追加や，ゲームアプリのセール情報をまとめた「お買い得情報」のコーナーを新設するなど，スマートフォンユーザー向けに，より特化した内容になっています。特別な設定などは必要なく，
アサヒドライゼロ PRESENTS 石川遼プロ ゴルフレッスン企画|アサヒビール
＊Firefox最新版をご利用のお客様へ＊ ページの背景画像が正しく表示されない場合、こちらをクリックお願いします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressプラグイン「Multi Device Switcher」にPC/モバイルの切り替えボタンを設置するプラグイン
普段から常軌を逸したプロモーションに慣れすぎたフロンターレサポーターは、この笑撃ネタでもこの反応！ - SOCCER UNDERGROUND BLOG