ゼロから始めるレスポンシブWebデザイン入門スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、菊池 崇氏が解説します。
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
スマートフォンサイトの制作 - 基礎編 - - ぺーぺーエンジニアのおぼえがき
はじめに iPhone+Androidスマートフォンサイト制作入門を読んだことを忘れないようにメモ iPhoneの仕様を確認 端末 iPhone3G iPhone3G S iPhone4 ipad 解像度 iPhone3G、iPhone3G S : 320 x 480px iPhone4 : 640 x 960px iPhone4はiPhone3G、iPhone3G Sと比べて解像度が2倍あるが、 ブラウザーは100%表示時に320 x 480pxで表示する仕様になっている為、見た目が変わらない ブラウザ ソフトウェア：safari レンダリングエンジン：WebKit プラグイン プラグイン非対応 文字コード 文字コード変更不可 ・表示された文字コードを変更できないため、metaタグで正しく文字コードを指定する ・テキストファイルに直リンクを貼り表示させる場合はShift JISでしか見え
iPhoneに適したLightbox
iPhoneでLightboxが動作しなかったので、 代替のパッケージを調査してみた 発生する問題調べてみたところ、次の3つの問題がある事が分かった。 表示位置がずれる本来タップした位置ではなく、かなり上の方に表示される。 画面の暗転が起きるので動作しているのは分かるのだけれど、画像が表示されるように見えない。 ダウンロードが出来ない画像の表示は上手くいってもiPhoneでは画像をプレスすると「画像を保存」と「コピー」が表示されるのが、リンクとして認識され「開く」と「新規ページで開く」、「コピー」が表示されダウンロードできない。 これだと、壁紙画像とか作っても使えないので困る 動作が重いスマートフォンでも使うからこそ動作速度、容量ともに軽量なものが望ましい 調査したパッケージ元祖Lightbox 表示位置 × ダウンロード ○ 軽さ ○ Firespeedでも長く使用していたLightbo
スマートフォン、いつ買いました？ 購入時期・機種でユーザー層に特徴
iPhone 3G/3GSが最初に購入したスマートフォンという「第1世代」は、男性が8割近くで平均年齢は約40歳、スマートフォンの機能を幅広く使いこなす一方、ファッションや外見はあまり重視しない──博報堂DYグループのスマートフォンユーザー調査で、こんな結果が出た。スマートフォンの購入時期で「世代」を3つに分け、それぞれの特徴を分析している。 ネットによるアンケート調査で2月中旬、全国の10～60代 515人に聞いた結果をまとめた。東日本大震災後の4月上旬にも、309人に震災後の利用状況を聞いた。 調査結果では、最初に購入したのがiPhone 3G/3GS（2008年7月～2010年6月ごろ）というユーザーを「第1世代」、iPhone 4（2010年6月ごろ～現在）は「第2世代」、Android端末（2010年10月ごろ～現在）は「第3世代」と分類。それぞれの特徴をまとめた。 第1世代にと
初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
スマートフォン(iPhone/Android)アプリ制作時に役立つ画像サイズのまとめ
こんにちは、鴨田です。 最近、スマートフォン関連の仕事が多いのですが、 スマートフォン絡みのデザインをするときに、 この画像はどんなサイズだったっけ、 っていうことが多いので、まとめておきたいと思います。 ■画面サイズ[画面解像度](単位：px) iPhone3G / 3GS 320×480 iPhone4 640×960 iPad / iPad 2 768×1024 HT-03A 320×480 Xperia (SO-01B) / Xperia arc (SO-01C) 480×854 HTC Desire (X06HT) 480×800 Nexus One 480×800 Galaxy S 480×800 IS03 640×960 Galaxy Tab 600×1024 主要な機種だけ載せておきます。 AndroidはWide対応が主流ですね。 ■Lancherアイコンサイズ(単位：p
スマートフォン講座 : LINE Corporation ディレクターブログ
2011年04月19日 【スマホ集中連載 第11回(最終回)】過去10回分の“大事”なところをまとめました Tweet 2011年04月14日 【スマホ集中連載 第10回】 "キャリアの動向も気にしていますか?"〜各アプリマーケットのコンテンツや決済、審査などを徹底研究 Tweet 2011年04月12日 【スマホ集中連載 第9回】 "意味まで正確に理解していますか？" Androidアプリ開発における重要用語集 コメント数:コメント(0) トラックバック数:トラックバック(0) Tweet 2011年04月07日 【スマホ集中連載 第8回】デコメ投稿サイトのビジネスチャンスと、立ち上げまでにしてきたこと コメント数:コメント(0) トラックバック数:トラックバック(0) Tweet 2011年04月05日 【スマホ集中連載 第7回】 小技紹介 "Android端末で画面キャプチャを撮る方
誰でも即席“Androidプログラマ”に、Googleが開発ツール「App Inventor」を一般公開
言語を知らなくても簡単にAndroidアプリが作れる――。誰でもプログラマになれる“驚愕”の開発ツールが登場した。米Google社が提供する「App Inventor」だ。早速、開発のしやすさを体験してみた。 米Google社は2010年12月16日、Androidアプリを開発するためのツール「App Inventor」のベータ版を一般公開した。同年7月から登録者のみに提供していたものだ。ツールおよびWebサービス、Javaアプリの3つの組み合わせで実現している。 App Inventorの特徴は、プログラムをコーディングしなくても、Androidスマートフォンで動作するアプリが即席に作れること。パズルを組み合わせる感覚でプログラムを作成できる（図1）。Javaを知らない人でも、Androidスマートフォンを持っていれば、そのまま個人用のアプリが即製可能だ。
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
モバイル開発に欠かせないテストツール14選
Adobe Device Central CS5 Adobe CS5 をパッケージ購入すると一緒についてくるモバイルデバイスのテスト環境。様々なエミュレーターが存在しますが、オールインワンで素早くテストがしたい場合はこちらがオススメです。特に Flash を活用したモバイルサイトをテストするのであれば欠かせない存在です。 Android SDK Javaで開発されているので、Mac, Windows, Linux で動作する公式のエミュレーター。2011年1月現在、Android OS 1.1 〜 2.3 までのテストが可能。エミュレーターは実際のスマートフォンと同じ動作をするので、ディフォルトのブラウザだけでなく、Opera Mini や Firefox など他のブラウザをインストールしてテストすることができます。 iOS SDK XCode も含め諸々ダウンロードしなければいけませんし
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。
作って学ぶスマートフォン対応サイトの基本 (2/4)
基本のHTMLを作成する 最低限の制作環境が整ったところで、さっそく簡単なスマートフォン向けWebページを作成してみましょう。エディターを起動して、次のようなHTMLを用意します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>スマートフォンサイトテスト</title> </head> <body> </body> </html> 今回はHTML5で記述していますが、基本的にはHTML4やXHTMLなど、PC向けのHTML/XHTMLがほぼ利用できます（iモードなど携帯サイト用のHTMLは正しく表示できません）。続いて、基本的なマークアップを施していきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
HTML5とCSS3を使ってスマートフォン向けサイトを構築 － iPhone版Yahoo!JAPANトップの開発事例紹介
実践！iPhone＆Androidサイト制作ガイド
