3G端末（FOMA・WIN・3GC）のモバイルサイトのコーディング＆デザイン - livedoor ディレクター Blog(ブログ)
こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。 つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。 どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G（FOMA・WIN・3GC）端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。 【01】対応端末について こちらの記事にもあるとおり、3G 端末（FOMA・WIN・3GC）がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。 サイトの内容にもよりますが、下位端末（PDC・P型・C型など）を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運
[Think IT] 第2回：携帯サイトの制作から公開まで (1/3)
サイト規模に合わせて作り方を選ぶ 前回（http://www.thinkit.co.jp/article/143/1/）は、携帯サイトとPCサイトがどのように違うかを紹介しました。今回は、汎用的な携帯サイト作りを行うための制作の基本から、実機テストまで含めた公開までの手順を解説します。 携帯サイトでは、キャリアによる仕様の違いがあるため、これをどの程度まで考慮するか、はじめに考えなくてはなりません。携帯サイトの作成法には、下記の5つの方法がありますが、ここでは「3キャリア対応の静的サイト+プログラム」について紹介します。 1.キャリア別に静的なサイト 2.3キャリア対応の静的サイト+プログラム 3.プログラムによる動的生成 4.CMSを使ったジェネレータ型 5.MobaSiF（http://sourceforge.jp/projects/moba）などのフレームワーク型 3キャリア対応の静
携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
さっそく、読者の方から、「iモードブラウザ」が「2.0」になりましたが、 携帯サイト市場としてすぐに対応は必要ですか？ というご質問を頂いたので、今更ではありますが僕なりの見解をお伝えしますね。 結論から言うと 「もちろん動向をウォッチしていくことは必要だが、焦ってすぐに対応する必要はない」 と思います。 iモードブラウザ2.0がドコモ新機種（昨年の夏モデル）に搭載されたとき、 技術系のブログではいち早く過去のブラウザバージョンとの違いを比較した情報を伝えていましたが、 私はその情報はもちろん作り手として知る必要はあると思うんですけど、 おそらく皆さんが思っているのは、そうではなくて、 じゃぁすぐに対応すべきかっていうことだと思うんです。 確かに携帯サイト業界のトレンドや動向は変化が早いと言われますが、 XHTML+CSSベースで携帯サイトが作れるようになった今でも、 核となる制作ノウハウ
ウェブ用やデスクトップ用のフリーのアイコン収集サイト -iconerz
ウェブサービス・オンラインショップやブログのウェブ用をはじめ、Win/Macのデスクトップ用などのフリーのアイコンを収集しているサイト「iconerz」を紹介します。 iconerz アイコンは全部で170種以上あり、12カテゴリに分かれています。 Adobe Icons Anime Icons Browser Icons Console Icons Desktop Icons Dock Icons Food Icons Hand Drawn Icons Mac Icons Miscellaneous Icons Program Icons RSS Icons Social Icons Sports Icons Vista Icons Web Icons 各アイコンでライセンスが異なるため、要確認です。 また、オリジナルのアイコンも配布されています。
朝日新聞 今度は社内ＰＣからアダルトアフィリエイトの宣伝書き込みが発覚？:Birth of Blues
もう訳が分からん。 【朝日新聞】会社からアダルトスパムを投稿してたっぽい1 名前：自動保守 ◆KAWORUVHOM [] 投稿日：2009/04/01(水) 22:43:08.96 ID:OUV/qM4y 件名:挿れっぱｗｗｗｗｗ 投稿者：ばばそ 投稿日：2008/11/01(Sat) 23:31 No.68 HomePage ちょｗｗ ユカって子ヤバイｗｗｗｗｗ しゃぶってもらいながら、ずっとオ ナ見てあげてたんだけど、イった後もバ イブを突っ込んだままでそのまま寝てた（＾＾； いやぁ、寝てても体はヒクヒクするもんなんだなぁｗｗｗｗｗｗｗｗ （業者アダルトサイトのURL） atws02.asahi-np.co.jp 原文はこちらから。 http://snow.advenbbs.net/bbs/yybbs.cgi?id=dawndusk
CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ
「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS
PCと全く異なるモバイルサイトの “真のユーザー層”を見極めよう！
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
サイトマップをフッタに配置する際のポイントとその効果
サイトマップを独立したページとしてではなく、フッタに配置する際のポイントとその効果をWeb Designer Wallから紹介します。 Modern Sitemap and Footer 下記は、その意訳です。 昔はほとんどすべてのウェブサイトで、コンテンツをリストアップしたサイトマップを独立したページとして設置していました。 サイトマップの重要な目的は、ユーザーや検索エンジン（スパイダー）がサイト内の情報を探し出すのに役立つことです。 現在は、多くのモダンなウェブサイトでサイトマップページを設置していません。代わりに、サイトマップをフッタに配置しています。 サイトマップをフッタに設置する効果 クリック数やページビューの増加 ユーザーはページを隅々までじっくり見るわけでなく、スクロールしながらざっと見ることがほとんどです。 そして、多くのユーザーがスクロールして最後に見る場所は、フッタです
「Movable Type 4.25」注目の新機能 MT最新版で作る、Twitter風ミニブログ
2008年春に「Twitter」の日本語版が登場し、“ミニブログ”と呼ばれるサービスが日本でも本格的に広がり始めました。こうした中、Movable Typeの最新バージョン「4.25」に搭載されたのが、Twitter風のサイトを作れる「モーション」（Motion）という機能です。今回は、Movable Type 4.25を使って、Twitter風のサイトを作る方法を紹介します。 コミュニティ系機能を強化してきた「Movable Type 4.x」 ブログツールの1つとして多くのユーザーに使われている「Movable Type」（以下、MT）は、2007年夏にリリースされた「MT4」以降、企業向けのCMS（Content Management System）的な機能が強化されてきました。同時に、一方で拡張されてきたのが、コミュニティ系サイトを作るための機能です。 たとえば「MT 4.2」（2
ニコ動に「動画の墓参り」という習慣があるらしい
ニコニコ動画に「動画の墓参り」という習慣があるらしい。削除された人気動画の“跡地”に、ファンだったユーザーが訪れて「墓参りに来ました」などと書き込み、人気をしのぶというもの。記者はブログ「未来私考」の記事で初めて知ったのだが、2007年ごろからある習慣のようだ。 「あいつこそがテニスの王子様」の“跡地”。今年3月6日には投稿から2年を記念する「2周年祭」として、「2周年おめでとう！」などのコメントが殺到した ニコ動で削除済み動画のページにアクセスすると、「大変申し訳ありませんが、この動画は削除されたためご覧になれません」といったメッセージ動画が再生される。 この動画には、コメントを付けることも可能。削除直後には「なぜ削除した」など残念がるコメントが付くことが多いが、それが落ち着いてくると「墓参り」と書き込み、“在りし日の動画”をしのぶユーザーが増えてくる。 動画によっては「○年○月○日○時
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが１ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう？という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
そろそろモバイルサイト作成について本気でなんとかしたいと感じる・・・が。*ホームページを作る人のネタ帳
PEAR :: Manual :: 共有ホストでの PEAR のローカルコピーのインストール
http://typeface.neocracy.org/
CSSのみで画像に違和感なく注釈を入れるサンプル:phpspot開発日誌
http://www.designwalker.com/2009/03/form-design-2.html
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.com