ご注意 現像料及びプリント料金は別途必要です。 35ミリネガカラーフィルム(フルサイズ)に限ります。 150万画素相当のJPEGデータで書き込めます。１枚のCDにフィルム５本分、または最大２００コマまで書き込めます。 料金はネガシート１本につき、３８０円（税込）となります。 一度書き込んだCDへの追加書き込みはできません。 コマ指定はご遠慮ください。シートの順番指定、ピースの入れ替えは対応させていただきます。 白黒フィルムのご注文はご遠慮ください。

ニラを適度な大きさにザク切りにしベーコンを一口大に切っておく。熱したフライパンにゴマ油を適量入れてベーコンを焼き色がつく程度に炒めてからニラを加えサッと炒めて溶き玉子を流しいれザックリと炒め混ぜて軽く塩コショウをし一旦お皿によけておく。

Typechartは、WindowsやMac環境でタイポグラフィがどのように見えるかと、それを実装するスタイルシートをダウンロードできるサイトです。 Typechart - Browse Web Type, Grab CSS. タイポグラフィのカテゴリは、以下の３つに分かれています。 typeface Arial / Helvetica Cambria Georgia Lucida Grande Lucida Sans Unicode Trebuchet MS Verdana font size small medium / body large/ heading extra large emphasis normal bold italic uppercase タイポグラフィは、それぞれWindowsとMacでの表示を切り替えることができ、「Get CSS」ボタンをクリックすると、そのタ

Flashを使用しないで、画像ギャラリーを実装するスクリプトやスタイルシートの紹介です。 Slideshow 2 minishowcase photo starfield simulation gal

シンプルでミニマルだけど、インパクトのあるサイトデザインを収集したポータルサイト「minimalsites」から、レーティングの高い10のサイトを紹介します。

最近リリースされたものを中心とした、細部まで丁寧にデザインされたWordPressのテーマファイルの紹介です。

CSS Stacked Bar Graphs demo こんなグラフを見たら、「実装は画像」と思ってしまいますが、テキストや色などの修正が手軽であるという利点は大きいです。 実装にはulとdlが使用されており、各項目やデータの値はテキストのため簡単に変更ができます。 デモでは棒グラフを二つ重ねていますが、増やすことも可能でした。 <textarea name="code" class="html" cols="60" rows="5"> <dt>Mon</dt> <dd class="p36"><span><b>36</b></span></dd> <dd class="sub p30" ><span><b>30</b></span></dd> <dd class="sub2 p21"><span><b>21</b></span></dd> </textarea>

Styled Menuから、IE6/7, Firefox, Opera, Safari, Chromeに対応した、フリーのナビゲーションを紹介します。 Styled Menu ナビゲーションはリスト要素で実装されており、ラベルを日本語に変更するなどカスタマイズも可能です。

