バスタオルやハンドタオル、手ぬぐいなどを折り畳んで、かわいい動物をつくる方法を紹介します。 切ったり縫ったりはせず、折り畳むだけでできます。 海外のホテルに泊まった時に見たことあるけど、かわいく畳んであるともったいなくて使えないですよねｗ

fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。

iOS7のUIにはさまざまな特徴的なエフェクトが使用されており、その中の一つ「ブラーエフェクト」をマスターするためのPhotoshopの動画チュートリアルを紹介します。 iOS7 Blur effect 磨りガラスのような白いパネルをアニメーションで表示し、背景をぼんやりとさせることで直前のアクションにストーリーを与えます。 もちろん、見た目が美しいという効果もあります。

商用でも無料で利用できる、細部までしっかりデザインされたベクター形式のアイコンをIcon Edenから紹介します。

「\」「9」「*」「_」の四文字だけで、IE6, IE7, IE8を区別するCSSハックをNettuts+から紹介します。 <textarea name="code" class="css" cols="60" rows="5"> body { color: red; /* all browsers, of course */ color : green\9; /* IE8 and below */ } </textarea>

img要素で配置した画像をマウスのドラッグとホイール操作で、商品や風景をぐるっと360度回転させるスクリプトをPetr Vostřelから紹介します。

スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。 スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用する ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS本来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex

Simple Horizontal CSS Drop-Down Menu Demo シンプルなドロップダウン。 対応ブラウザはIE5.x+, Fx1.5+, Op7+, Safari2+, Chromeとなっており、IE6以下用のみJavaScriptを使用して動作させています。 ライセンスはGPLとのことです。

今運営しているブログをより魅力的したい、これからブログをつくる、という人向けにブログに必要な8つのデザインエレメントをSmashing Shareから紹介します。 8 Design Elements Your Blog Should Have はじめに 1. RSS/E-mail購読 2. 独自性のあるヘッダ 3. 分かりやすいナビゲーション 4. コメント 5. ソーシャルメディアのアイコン 6. グラフィックのガイドライン 7. スポンサーのスペース 8. リッチなフッタ はじめに ブログのユーザーを幸せにし、あなたのコンテンツに関心を抱くようにしておくために必要な特定のデザインエレメントがあります。 ユーザーは記事を簡単に読め、素早くコメントができ、TwitterやFacebookのアカウントでシェアできることを期待しています。 ブログのデザインはクリーンで、整合性のあるレイアウトを

フリーフォントはたくさんありますが、その中から厳選に厳選を重ねたハイクオリティなフリーのフォントをslodiveから紹介します。 Top 30 Free But Very Professional Fonts For Everyday Use In 2010 上記の元サイトより、いくつか紹介します。 ※各フォントごとにライセンスは異なります。

How to Mimic the iGoogle Interface demo iGoogle風のインターフェイスを実装にあたって、下記のポイントを実装してあります。 複数のウィジェットの実装。 ウィジェットの編集が可能。 ウィジェットは3カラムに配置され、ドラッグ＆ドロップで移動可能。 ウィジェットの色・タイトルの編集が可能。 ウィジェットには、HTML、テキスト、画像、フラッシュなどを配置可能。 サイトでは、画像ファイルを含む、スクリプトやHTMLファイル一式をダウンロードできます。

FancyZoomは、jQueryやPrototypeなどのライブラリを必要とせず、シンプルで快適に動作する画像拡大のスクリプトです。 FancyZoom FancyZoomの設置は、外部スクリプトとして記述し、bodyに「onload="setupZoom()">」を記述します。 あとは、拡大したい画像に下記のように、アンカーを記述するだけです。 <textarea name="code" class="html" cols="60" rows="5"> &lt;a&nbsp;href=&quot;image.jpg&quot;&gt;&lt;img&nbsp;src=&quot;image-thumbnail.jpg&quot;&nbsp;/&gt;&lt;/a&gt; </textarea>

広告掲載などに最適なパネルをページの下部からアニメーションで表示するスクリプトをEmanuele Feronatoから紹介します。 Create a dynamic content animated footer ad for your site in just 9 jQuery lines デモページ デモではページを表示した際に、下部からパネルがアニメーションでスライドしながら表示されます。 パネルはスクロールしても定位置に固定表示されており、非表示にするには「Close」をクリックします。 実装は簡単で、</body>の直前にパネル用のdiv要素を配置します。 HTML

