これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先月LIGブログがリニューアルされました。僕はメインでコーディングを担当していたのですが、いつものようにスマホでの不具合には悩まされました。 とくに今回焦ったのは、直前でiOS8がリリースされたことでした。まだ情報がない中で、こいつで起きた不具合を解明するのには手こずりました（’ー’） そこで今回は、スマホのコーディングで僕が詰まったポイントとその解決方法について、実例を踏まえながら紹介していきたいと思います！ 1. iOS8でz-indexを使っている要素をJSで操作すると、重なり順がおかしくなる こちらのページ（SP）では、社員の写真要素をスワイプすると画像が反転する、という動きを実装しています。 position:absoluteで表の写真、裏の写真を重ね、z-indexで重なり順を設定していた
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
» スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
これがスマートフォン向けサイトを作るときの 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>に見えるのが隠し味になっていま
『スマートフォン向けJavaScriptライブラリchikuwa.js』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは！スマートフォン版Ameba（通称：デカグラフ）でフロントエンドの開発をしている2012年度新卒入社のオオシモと申します。 デカグラフでは、主にSNS機能（サークル・掲示板・メッセージ・写真など）のNode.jsからフロントエンドのJavaScriptを担当しています。ちなみにエディタはSublime Text 2を使用しています。とっても軽くて高機能でオススメです。jQueryを使用しているのではないでしょうか。 デカグラフでは、chikuwa.jsと呼ばれるスマートフォンに特化した軽量ライブラリを使用しています。このライブラリは弊社の首
コレを抑えておけばOK！スマホサイト制作に役立つ記事・サイトまとめ！ | PLUS
一般企業サイトでもスマートフォンに対応するサイトが増えてきました。ちょっと前までは提案しても、もうちょっと先でいいよという話に落ち着いていたんですが、ようやく身近なクライアントも導入をはじめています。そこで今回は実際にスマホサイトを作る立場から、役に立ちそうな記事やサイトをまとめてみました。 スマホサイトのギャラリー 絶対見ておきたい有名企業のスマホサイトまとめ 優れたiPhoneサイトデザイン集 – iPhoneデザインボックス スマートフォンサイト デザイン集 AGT thinkthing スマホ制作に役立つ情報 【スマートフォンサイト制作の総まとめ 第1弾】スマホサイトデザインの基礎知識 少しのコードで実装可能な15のスマートフォンサイト用小技集 200サイトのiPhoneデザインを見て感じたスマートフォンの最適化 Webサイトのスマートフォン対応 7つの基本ルール スマー
モバイルサイズになると自動でグローバルメニューをPathのような横スライド式に切り替える軽量jQueryプラグイン・PageSlide Responsive
結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。 これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。 PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。 Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。 ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。 タップすると左からメニューがスライドします。 手抜きで申し訳ないんですがサンプルです。 Sample※表示確認はresponsivepxを使うと楽です 実機で重いのは僕が
JavaScriptのスマホ対応時に知らないと損する16のコト
JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での
遅すぎる日本のスマホサイトの原因を探る (1/4)
デジタル機器の利用動向で知られるコムスコアの調査によると、2011年12月時点の日本における携帯電話に占めるスマートフォンの割合は16.6%でしたが、2012年6月には23.5%になり、半年で約7ポイントも増加しました。「まだ4人に1人の割合じゃないか」と思う方もおられるでしょう。 しかし、有名な「キャズム理論」によれば、普及率がイノベーターとアーリーアダプターを合わせて16%を超えると、一般大衆が技術を受け入れます。2012年12月時点の普及率はまだわかりませんが、すでに半分を超えていてもおかしくありません。スマートフォン未対応の企業サイトは、「時代遅れ」といっても過言ではないのです。 日本のスマートフォンサイトの問題点 すでにスマートフォン対応を済ませた日本の企業サイトは「マーケットに素早く対応して流石だ！是非、お手本として見習おう」といえるでしょうか？ 先行してスマートフォンに対応し
スマホ・タブレットの判別ができるPHPクラスライブラリ「PHP Mobile Detect」:phpspot開発日誌
PHP Mobile Detect - lightweight PHP class for detecting mobile devices スマホ・タブレットの判別ができるPHPクラスライブラリ「PHP Mobile Detect」。 判別ならば文字列マッチングでもよいという人もいると思いますが、グローバル変数や無駄なマッチングを省くためにこうしたクラスライブラリを活用するのもよいかもしれません。 次のようにコードがシンプルですっきりと読みやすくなります。iPhoneやiPod touch、Android等をマッチングさせるコードは美しくないですね。 どのぐらいメンテナンスされるのかという点がきになったりしますが、そこまでルールが極端に変わることもなさそうですね。 関連エントリ スマホを判別するのに便利なJSスニペット Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独
離婚回避マニュアルを購入したいと思っているなら・・・ ｜ 口コミ・レビュー投稿 E-BOOKデータベース
離婚回避マニュアルを購入しようとしているなら、こちらのリンクをよく確認したほうがいいです。 このWEBサイトで、女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～の購入によって一体何ができるのかを、よく理解してから購入されることをおすすめします。 また、レビューや口コミが掲載されていれば、それもよく確認しましょう。 次の女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～に関した情報も購入の参考になるかもしれません。 販売商品名称：女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～ 教材説明：画期的な究極の離婚回避マニュアルをご紹介します。絶対に離婚したくない夫に徹底的な女性目線でお伝えする、離婚回避バイブルです。市販のマニュアルの多くは、男性が男性目線で書いたものであり、「妻の感情」をまったく無視しています
HTML5のスマホ対応の基礎知識とハマリどころ3選
HTML5のスマホ対応の基礎知識とハマリどころ3選：スマホ向けサイト制作で泣かないための秘伝ノウハウ（2）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、HTML5についておさらいし、OSごとの対応状況や、iPhone／Androidなどで表示する際のハマリどころを紹介 こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選」では、スマートフォン向けサイト制作についての注意点や、代表的なOS／機種依存を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での検証サービス事業で蓄
はじめてスマートフォンサイトを作る人へ。制作で気をつけたいポイント５つ
スマートフォンの普及に伴い、スマートフォンサイト制作案件が増えてきている方も多いと思います。かくいう私もその一人です。 最近は一人でカバーしきれない程のご依頼をいただくようになり、新たに担当者を増やすことにもなりました。 普段私が気をつけている点、どういったことを考えてスマートフォンサイトを制作しているかを伝えることになったので、ついでに記事にしてしまいたいと思います。 私がスマートフォンサイトを制作するときのポイントは、以下のとおりです。 1.そのサイトはいつ・誰が・どんな時見るのか2.実際のサイズ感を考えて、使いやすさを確かめる3.死角と押しやすい位置を意識する4.CSS3で実現可能なデザインを5.ユーザは本当にスマホサイトを求めているのかそれでは、詳しくお話していきたいと思います。 こんなの当たり前だよ！ということばかりかもしれません。 案件やサイトのジャンルによっては当てはまらない
スマートフォン向けWebサイトの表示速度 高速化手法
対象読者 スマートフォンWebサービス開発者 特に、フロントエンド周りの開発に従事する方 スマートフォン向けWebサイト高速化のテクニック スマートフォンはOS／デバイスの進化が激しく、要求される最適化の内容も半年で別物になることがあります。そのため最適化に際しては、案件ごとの状況や目的、デバイス／OSのシェアに応じて、まずターゲット端末を選定し、問題の検出を行います。 この記事では「iPhone 4＋iOS 5」を想定して話を進めます。実際に「iPhone 4＋iOS 5」はよく現場でも最も動作が重い組み合わせとしてターゲット端末に挙がります。これはiPhone 4がRetinaディスプレイを採用したことで960×460ピクセルの高解像度を備えながら、CPUなどのデバイス性能が潤沢とはいえず、ボトルネックが生まれやすいためです。iOS 4ではなくiOS 5をターゲット端末として扱うのは、
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
SLOT88 Situs Judi Slot Online Gacor 100% Jackpot Hari ini Hadir sebagai situs judi slot online terbaru, SLOT88 saat ini menjadi salah satu pilihan bagi para penikmat permainan judi online yang ada di seluruh Indonesia. Ini semua karena permainan yang disediakan begitu seru dan mengasyikan, game slot online juga sangat mudah di akses dan dimainkan kapan saja hanya melalui HP berbasis android dan io
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者のミッションとは!? 『成果』を出すスマートフォン設計に必要な3つのスキルを紹介します｜カジトリのハッピー食堂|富山のごはんを世界へお届け！
事例紹介 | 株式会社インフォバーン
たった１行でiPhoneサイトのヘッダーにアプリバナーを表示させる方法 ｜ iPhoneデザインボックス