「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた -1.メニュー編-（※iPhone寄り） - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） 今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん！！」って方も多いのではないでしょうか？ ということで、記事でも書いてみっかぁ！と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です(￣▽￣;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhon
スマートフォンサイト提案を作るための参考資料とツール | バシャログ。
こんにちは、「夜になると体温38度」が二日連続で来たinoueです。 こういうのも風邪なんでしょうかね。ただの知恵熱？ さて、前回「Androidアプリ開発に役立つサイト7つ」というエントリーを書きましたが、 webサイトのスマートフォン対応についてもお客様にご提案させていただく機会がぐんと増えてきています。 そこで、今回はスマートフォン対応サイトの提案をする際に役に立ったサイトをご紹介します。 参考資料 2つ 実例でわかる！スマートフォンサイトの画面設計 「実践！iPhone＆Androidサイト制作ガイド」という連載の第6回目の記事です。 タイトルどおり、実際のwebサイトをスマートフォンの特徴に沿ってリデザインしていく手順を解説しています。 画面設計の際に考慮するポイントについて基本をおさえられる記事です。 iPhone アプリと Web デザイン Part.6 iPhone アプリ
Goo.glのすごい隠し機能がどのリンクも瞬時にQRコードに変える
今日（米国時間9/30）Googleは、同社のURL短縮サービスであるGoo.glを、一般に公開した。Googleはこれを「ウェブで最も安定、安全、高速なURL短縮サービス」と呼んでいる。しかし、イースターエッグ（隠し機能）のおかげで、最もクール、でもあるかもしれない。 GoogleのMatt Cuttsがつい先ほど ツイートしたところによると、goo.glのURLの後に「.qr」を付けるだけで、QRコードが生成される。これをQRコードリーダーでスキャンすれば、そのURLに飛べる。 例えばこのURL、goo.gl/qJB9は、この記事の短縮リンクだ。もしこれを、goo.gl/qJB9.qrに変えれば、上の画像が得られる。 実はこの機能は全く新しいというわけではない ― しかし、以前はgoo.glを使うこと自体が難しすぎた（一部のGoogle製品でしか使えなかった）。今後は多くの人がgoo.
Google モバイル検索から PC サイトページの全体が見られるようになりました
携帯からウェブ検索をして閲覧した PC サイトが見づらかったことはありませんか？ 今回、PC サイトをより見やすくするために、ページ全体が見られる機能を追加しました。この機能を使うと、PC で見るのと同じように、一目でウェブサイトがどう構成されているかが見られるので、欲しい情報にすぐにズームインすることができます。 主な特徴は下記の通りです。 - ウェブページの主要な箇所に 1, 2, 3 といった番号が割り当てられます。 - アクセスキーに対応しています。ダイヤルキー 1 から 9 を押すことで見たい箇所に直接ズームインできます。 新機能はモバイル用に変換されたPCページの先頭に現れる「全体を見る」を選べばすぐに使えます。新しくなった Google モバイル で快適なネットサーフィンをお試しください。
10 Excellent Tools for Testing Your Site on Mobile Devices
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. With the ever-increasing sales of smar
5分で絶対に分かる、「Webマーケティング」とは
5分で絶対に分かる、「Webマーケティング」とは：デザイナーのためのWeb学習帳（8）（1/6 ページ） 【0分】Webマーケティングとは何か？ その概要 Webマーケティング。 ひと言でいうと簡潔ですが、具体的にはどのような作業が含まれるのか、ご存じでしょうか？ Webマーケティングの単語を分けると「Web」と「マーケティング」ですね。それぞれに含まれる意味はというと。「Web」は、あるサイトの構成やページの表現などが含まれるとします。そして、「マーケティング」には、ある目標に向かって、いかに集客し、そこからどれくらいのコンバージョン率（転換率）だったのかを計測し、集客の方法を検討することが含まれます。 従って、Webマーケティングとは、「Web」の部分と「マーケティング」の部分をひとまとめに行うことを、ここでは示します。すなわち、マーケティングを行い、その結果によってはサイトの構成やペ
報道発表資料 : 「ドコモwebメール」の提供開始について | お知らせ | NTTドコモ
お客様の設定により、お客様情報が「非表示」となっております。お客様情報を表示するにはdアカウントでログインしてください。 お客様情報表示についてへ お客様情報表示についてへ 株式会社エヌ・ティ・ティ・ドコモ NTTレゾナント株式会社 NTTドコモ（以下ドコモ）は、NTTレゾナント株式会社が提供する「gooメール」のプラットフォームを活用した、パソコンや携帯電話からメールの送受信ができる無料のwebメールサービス「ドコモwebメールTM powered by goo（以下ドコモwebメール）」を、2010年4月14日（水曜）より提供開始します。 本サービスは、iモード®契約者1 であれば専用のメールアドレスが無料で1つ取得でき、パソコンでも携帯電話でもブラウザ上でメールの閲覧・送受信が可能となるサービスです。携帯電話では専用iアプリ®でも利用可能です。 普段お使いのプロバイダーのメールや他の
Making a Slick MobileApp Website with jQuery & CSS
As a web developer, you have to bring creativity and attention to detail to your work. It is often the little things that leave a lasting impression to a visitor. Be it a lovable character illustration, or unique slideshow, it is usually not the information you present that is memorable, but the way you present it. Today we are making a complete jQuery & CSS website for a fictional mobile applicat
iモードHTMLとiモードXHTMLを正しく切り替える方法 携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
最近発売されているドコモの機種（FOMA）のブラウザにはたいてい iモードHTMLとiモードXHTMLの両方に対応したモードが搭載されています。 例えば、最新のハイエンド機種FOMA 904iでは、ドコモの技術情報の端末スペック表を見ると、 iモードHTMLはバージョン7.0、iモードXHTMLは2.1に対応していることが分かります。 これは、携帯電話が機能向上するのと並行して、 携帯に対応したHTMLもバージョンアップを繰り返すためです。 このi-HTMLとi-XHTMLの違いは、多くはHTMLタグで指定できる属性やCSSの対応状況になりますが、簡単に言ってしまえば、i-XHTMLのほうがより豊かな表現が可能になっていると解釈しても間違いではないでしょう。 さて、携帯サイトを作成する際のポイントについてふれますが、 多くの方が勘違いされているのは、 ドコモの機種が割と新しい機種、つまりX
もっと手軽に携帯販促を。携帯販促ASP(SaaS型)・モバイン [メルマガ配信 携帯サイトCMS アンケート]
モバインについて モバイル販促ツール『モバイン』は、実店舗の来店促進（O2O）サポート機能が オールインワンパッケージでまるごとお使いいただけるASPサービスです。
![もっと手軽に携帯販促を。携帯販促ASP(SaaS型)・モバイン [メルマガ配信 携帯サイトCMS アンケート]](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc9a3f841031ba92f87ae5da9467c3953f7e673b/height=288;version=1;width=512/http%3A%2F%2Fsp.mobign.com%2Fcommon%2Fimages%2Fogp.png)
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
携帯サイトで使えるXHTMLの規格
PCサイト・携帯サイト共に、XHTMLが以前よりは一般的に使われるようになりつつあります。 ここでは、携帯端末で使われるXHTMLの主な３つの規格の簡単な概要を書いておきます。 携帯サイトの場合は、文字コードとしてShift_JISを使用することが多いと思われるため、 先頭のXML宣言は <?xml version="1.0" encoding="Shift_JIS"?> としなくてはなりません（省略すると、文字コードセットは UTF-8またはUTF-16 になる）。 以下のどの規格でも、先頭のXML宣言で、適当な文字コードの設定が必要です。 XHTML 1.0 Transitional XHTML 1.0 Transitionalを使いたい場合は、文書型宣言で、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
ke-tai.org > Blog Archive > ケータイでの画像回り込みについてまとめてみました
ケータイでの画像回り込みについてまとめてみました Tweet 2008/6/11 水曜日 matsui Posted in デザイン | 7 Comments » 本日、ケータイでの「画像の回り込み」に関して調査しましたので、メモを兼ねてまとめてみます。 もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。 まず問題となったのが、auでfloatが利かないことです。 では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。 なかなかやっかいです。 そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。 <img src="test.gif" style="float:left;" align="left" /> あ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PCやモバイルなど異なる画面サイズに対応したウェブデザイン集 -Media Queries
Webサイトをスマートフォン対応してと言われた時に見ておきたいサイトまとめ｜caraldo.net | WebとiPhoneとロードバイクが大好き！
新着記事
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
作ろうiモードコンテンツ：絵文字入力ソフト「i絵文字」 | サービス・機能 | NTTドコモ
EZweb 絵文字一覧