タグ

web制作に関するmellow_punchのブックマーク (247)

  • Webサイト価値ランキング | ウェブサイト価値ランキング | ブランド戦略通信│トライベック・ブランド戦略研究所

    下表は、Webサイト価値ランキングである。 最も高かったのは全日空輸でWebサイトの価値は1,079億円あった。2位はパナソニックで883億円、3位はトヨタ自動車で723億円、4位はNTTドコモで603億円、5位はホンダで570億円と続く。 上位には運輸・レジャー、電子・電機、自動車・バイク、情報・通信、などの業界が並ぶ。 ※調査内容の詳細はこちら ※2010年のランキング結果はこちら (注)単位は百万円。Webサイト価値=売上価値+情報価値(=閲覧価値+行動価値) 順位企業名・ブランド名Webサイト価値売上価値情報価値閲覧価値行動価値

    Webサイト価値ランキング | ウェブサイト価値ランキング | ブランド戦略通信│トライベック・ブランド戦略研究所
  • Googleペナルティ判定フローチャート

    私は最近、Googleのウェブマスター 公式ヘルプフォーラムにて回答を行うことにこっている。 サイト運営者がGoogleのランク付けなどについて質問をする場だ。 回答する人は基的には一般人だが、必要に応じてGoogleの社員の方が回答をすることもあったり、Googleの公式発表が行われることもある。 サイト運営者であれば、定期的に見ておくなりRSSリーダーに登録しておくとよいだろう。 さて、今回の記事はウェブマスター 公式ヘルプフォーラムに一番よくある質問に答えるものを書いてみることにする。 一番よくある質問とは何かというと。 「ペナルティを受けたようなのですが、どうすればいいのでしょうか?」 である。 サイト管理者にとって順位が下落するというのは死活問題だ。 だから、この質問が毎日のようになされるのはある意味当たり前だろう。 それに毎回答えるのも結構大変なので、これに答えられるフローを

  • Implementing a Fixed Position iOS Web Application - Google Mobile Developer Products - Google Code

    Implementing a Fixed Position iOS Web Application Ryan Fioravanti December 2010 Background Creating a Suitable Layout Animating the Scrollable Content Animating the Scrollable Content With Momentum Halting a Scrolling Element on Touch Conclusion Background Here at Google, we're constantly pushing the boundaries of what's possible in a mobile web application. Technologies like HTML5 allow us to bl

    mellow_punch
    mellow_punch 2011/07/28
    iOs版gmailの画面上下の固定要素の配置方法
  • パララックス効果についてのメモ

    当サイトのアバウトページのリニューアルを行なうにあたって、ウェブページにおけるパララックス効果について考察したことのまとめ。 以前制作した、視差効果を説明するためのFlash。 ●「PAINT」モードでは全てのオブジェクトが同じ速度で移動するため、全てが同じZ位置に配置されているように見える。結果的に、背景は平面的な書き割りであるかのように感じる。 ●「SET」モードでは手前の柵と、奥にあるオブジェクトのスピードに差が生まれ、多少奥行きがあるように見える。しかしスピードの設定が適切ではないため、木や雲などは模型のように小さく見え、背景はまるで作り物のセットであるかのように感じる。 ●「REAL」モードでは各オブジェクトのスピードの差が更に大きくなる。木や雲などはより遠ざかって見え、より現実のスケール感に近づいたように感じる。列車の車窓から見る風景とはこんな具合だろうか。 パララックス効果ま

    パララックス効果についてのメモ
  • twihelp.me

    twihelp.me 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

    mellow_punch
    mellow_punch 2011/07/28
    ブラウザ判別
  • IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog :: Diary

    最近の更新履歴 2011-12-07 Ver 1.3.2 リリース jQuery 1.7.1に対応しました。 2010-12-27 Ver 1.3.1 リリース fixed 要素がブラウザ表示エリアから隠れ1度非表示状態になると、ウィンドウをリサイズし表示エリア内におさめても非表示状態が続いてしまう不具合を修正しました。 2010-11-14 Ver 1.3.0 リリースしました。exAPI ベースの実装に変更しました。サイズに auto を指定できるように変更しました。 2009-12-08 Ver 1.2.2 リリースしました。IE6 にて fixed 対象要素を非表示にしても表示されてしまう不具合を修正しました。Ver 1.2.1 でサイズを明示せずプラグインを実行すると fixed されない不具合を修正しました。 more jQuery exFixed を使用すると、IE6 で p

    IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog :: Diary
  • IE6でposition fixedを利用する方法 fixed.js & jQueryプラグインexFixed.js | 知らないはリスク

    珍しくFlashネタです^^ つい最近Flashのフローティングブログパーツを作る機会があったのですが、 スクロールしても画面に固定されるposition:fixedがIE6に対応してないことを知って 対応させるために調べたものを共有します。 ■状況 ブログパーツといってもサイト内で利用するキャンペーン用のブログパーツでした。 サイトにアクセスすると自動的に画面に出現し、動きまわるという要求でした。 ■実装にあたって利用した物 昔Flashのフローティングブログパーツを作った際は1からすべてJavaScriptを組み、 ちょこちょこブラウザ対応とか検証とか大変だったのですが、今はカヤックさんが公開している ブログパーツフレームワーク 「suzunari」というのがあったので利用させていただきました。 Blogparts Framework suzunari http://coderepos

  • HTML5 でやりがちな間違い

    HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes : HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日語にしたものではあり

    HTML5 でやりがちな間違い
  • Champions for meaningful progress | dentsu APAC

    The integrated growth and transformation partner to the world’s leading organizations, nurturing and developing innovations that drive outcomes. We push the boundaries of business transformation and sustainable growth for brands, people and society. Dentsu increases the potential for innovation to happen, creating experiences that can enrich every business. See what our global team of innovators a

    Champions for meaningful progress | dentsu APAC
  • 403 Error - Forbidden

    403 Error 現在、このページへのアクセスは禁止されています。 サイト管理者の方はページの権限設定等が適切かご確認ください。

  • これは要チェック!豊かなユーザエクスペリエンスを与えるナビゲーション集

    ナビゲーションはウェブサイトにとって重要なエレメントであり、基盤となるものです。素晴らしいナビゲーションは豊かなユーザエクスペリエンスを与えます。 ユーザーは使いにくくない困惑されないナビゲーションを望み、シンプルなナビゲーションはたいていの場合、ダイナミックなものよりユーザフレンドリーなものです。ここではダイナミックでクリエイティブなナビゲーションの素晴らしいインタラクションと若干の欠点をSmashing Magazineから紹介します。

    mellow_punch
    mellow_punch 2011/07/19
    パララックスサンプル
  • スクロールに応じて要素がアニメーションする、視差効果(パララックス)を取り入れたWebデザイン例とTipsいろいろ - かちびと.net

    スクロールに応じて要素がアニメーションする、視差効果(パララックス)を取り入れたWebデザイン例とTipsいろいろ - かちびと.net
    mellow_punch
    mellow_punch 2011/07/19
    パララックスサンプル
  • パララックス効果を使ったウェブデザイン | | DesignWalker

    パララックス効果って、あまり聞き慣れない言葉ですが…。 初期の横スクロール型のテレビゲームなどでよく使われていた視差効果を使って奥行きを出す技法だそうです。 いくつかのレイヤーを、それぞれ違った速度でスクロール(奥にあるレイヤーはゆっくり、手前にあるレイヤーは早くスクロール)させる事で、視差効果を与えて奥行きがあるように見えるのだそうです。 今回は、このパララックス効果を上手にウェブデザインに応用サイトをいくつかまとめてみました。 How to recreate Silverback’s parallax effect まずは、パララックス効果をウェブデザインに応用する方法から。ブラウザの横幅を変えてみると、4つのレイヤーに配置されているPNG画像がそれぞれスクロールの速度が違って奥行きがあるように見えます。サンプルコードも公開されているので、挑戦してみてはいかがでしょうか。CSSのbac

    mellow_punch
    mellow_punch 2011/07/19
    パララックスサンプル
  • HTML5 におけるアウトラインに関して簡単解説

    HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは? アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう

    HTML5 におけるアウトラインに関して簡単解説
  • HTMLとスタイルシート(CSS)の業務スキルレベル 判別表 (5段階) - 主に言語とシステム開発に関して

    スキルチェックの目次へ HTMLおよびスタイルシート(CSS)を利用したWebページ制作の,簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。 これは,「Webページをコーディングして作る人」全般に当てはまる。 レベルは,0から4までの5段階。 (0) 非エンジニア (1) 初学者(入門書を学習してゆく段階) (2) ノーマル(基礎的な知識があり,ある程度の画面を作れるようになった段階) (3) 中級者(Webアプリの開発プロジェクトで1人月としてカウントできる水準) (4) 上級者(メインPG/デザイナとして,Web UIの主担当を任せられる水準) Webアプリのプロジェクト開始時に作業振り分けをするにあたって,新規メンバ全員にこれを渡して回答してもらうという用途を想定。 なお,システム開発上のスキルをチェックする事が主眼なので,アーティスト(

    HTMLとスタイルシート(CSS)の業務スキルレベル 判別表 (5段階) - 主に言語とシステム開発に関して
  • みなみ野フォトログ AddThisウィジェットをカスタマイズ

    [2011.1.7] 注:現在のAddThisのカスタマイズ方法は変更されているようです。 いくつかのカスタマイズについては、こちらの記事に更新版を記載しています。 いまさらな感じもするし、日じゃあまり使えない気もしましたが・・・。 いろいろなブックマーク(もしくはRSS購読)オプションにアクセスできる、 AddThisというサービスを当ブログにもつけてみよう、と思ってチャレンジしてみました。 日で使っている人が多いブックマークサービスには あまり対応してないんですが、一応導入方法なんかを記事にしておきます。 当ブログのテーマとは関係ないですが、 興味のある方は続きをどうぞ。 まずは、AddThisのサイトへ。 初めて使う方は登録が必要ですが、 後で登録できるのでとりあえず 「Get Your Button」をクリックします。 ボタンの種類を選びます。 ブックマーク用のボタンか、RSS

    みなみ野フォトログ AddThisウィジェットをカスタマイズ
  • [CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル

    iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 Adaptive & Mobile Design with CSS3 Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページの確認 HTML CSS Media Queries 完成したデモの確認 デモページの確認 チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。 このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。 デモページ 左から、ノーマル、ナロウ、ス

  • サイトやブログの運営でよく使いそうな.htaccessの設定のまとめ

    ウェブサイトやブログの運営でよく使いそうな便利な.htaccessの設定を紹介します。 こういうまとめは定期的にあがってきますが、やっぱり必要なのでシェアします。 10 useful .htaccess snippets to have in your toolbox [ad#ad-2] 下記は各ポイントを意訳したものです。 URLからwwwを削除 hotlinkingの防止 feedをfeedbunnerにリダイレクト カスタムエラーページ ダウンロードファイルの処理 PHPのエラーのログ URLからファイルの拡張子を削除 ディレクトリのファイルリストを見せない ファイルを圧縮して軽量化 文字コードの指定 URLからwwwを削除 SEOなどの理由で、URLからwwwを削除して使うことがあるかもしれません。このスニペットは、あなたのウェブサイトにwww付きでアクセスしてきてもwww無しに向

  • 最近のインターフェイスデザインから学ぶ、7種類のボタンデザイン

    ユーザーのアクションを誘う購入や送信や検索ボタンなど、最近のインターフェイスデザインでよく見かける7種類のボタンデザインを紹介します。 Common elements used in interface button design [ad#ad-2] 下記は各ポイントを意訳したものです。 また、元記事ではそれぞれのボタンを作成するPhotoshopのチュートリアルも掲載されています。 1. テクスチャを使ったボタン 2. パターンを使ったボタン 3. 3Dを使ったボタン 4. 1ピクを使ったボタン 5. 背景をインデントしたボタン 6. グロウを使ったボタン 7. ハイライトを使ったボタン 1. テクスチャを使ったボタン テクスチャはボタンにわずかな奥行きを与え、クリックが可能であることが分かるようにする素晴らしいテクニックです。

  • [CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ

    IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント:スタイルシート Conditional classnames -条件付きコメント:class名 CSS hack -安全なCSS hackとは 条件付きコメント:class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント:スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