CSS3で何ができるのかという「CSS3で何ができるの？　という時にみておきたいサイト集」という記事をとりあげました。 今回は、そのCSS3を実際どのように使うのか？　ウェブページに効果的に使用した例、陥りやすいワナとその対処方法をWeb Design Wallから紹介します。 CSS3 Examples and Best Practices 下記は各ポイントを意訳したものです。 はじめに テキストのエンボス効果 繊細な角丸とシャドウ アニメーションで回転するDVD 半透明のバー 角丸 微妙なテキストのシャドウ 陥りやすいワナと対処方法 はじめに CSS3の人気はいっそう高くなっています。実際CSS3の新しい機能はウェブに多くの新しい可能性をもたらします。 しかしながら、CSS3はまだ完全にすべてのブラウザにサポートされていないので、あまり興奮しないでください。 だからといって、CSS3を

prettyPhotoは、角丸のかわいい感じのフレームやパーツを使用した、画像を拡大表示するLightbox風のスクリプトです。 prettyPhoto 背景色、拡大表示時のフレーム、ローディング時のアニメーション、ボタンなど他のLightbox風スクリプトよりかわいくデザインされています。 prettyPhotoで画像を拡大表示するには、スクリプトを外部ファイルとして、画像箇所に下記のようにrel属性に「prettyOverlay(一枚用)」「prettyOverlay(ギャラリー用)」を記述します。 <textarea name="code" class="html" cols="60" rows="5"> <a href="fullscreen.jpg" rel="prettyOverlay" title="画像の説明"><img src="thumbnails.jpg" alt="

iBoxは、画像・動画・インラインコンテンツ・ドキュメント・フォームなどをLightbox風のエフェクトで表示するスクリプトです。 iBox v2 iBox - Lightweight inline popup Lightbox風のスクリプトは多数ありますが、その多くはjQueryやPrototypeなどのライブラリと一緒に設置しないと動作しなかったりしますが、このiBoxは単独で実装することができます。 また、容量も18.5KBと他の多くのスクリプトと比べ軽く、Packerを使用すると7KBになります。 iBoxの実装方法は、「ibox.js」と「ibox.css」を外部ファイルとして指定し、下記のコードを記述します。 titleは、キャプションとして表示されます。 画像 <textarea name="code" class="html" cols="60" rows="5"> <a

シンプルなものからグランジ風のものまで揃った、ポラロイドのフレーム素材をAmEeR-Saから紹介します。

「Next」ボタンで次の画像を表示 スクリプトは使いやすさとフレキシビリティを前提に開発されており、実装が簡単で、柔軟性をもったものとなっています。 スクリプトの特長 ブラウザのサイズ変更時に表示を自動調整。 アニメーションで軽快に動作します。 画像はバックグランドでキャッシュすることが可能。 言語、背景色、スライドの間隔などオプションで簡単に設定。 多彩なインスタンス。 多言語対応。 ※現在は日本語用の画像は未。 スライドショーは自動再生に対応。 キーボードでの操作も可能。 操作方法は拡大時の「？Help）」に掲載。 サーチエンジンにもフレンドリー。 スクリプトの実装方法は簡単で、jQueryを使用しますがjQueryの特別な知識は必要なく実装が可能です。 YoxViewの実装方法

ポートフォリオや写真ギャラリーサイトに最適な、シンプルでクリーンなデザインのCSSベースの無料のテンプレートファイル一式をSix Revisionsから紹介します。 Free XHTML Template Pack: Classic Luxury デモページ：Home テンプレートファイルの主な特長は下記の通り。 Photoshop用のPSDファイル付き。 ValidなXHTML。 jQueryを使用したモーダルウインドウ。 ドロップダウン型のナビゲーション。 Twitter, Facebookなどのソーシャルメディアのアイコン。 テンプレートは上記のHomeを含む3ページで構成されています。

繊細なテクスチャ、透明感のあるパネル、充実したフッタ、光源を模したグラデーション、1ピクラインにこだわったディテールなど最近のウェブデザインのトレンドを取り入れた、ウェブサイトのレイアウトを作成するPhotoshopのチュートリアルを紹介します。