Acest website foloseste cookies. Continuarea navigarii reprezinta acordul dvs. Politica Cookies
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ&ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
こんにちは、NHN Japanのマッチングサービス事業部でマーケティングを担当しているotakeです。 今回は担当サービスの運用業務と並行して出稿も担っている忙しいディレクターさんやこれから出稿業務に携わる方のために、チャッチャと読んで現場ですぐに使える実戦的なナレッジの一部を「バナー広告制作の基礎知識」として書かせていただきます。 当事者意識を持たせるAttentionを考える ユーザーの購買行動において、バナー広告が担うポジションはAttention(注意)喚起にあたりますが、一般的にバナー広告は誰に注意を促すものなのでしょうか。 検索から目的を持って能動的に何かを探しているわけではないが、潜在的な関係性を秘めているのがバナー広告の対象となる潜在層。ここに位置する対象には”この広告はあなたに関係あるものです”、”おそらくあなたの話です”といった潜在欲求に気づきを与える「当事者意識を高め
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる(?)ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
Webフォントに関して調べ物をしたので 個人的なメモ。少し利用頻度があがって 来たので探しやすいようにまとめておき ます。まだちょっと使い慣れてないので もう少し勉強しないとダメですね・・ スマフォ向けのリソースもあります。 というわけでWebフォントに関するメモです。以前触りだけしか書かなかったのでもう少し深く調べておこうと思い記事にしました。ので、過去の記事と結構重複します。 最低限の知識最低限かどうか分かりませんけどw 少し不明瞭な点もありますので間違いがあればご指摘頂けると幸いです。 ライセンスまずライセンスですが、通常、Webフォントとして利用するには当然フォントの著作者次第になります。 Webフォントとして使うにはサーバーにフォントファイルをアップロードしてcssでファイルのパスを指定して利用するので、フォントファイルが誰でも手に入れられてしまう事になります。(アイコンなんかも
このエントリーはHatena::Staff Advent Calendar 2011のために書かれたものです はじめまして。最近は映画けいおんが生き甲斐のuedayです。 11月8日にクローズドベータリリースした「はてなブログ」のデザイン全般を担当しました。裏側というほどの話ができるか微妙ですが書いてみます。 開発チーム 開発チームは、エンジニアid:cho45/デザイナーid:ueday/ディレクションid:onishiです。デザインはクオリティチェックをid:tikedaに依頼して、適宜フィードバックを貰いながら進めていきました。このほかに制作スタッフが数名います。プロジェクトが立ち上がったのが8月1日だったので、開発期間は約3ヶ月です。アルファ版完成が異常に速く、開発2日目か3日目で記事投稿ができるようになり、5日目でアルファ版を社内リリース。choさんほんとすごいなって思いました
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
利用も簡単にでき、スタイルシートの勉強にもなる、CSS3で実装されたボタンを紹介します。 ほとんどのものがclassを追加するだけで、簡単に利用できます。
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
2017年7月14日 Webデザイン マーケティング専門の人が「Webサイトにデザインなんて関係ないぜ!すべてはプロモーションとコンテンツ次第なんだぜ!」と豪語していたのでそれに反論を。もちろん彼の言っている事はWebサイトを世に広めるためにはとても大切な要素です。でもだからといってデザインが全く関係ないというのは極論すぎます。という事でWebデザインの重要性について考えてみたいと思います。 ↑私が10年以上利用している会計ソフト! なぜWebデザインは重要なのか? 以前「ECサイトの色やデザインと購買意欲の関係」という記事で触れたとおり、ECサイトにおける約半数のオンライン消費者が、全体のデザインを理由にそのサイトを再訪問しないようです。この結果から、多くのユーザーがWebサイト上のデザインを重要視している事がわかります。では具体的にWebデザインはどのような役割があるのでしょうか? ユ
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート45 ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ56 Ajaxスタ
☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。???(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く