紙媒体でよく見かける、見出しの両端に水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 Centered Heading Overlaying a Horizontal Line with CSS [ad#ad-2] 下記は各ポイントを意訳したものです。 実装のポイント Method 1: 疑似要素 Method 2: 隣接兄弟セレクタ Method 3: 線形グラデーション Method 4: 最後にjQueryを使ったメソッド 全部のデモ 実装のポイント 実装するにあたり、下記の点に留意します。 画像は使用しない。 余分なHTMLは使用しない。 Scalable: フォントのサイズを大きくしても調整される。 Fluid: 可変。 JavaScriptは使用しない。 Method 1: 疑似要素 見出しの疑似要素で水平線を配置し、spanタグを内側に配置し水平線が中央
Adobe® Edgeは、現在アドビが開発中の新しいWebアニメーションツールです。HTML5、CSS3、jQueryなどのWeb標準技術を使って、魅力的なアニメーションを効率よく作成することが可能です。Adobe Edge Preview(プレリリース版)を今すぐダウンロードして、さっそくその優れたパワーと操作性をお試しください。 タイムラインベースの直感的な制作環境でアニメーションを作成 精度の高いアニメーションコンテンツを1から作成することも、既存のドキュメントやグラフィックファイルを読み込んでインタラクションを追加していくことも可能。直感的な操作性や優れたパフォーマンスは、まるでFlashのタイムラインを使うような感覚です。 アニメーションコンテンツをマルチスクリーンで確実に表示 Adobe Edge Previewでは、AndroidまたはiOSプラットホーム、WebKit対
デザインもコーディングもプログラムもこなす、とあるWebデザイナーのポートフォリオサイトです。基本は自分自身のメモのために立ち上げたサイトです。何か情報に誤りがありましたら、コメントして頂けるか、お問い合わせからお知らせ頂けると幸いです。ソースコードを公開出来るようになったことなので、Tipsを投稿してみようかと思います。 こういうTipsを書くのは初めてなので、見せ方や段取りが悪いところが多々ありますが、お気づきの点があればこっそりご教授頂ければと思います。。。 最近、CSSでアイコンっぽい何かを作ることが自分の中で流行ってるので、リボン風見出しを紹介しようかと思います。 基本的に、なるべく不必要なタグは使わないように心がけています。 ケース1 section#case01 { display: block; margin: 0 auto 20px; width: 300px; back
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px~640px、横向きで480px~960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px(縦)を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px(横)で作成すれば問題ないといえますが、iPhone4、4SやAn
IE5.5・IE6が半透明PNGに対応してないために、半透明を使用したデザインのコーディングを諦める(または妥協)という苦い経験をしたことはないでしょうか。 そんな人のため(私のためでもありますが・・・)に、IE5.5・IE6で半透明PNGを使う方法をまとめました。 半透明PNGの使い方を覚えて頼れるコーダーを目指しましょう。 ※サンプルを確認するためにはIE6でご覧ください。 IE独自拡張のfilterを使う サンプル(使用前) ◇良いところ ・Java Scriptを使わず手軽に使用できます。 ◇悪いところ ・CSSで背景に指定したものには使えません。 ・クリッカブルマップが使えません。 ・div などのタグで対象画像を囲うため、場合によっては無駄なタグを追加する羽目になります。 ◇使用時の注意点 ・対象画像の幅・高さをCSSプロパティの width と height で必ず指定しまし
2010年7月24日、その同じ日に世界中の人が撮影した映像を集め、リドリー・スコットが製作総指揮となってドキュメンタリー映画にした「Life in a Day」以前このブログでも「明日撮影した動画が使われるかもしれない!世界中の7月24日の動画を集めてリドリー・スコットが制作する映画『LIFE IN A DAY』」としてエントリーしていました。 この全編がこのほどYouTubeにて公開されましたよ! まずはトレイラー。 そして先日YouTubeで公開された全編。 もちろんタダで観ることができます。 1時間35分くらいあるので、時間の有る時にでも観てください。 い、いちおう、DVD化もされているんですけどねw
■山岡士郎「やれやれ、これがフェラチオ?冗談じゃない」 1 以下、VIPがお送りします 投稿日:2011/11/03(木) 00:02:01.56 ID:EVuq4VNB0 ある日の風俗店 山岡「この店で一番人気のある女をつけてくれ」 店長「かしこまりました。彼女のフェラチオは絶品ですよ」 10分後 山岡「やぁ君か、究極のフェラチオを行うという風俗嬢は」 女「初めましてお兄さん☆楽しんでいってね♪」 山岡「愛想なんて振りまかんでいい。さっさとしゃぶってもらおうか」 3 以下、VIPがお送りします 投稿日:2011/11/03(木) 00:04:15.43 ID:TdZVZCNXO 期待 5 忍法帖【Lv=13,xxxPT】 投稿日:2011/11/03(木) 00:07:09.40 ID:wT+WwZYq0 ええい続きはまだか! 8 以下、VIPがお送りします 投稿日:2011/1
Google Developer Day 2011に参加しました。 参加したセッションのメモを書いときます。 (追記 2012/01/14) Googleから動画が公開されました。 http://www.youtube.com/watch?v=MY06xnSZyaw:moive ※このセッションで解説された内容に一部変更点があるとのことなので、こちらも合わせて参照下さい。 (追記ここまで) HTML5 のオフライン機能(Eiji Kitamura) @agektmr 東京 - Google Developer Day 2011 http://www.google.com/intl/ja/events/developerday/2011/tokyo/agenda/session_1001.html スライド 動的なデータの保存 Web Storage (localStorage / sess
Creating really interesting and effective design for your project is a complicated task, which requires skills and a lot of patience along with practice. Before you start working on your design, you have to work out the detailed draft and compile all the materials you need. One of the things that you may need is the collection of Free Grunge Textures that you can easily use in your designs for mak
第6回 GAE上でWordPressを動かす 萩原 巧 リトルソフト株式会社 中越 智哉 株式会社ナレッジエックス 2010/6/3 今回は趣向を変えて、PHPで書かれていて広く普及しているブログ作成アプリケーション「WordPress」をGAE上で動かしてみます(編集部) 連載6回目にあたる今回は、今までとは少し趣向を変えて、実際に広く使われているPHPのオープンソースソフトウェアがGAE上で動作するかについての検証を行い、動作の実現性や問題点について言及するとともに、画面表示やデータベースアクセスを含めた動作について検証を行っていく過程を通して、PHPのアプリケーションをGAE上で動作させるために必要となるテクニックなどを紹介していきます。 GAEにインストールするアプリケーションについて GAE上にて動作検証を行うアプリケーションとして、星の数ほど(大げさですが...)存在するPHP
使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 2011年11月02日- nicescroll : stylish scrollbars ios look-alike | jQuery Plugins 使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 OSによってスクロールバーデザインが違ったり、常に表示されていたりというのが当たり前でしたが、独自スクロールバーにするのが最近のトレンドっぽいですね。 今回紹介するプラグインを使えばiPhoneのあのスマートなスクロールバーをPCブラウザでも実現出来ます。 エレメントにカーソルを合わせると次のような独自実装のスクロールバーが現れます スクロールすると当然、スクロールバーの位置も変化 時間を置くと勝手にスクロールバーがフェードアウトで消えます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く