iPhone Safariでドキュメントの幅はどうやって決定されるか
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / まずはじめに、これは合ってるかわかりません…。 でもたぶん合ってると思う。 width=device-width, initial-scale=1で、iPhoneを縦→横に傾けたら、 「1.5倍にズームした状態でさらにドキュメントの幅が480pxになる」 という謎の挙動を理解してみる。 viewportについては、Androidの動きを正と見て、iPhoneの挙動を理解したほうが容易。 initial-scaleとwidthを同時に指定した場合がめちゃくちゃにややこしい。 initial-scaleは、PCのブラウザいうとズーム機能に近いが、それによりドキュメントの幅が調節される。これは例えば
HTML5やCSS、jQueryなど、Web制作に関する日本語スライドを集約したSlideFinderが便利っぽい - かちびと.net
結構便利だったのでシェア。Web制作 に関する日本語スライドを集約している フォロワーさん作のWebサービスです。 話題のHTML5やCSS、iPhoneの事や jQueryからPHPやRubyと幅広くサポート してあります。 人気のスライド共有サイト、SlideShareで日本語のスライドのみを集めています。スライドはその場でLightbox風にポップアップして見れます。英語が苦手な方も探す手間が省けるのでは。 @deeekiさん作のWebサービスです。クックパッドのエンジニア向け「第2回 開発コンテスト24」に応募する予定だったようで、数時間で作成されたみたいで見た目はシンプルですね。 カテゴリもHTML5やjQuery、PHPやiPhone、WordPressなど多岐にわたりサポートされていますので全Web屋さん向けと言えそうです。 日本語のスライドのみを集約 集められたスライドは全
Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳
Yamadaです。 かれこれWeb屋暦が14年くらいになるんですが、こうしてWebに携わっていると、3ヶ月周期で情報の入れ替えをしていかないと、正直追いつかないと感じます。そんな激流のようなWeb業界にこれから飛び込もうと言う新卒の方や、中途の方に送るバイブルとなればと思います。 というわけで改めて春ですし、これからホームページ（Webサイト）を作成してWeb屋さんになる方へ送るお勧めサイト集です。 後編はこちら Web制作を始める人の為のスキル・ワイヤーフレーム・SEO・マーケティング・Webサービスの基礎情報 忘れないで欲しい事 Web制作には、様々なスキルが求められます。 しかしその技術が、いつの間にか消えていったり、使えなくなったりしました。新しいデザイン、新しいコード、新しい言語、新しい環境、様々なものがあります。しかし、それらを追い続けていくうちに、一つ、とても大事な事を忘れて
クロスプラットフォーム対応モバイルサイトを構築するために必要なファイルをまとめた -Mobile Boilerplate
HTML, CSS, JavaScriptをはじめ、sitemap.xml, .htaccessやアクセス解析など、モバイルサイトを構築するファイルをまとめた「Mobile Boilerplate」を紹介します。 「Mobile Boilerplate」はjQuery MobileやSencha Touchなどと相性がばっちりだそうです。 Mobile Boilerplate [ad#ad-2] Mobile Boilerplateの特徴 クロスプラットフォーム対応（Android, iOS, Blackberry, Symbian） CSSはIE Mobile 7をターゲット ホームスクリーンアイコン（Android, iOS, Symbian） ビューポートの最適化（Opera Mobile, Android, iOS, IE, Nokia, Blackberry） ビューポートのスケ
メイキング「NERV極秘資料 - 電力使用状況」こと技術解説 - 甘味志向＠はてな
NERV極秘資料 - 電力使用状況 先日、東京電力の電力使用状況をエヴァンゲリオン風デザインで表示するWebサイトを作ったものが、あちこちで反響を頂きました。 ねとらぼ：「NERV専用監視装置」で東電の電力状況をチェック エヴァ風サイト登場 - ITmedia NEWS NERVの一員になったつもりで節電！ エヴァ風電力使用状況メーター | ギズモード・ジャパン Twitterでは16000以上ツイート頂けたようです。 http://topsy.com/kanmisikou.net/lab/power/ こちらの、はてなブックマーク週間ランキングでもIT・コンピュータカテゴリ2位を頂きました。ありがとうございます。 http://b.hatena.ne.jp/ranking/weekly/20110321/it これだけの反響を頂きましたし、せっかくなのでWebアプリを作る工程を解説します
ついに出た！Chrome版「Page Speed」の使い方
2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。 「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役立つツールです。 この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。 ぜひ、ご自身のサイトの改善に役立てていただければと思います。 そもそも、なぜサイトの表示速度を速くする必要があるのか？ 例えば、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1％減少する」といい、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20％減少する」と言われます。 また、GoogleはWebページの読み込み速度をアルゴリズムに取り入れたことを発表しています。 大手サイトや大規模なECサイトに限らず
25 Examples of Wireframes and Mockups Sketches | inspirationfeed.com
You are here: Home » Inspiration » Design Elements » 25 Examples of Wireframes and Mockups Sketches 25 Examples of Wireframes and Mockups Sketches Written by Igor Ovsyannykov on Feb 14, 2011 | 0 Comments Would you start building a website without blueprints? If you said yes, good luck with that. If you said no, then you are 100% right! Before building any website you have to have an idea of how th
マンネリ化から抜け出し、新鮮なウェブデザインを生みだす10のアイデア
いつもの同じようなデザインから離れて、新鮮でユニークなウェブデザインを生みだすために役立つ10のアイデアを紹介します。 10 Ideas for Creating Innovative and Unique Web Designs [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 カンバスはブランクから始める Photoshopで作業をはじめる時は、白ではなくブランクから始めるようにします。 白は白がある状態なので、何も無い真っさらな状態にします。 用意されたレイアウトに頼らない 960 Grid Systemなどのフレームワークを利用するのは確かに簡単で素晴らしいですが、そういった用意されたレイアウトには頼らずに自身で考えて作りだし、それを機能させる方法を見つけだしてください。 CMSは使わない 今日、WordPressを始めとする素晴らしいCMSが数多くリリース
海外Webサイト・海外Web屋の特徴
2013年3月23日 Web関連記事, 海外情報 以前「日本向けのウェブデザインというのはあるのか?」という記事を読み、「逆に海外のサイトは具体的にどう違うかなあ？」と思ったので、私が感じた海外のWeb業界やサイトの違いを並べてみます。海外向けのWebサイト制作を考えている方、海外で働こうと思っている方の参考になればと思います！ ↑私が10年以上利用している会計ソフト！ 追記：ここで紹介する「海外」とは、私が滞在・就労経験のあるカナダとオーストラリアを指しています。 海外Webサイトの特徴 URLを直接入力 日本ではURLバーに直接入力する人は少ないかと思われますが、海外では目的のブランド名がわかっている場合、とりあえず「.com」をつけてWebサイトを開きます。海外で .com が人気な理由はこのへんにありそうです。そのため、新たに会社やサービスを立ち上げるときは、そのブランド名とドメイ
2011年2月のこれだけ読めば分かる Web 制作者向け情報まとめ | ウェブル
先月の記事が相当人気でしたので今月もやります。また今月も人気なら来月もやります。 これは Web サービスに使えると思った情報 Web サービスを作りたくなるアイディア込みの記事 今年こそWebサービスを作りたい人に伝えたい５つのこと（＋番外編） – パパパパ この記事は精神からではなく、アイディアから Web サービスを作りたくしてくれる記事でした。私はこの記事を通して以下のことを学んだというか勝手に気づいたのでリストアップしておきますね。 ブログパーツを作って宣伝をする。 自動的に一周するサイクルを考える。 面倒くさいものを作ることで大手に参入されない。 時間を短縮する関係のサービスを作る。 食べログとぐるナビから Web サービスの現在と今後を見る [jp]グルメサイトは転換期に来てるんじゃないかなあという話 この一点に置いて、私は個人的にグルメ系の Web サービスとは誰かが得
Webデザインにある駆け引きとコダワリ
Webは人とデータに開放された世界 電子書籍の登場で、再び DTP デザインと Web デザインが比較されることが増えてきた印象があります。もちろん以前から「DTP デザインの呪縛」のようなものが Web デザインの世界で長く受け継がれています。随分 Web に最適な手法が盛り込まれているものの Dreamweaver のような老舗アプリは「DTPデザイナーでも Web サイトが作れる」というコンセプトが今も残っています。Webデザイナーは表現の仕方の違いからフラストレーションをためている方もいると思いますし、発注者側も DTP と Web の違いを伝えてもらっていないことからコミュニケーションに困っている場合もあると思います。 紙には物理的な境界線があることから情報量に限界がありますが、完全に隔離された世界を作ることができます。その世界は紙という媒体によって完全に守られていて、デザイナー
今年こそWebサービスを作りたい人に伝えたい５つのこと（＋番外編） - パパパパ
長くなったので目次を作りました。 1.アイディア出しより前にするべきたった１つのこと 2.あなたが狙うべきテーマは？ 3.成功するサービスは何が違うのか 4.外さないサービスの実例と僕の実体験 5.僕が考える究極のWebサービスとは 番外編.サービスを作ることと、稼ぐは別物 - アフィリエイトに取り組んだら売上が月3,000万円になった話 まえがき 最近、個人でWebサービスを作りたい人がとても増えている気がしています。僕は個人開発者として、最近リニューアルしたばかりのQ&Aなうや書き起こし.comなど、これまで30以上のWebサービスを作ってきて、失敗したりちょこっとうまくいったりした経験が、これからWebサービスを作りたい人に少しは役に立つことがあるんじゃないかと思ったので、僕なりにWebサービスを作る上で気をつけているポイントを書き残すことで、僕と同じ失敗を避けて、うまくいくWebサ
「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単！ スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1）HTMLを書くだけでモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
サイトの「目的と構成」を、まず図解する 第1回 | 1万円で真似できる“戦略的サイト運用術” - 小さく作って速く改善
このコーナーでは、Webサイトを1万円で「小さく」作って、それを運用しながら効率良く改善・最適化していく方法を解説する。 「SEO」「アクセス解析」から、「Webマーケティング」「CMS」、さらに「UX」「IA」「フロントエンド技術」まで……。とにかく覚えることが多いWebの世界。専門性を高めるのも大事だが、すべてはつながっていることを忘れないようにしてほしい。分業は組織がスケールするための工夫の一つに過ぎない。完璧を目指さず、もっと力を抜いて、バランスの取れた効率が良い、Webサイトの構築・運用方法を提案したい。それも抽象的な方法論ではなく、具体的でマネができる実践的な方法で。 そこで、サイトを戦略的に安価に短期間で立ち上げ、運用しながら最適化していった過程と結果を、具体的に紹介していく連載を始めることにした。数億円規模の各種プロジェクト経験から得たノウハウをもとに、小さく安価に実現でき
Useful Web Services, Tools and Resources For Web Designers — Smashing Magazine
We know how hard it is to find good useful tools that all of your developers and designers out there spend hours searching for. And for that reason, we’re regularly collecting useful online web services, tools and resources — little time-savers that can boost every designer’s workflow and save time that would otherwise be required for mundane tasks. You might have seen some of these tools in our T
効果的にコンテンツを配置する代表的な3つのレイアウトとは
ウェブデザインでもよく使用される、ユーザーの視線の動きを予測し、効果的にコンテンツを配置する代表的な3つのレイアウト、グーテンベルグ ダイアグラム、Zパターン、Fパターンを紹介します。 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 グーテンベルグ ダイアグラム Zパターン レイアウト Fパターン レイアウト Pattern of Focal Points -情報の階層化 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムとは、均等に配置された同種の情報を見るときの視線の動きを一般的なパターンにしたものです。 これは特に、テキストの比重が高いコンテンツにはまります。 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムは4つの象
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://designaholic.cc/2011/03/webweb21.html
http://designaholic.cc/2011/03/html535web.html
WEBディレクターがやってはいけない7つの事。｜designaholic -Creative Column-
http://e0166nt.com/blog-entry-847.html
