mydevice.io : web devices capabilities
CSS3 flexbox grid layout grid layout (old) position: sticky regions @supports will-change pointer events calc() viewport units hover media query pointer media query background blend mode background-size: cover object-fit font ligatures appearance filters masks scroll snap points shapes hyphens HTML5 / JS flash video webgl canvas srcset <picture> inline SVG webp jpegxr geolocation matchmedia() webs
ただのWebエンジニアがスマホサイトを開発するにあたって知っておきたいこと - Qiita
今更だけど、スマホサイト開発未経験のエンジニアが、スマホサイトを開発して気づいたことやハマったことなどの雑多なまとめです。 対象はiOS, Androidです。 シェア率(日本) 最近の動向など 2014年4月のスマートフォン販売シェア、日本ではiOSがトップ、欧州ではWindows Phoneのシェアが各国で増加（Kantar調査） | juggly.cn Apple、2014年第1四半期において日本スマートフォン市場のシェアを36.6％獲得！ドコモ版iPhoneで大躍進 | gori.me（ゴリミー） 2013年第4四半期 国内携帯電話出荷台数ベンダー別 シェア 2013年第4四半期および2013年 国内携帯電話・スマートフォン市場規模を発表 より iOS, Android共に半々くらいのシェア率で考えれば良さげ。 Androidシェア(世界) iOSのOSは基本的には最新のバージョン
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
サイト制作時のメモ 2012年前半
ここ最近でサイトを作ったときに思ったことのメモです。 個人的なサイトを昨年末と今年の7月に1つずつ、それ以外でやったのが春に1つ（結局なかったことにされたけど）、今やってるのが1つ。 昨年末のは一応レスポンシブウェブデザイン、7月のと春のは普通のソリッドレイアウト、今やってるのがスマートフォンサイト。 昨年末に作ったものについてははてなダイアリーの方でも書いたし、内容は被るけど改めて。 全般「HTML5 Boilerplate」は丸ごとというより必要な部分だけ抜き出して使うと便利。 「これは要らないかなー」という部分を探すのにはコード読まないといけないので、それだけでも結構勉強になると思う。 単純なサイトなら頑張って画像作らなくてもなんとかなったりする。 （対象がいわゆるモダンブラウザの場合） Sass 3.2から使えるPlaceholder Selectorは凝ったことしなくても普通に便
スマートフォンサイトの表示確認に使いたい便利なツール×2
[対象: 中級] 今日は、スマートフォン向けのサイトを検証するときに便利なツールを2つ紹介します。 レスポンシブ・ウェブデザインでの表示を簡単に確かめられるブックマークレットとスマホでのページ閲覧をシミュレーションするアプリケーションソフトです。 1. レスポンシブ・ウェブデザイン ブックマークレット 1つ目はレスポンシブ・ウェブデザインがどのように機能しているかをチェックするブックマークレットです。 こちらのページにアクセスして「RWD Bookmarklet」というボタン（リンク）をブラウザのお気に入りに追加するか、ブックマークバーにドラッグ&ドロップします。 レスポンシブ・ウェブデザインを確かめたいページでブラウザに追加したそのリンクをクリックすると下のような画面になります。 中央上にある赤枠で囲んだ4つのアイコンをクリックすると解像度を変化させた表示に切り替えることができます。 ア
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
スマートフォン向けのサイトデザインでとっても大切な5つのポイント
J Taylor Design スマートフォンにおいて、スクリーン上のクリック（つまりタップ）無しに使うことは考えられません。ナビゲーションはユーザーが必要とすることが得られるように、明確な進路を与えるべきです。 ナビゲーションで重要なことは二つ。 まず、ナビゲーションが視覚的にタップ可能に見えるか確認してください。見た目をボタンやリストのようにしたり、矢印などを加えてもよいでしょう。ただし、スマートフォンではtitleのテキストをホバーで表示したり、ホバー時のエフェクトを適用できないので、それ無しでも押すことができるように見えることが大切なポイントです。 もう一つの重要なことは、ラベルです。 「戻る」というラベルがあれば、ユーザーは戻ることを期待します。これは当たり前のようですが、ユーザーにとってラベルが何を意味するか分かることを確認してください。 ラベルを有意義にするポイントは、シンプ
PCサイトスマホ変換「shutto（シュット）」サービス終了
shutto（シュット）サービス終了 PCサイトのスマホ変換サービス「shutto（シュット）」は、2024年3月31日をもってサービスを終了しました。 今まで多くのお客様にご愛顧いただきましたこと、スタッフ一同深くお礼申し上げます。 ※Webサイト多言語化ツール「shutto翻訳」は「shutto」とは別サービスとなります。 「shutto」はサービス終了となりますが、「shutto翻訳」には影響ございません。 「shutto翻訳」はこちら shutto終了後のスマートフォン変換にお困りの方 株式会社アイスリーデザイン様が提供している「flamingo」サービスでスマートフォン変換が可能です。 詳細は株式会社アイスリーデザイン様にご確認ください。 ■「flamingo」に関してのお問い合わせ先 株式会社アイスリーデザイン 営業本部： 担当 原島(はらしま)/野林（のばやし） お電話でのお
スマートフォンWPtouch トップページのカスタマイズ
iPhone、Android、Galaxyなどのスマートフォン向けにしてくれるとっても便利で有名なプラグインWPtouch があります。プラグインを有効化してデフォルトでも充分に使えますが、当サイトのようにトップページに固定ページを設けて作成しているサイトにとってはデフォルトではブログのイメージが強く何か物足りません。そこでトップページを新たに作成してみました。 WPtouch をカスタマイズする前の準備 WPtouch をインストールされていない方は、まずWPtouch のプラグインをインストールして有効化しましょう。有効化したらレイアウトを確認してみましょう。もしも手元にスマートフォンがない方はパソコンでスマートフォン画面を確認するをご覧下さい。 WPtouchをインストールしてプラグインを有効化する。 パソコンでスマートフォン画面を確認出来る状態にする。 WPtouchを有効化したス
『HTML5 Web Applicationのつくりかた』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェントでフロントエンドの開発をしております 原(@herablog) です。 スマートフォン版 アメーバピグ新規作成で使用した技術について触れたいと思います。 #ちなみにこの記事ではHTML5を「最新ブラウザ向けのwebアプリケーション作成技術」というかなり広い解釈で使用していますので予めご理解ください。 今までDesktop・Android向けはFlashで作成されていたのですが、今回はiOS, Androidともに対応したいということで、HTML5でできるところまでやってみることにしました。 No Lag作るにあたり
iPhone等での表示をPCで確認出来るAir製のシミュレーター・Mobilizerがローカルファイルにも対応出来るし、割と良かった
iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。 シミュレーター（エミュレーター？よくわからｎ）はいくつかありますが、選択肢の一つとして。WinでもMacでもOKです。完璧ではないですけど、今までで一番良かった気がしました。もともと優れたシミュレーターはまだ無い気がしますしね・・・あるのかな？ｗ 動画あったので貼っておきました。iPhone4は勿論、Plam PreやBlackBerry、HTCなど4種のデバイスを同時に確認出来ます。ローカル上のHTMLも動作確認出来ますよ。Airアプリなので動作にはAdobeAirが必要です。 4つ同時に起動可能 日本なら、基本的にiPhoneとAndroidだけあれば
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
スマートフォン向けサイトの作り方エントリのまとめ:phpspot開発日誌
スマートフォン向けサイトの作り方エントリのまとめ。 スマートフォン元年といわれる2011年ですが、注目を集めているせいか、サイト作成法についてのエントリも盛り上がりをみせていますね。 個人的にもしっかり覚えておきたかったのでまとめてみました。 基本的には解像度が大きく異なるので、それにあったインタフェースに変えましょうね、という点と、HTML5/CSS3が使えるので駆使して楽にＵＩデザインしましょうという点、ユーザインタフェースがマウスではなくタッチである、という３点以外は、普通のサイト作りと変わりませんが、クセやバグがあったり、テクニックもあるので、しっかり押さえておきたいですね。 基本 スマートフォン向けサイトの作り方｜ユージック サイトの幅、高さ viewportによるズーム指定の方法 便利なJSライブラリ ユーザエージェント シュミレーター 等の有用情報 Androidサイトは横幅
「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた -1.メニュー編-（※iPhone寄り） - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） 今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん！！」って方も多いのではないでしょうか？ ということで、記事でも書いてみっかぁ！と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です(￣▽￣;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
nemousu.com
スマートフォンブラウザ不具合特集