david walsh blogから、テキストリンクをアニメーションでスムーズにスライドさせるスクリプトを紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function(){ $('a.nudge').hover(function(){ //mouse in $(this).animate({ paddingLeft: '20px' },400); }, function(){ //mouse out $(this).animate({ paddingLeft: 0 }, 400); }); }); </textarea>

ウェブサイトの第一印象を決める大切な21のポイントをVandelay Website Designから紹介します。 21 Factors that Influence the First Impression of Your Website's Visitors 下記は、それを簡潔にした意訳です。 ロード時間 ロード時間はユーザーをいらいらさせる大きな要因です。少しでも早くロードするように設計をします。 エラーメッセージ エラーメッセージが表示されアクセスができないと、ユーザーは二度とアクセスをしないでしょう。 カラー サイトのデザインは第一印象の重要なファクターです。正しいカラーコンビネーションを使用して、効果的で適切なカラースキームを使用します。 ロゴ もう一つ重要なファクターはロゴです。ブランディングを考慮し、信頼感を与えるロゴを使用します。 ヘッダ ヘッダも強い印象を与えます。魅力

2009年のウェブデザインのトレンドで押さえておきたい10のポイントをSmashing Magazineから紹介します。 Web Design Trends For 2009 1. Letterpress プレスしたようなタイポグラフィ。

スクリプトを使用せず、スタイルシートで実装するタブ型・ドロップダウン型・ドロップライン型・フライアウト型のナビゲーションをCSS Menusから紹介します。 CSS Menus Sliding doors-tabb [...]

スタイルシートをベースに実装するボタンやナビゲーションのチュートリアルをinstantShiftを紹介します。 30 Excellent CSS Based Navigation and Buttons Tutorial ボタンを実装するチュートリアル集

シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Accessible News Slider スムーズなアニメーションが気持ちいい、アクセシブルなスライダー。 Easy Slide

ウェブデザインにおける明確で効果的なコミュニケーションの取り方をSmashing Magazineから紹介します。 Clear And Effective Communication In Web Design 下記は、簡潔に意訳したものです。 1. コミュニケーションのアプローチ方法 ウェブサイトの来訪者とコミュニケーションを取るためのアプローチ方法をいくつか紹介します。 テキスト 見出しやコンテンツ内にかかわらず、来訪者はテキストをメッセージとして受け取ります。コミュニケーションにおいて、極めて重要な要素です。 画像 画像は、テキストよりもすばやくメッセージを伝えるときがあります。画像を作成する際は、メッセージを魅力的に伝えられるようにします。 タイトルとヘッダ タイトルとヘッダは、来訪者に主要なポイントと考えを伝える重要で効果的なものです。 アイコン アイコンはウェブデザインの特徴的

全幅970px（960+10px）の6カラムと12カラムのグリッドをベースにし、汎用的に展開できるように設計されたグリッドシステム「The Golden Grid」を紹介します。 The Golden Grid ベースとなる6カラムと12カラムのグリッドは、下記のようになっています。 6カラムの構成 1カラム：150px、マージン：10px 150*6+10*7=970px 12カラムの構成 1カラム：70px、マージン：10px 70*12+10*13=970px

jQuery, Prototype, MooToolsのように多機能ではなく、一つの機能に特化したシンプルなJavaScirptのライブラリをSmashing Magazineからいくつか紹介します。

検索フォームを素敵なデザインにスタイリングする、クロスブラウザ対応のスタイルシートをCss Finestから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <form id=”searchform1″ method=”get” action=”" > <input class=”isearch1″ type=”text” name=”keywords” id=”keywords” /> <input class=”ibutton1″ type=”submit” value=”" /> </form> </textarea>

アクセシブルで、美しいフォームを実装するためのチュートリアル集をnoupeから紹介します。 Beautiful Forms - Design, Style, & make it work with PHP &a [...]

パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre

2010年に向けて押さえておきたいウェブデザインのトレンドの14のポイントをWeb Design Ledgerから紹介します。 Web Design Trends for 2010 下記は、その意訳です。 また、同著者の別エントリーに対応したものもあります。 これはもう使用しない方がいいウェブデザインのトレンド はじめに 1. 特大のヘッダとロゴ 2. 手描き風のデザイン 3. 大胆で大きなフォント 4. タイポロジー 5. 1ページ レイアウト 6. インパクトがある画像 7. パースの活用 8. インタラクティブで直感的なデザイン 9. モーダルボックス 10. ミニマリズム 11. オーバーサイズのフッタ 12. レトロ 13. イントロボックス 14. 雑誌風のレイアウト はじめに このリストは、2009年に人気が高かったものからさらに発展するであろうトレンドを紹介しています。 ト

Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。

Twitterをサイトに組み込むチュートリアル＆サンプル集。 当サイトにて、色々とTwitterの機能を実装する仕組みを色々と紹介しましたが、それらをまとめてみました。 JavaScript によるTwitterメッセージの埋め込み Twitterのメッセージをページに載せられるJavaScript「Twitter.js」 JavaScript 単体でTwitterのメッセージをサイトに簡単に埋め込み可能 サイトにリアルタイム更新＆検索機能付きTwitter窓を設置できるjQueryプラグイン「Juitter」 画面遷移なしにTwitterステータス表示＆検索ができるウィジェットを設置可能。 PHP製のウィジェットや投稿用サンプルコード等 Twitterのメッセージ表示などができるPHP＆AJAXなブログパーツ実装が可能な「Ptwix」 Twitterのメッセージ表示用のリロード機能付きウ

EmChart | Aloe Studios Blog Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser.CSSのem指定のサイズが一発でわかっちゃう「EmChart」 基本のサイズが24ピクセルで、9px にしたい場合、0.375emにすればよい、というのが簡単に分かるようになっています。 これはなかなか便利そうですね。チャートのダウンロードも可能です。 関連エントリ サイト上でCSSによるフォントスタイルを確認できる便利ツール サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」