個人でも商用サイトでも無料で利用できる、ウェブページ用のUI素材やテクスチャ・アイコン、email用のテンプレートなど数多くの素材を配布しているサイトを紹介します。 Box of Bundles [ad#ad-2] 多くの素材サイトでは、気に入った素材ごとにボタンをクリックしなければダウンロードできませんが、このBox of Bundlesは一括でダウンロードできます。 ダウンロードできるファイルはPSDだけでも69ファイルあります。
ブログやウェブサイトのパフォーマンス改善や運営・セキュリティに役立つ「.htaccess」の設定を紹介します。 .htaccess Files for the Rest of Us [ad#ad-2] 下記は各ポイントを意訳したものです。 リダイレクトとリライト オリジナルのエラーページ 特定のリソースへのアクセス制限 特定のIPのアクセス阻止 IEのレンダリングモードの設定 有効期限を設定してトラフィックを軽減 gzip圧縮の利用 リダイレクトとリライト リダイレクト サイトを移転したなど、永続的なリダイレクトには「HTTP301リダイレクト」で設定します。 転送先のURLは絶対URLで指定します。 Redirect 301 ^old\.html$ http://ドメイン/new.html リライト リライト(書き換え)をする場合は、下記のようになります。 RewriteEngine o
iPadのPSD素材の拡大:下部 [ad#ad-2] ダウンロードできる素材のフォーマットはPSDで、レイヤーが保持されたものとなっています。 Photoshopで開いたキャプチャ 素材の利用にあたっては個人でも商用でも無料で、バックリンクなども必要なく、できれば広めてください、とのことです。 詳しくはダウンロードファイルの「license-README-FIRST.txt」をご覧ください。
スタイルシートの制作、確認などに役立つ、便利なオンラインツールを紹介します。 [ad#ad-2] ジェネレーター:ベーシック系 ジェネレーター:ボタン、画像使わない系 制作補助、診断、確認 リファレンス、対応ブラウザなど ジェネレーター:ベーシック系
10 Lessons on Design We Can Learn From Apple [ad#ad-2] 下記は各ポイントを意訳したものです。 #1: Simple Is Better #2: 商品写真の使い方 #3: コントラストを効果的に #4: 簡単に妥協しない #5: Flashから離れる #6: フレンドリーに #7: グリッドの活用 #8: Learn moreコンテンツ #9: 一貫性 #10: ただのコマースサイトにしない #1: Simple Is Better 派手なデザインの「購入する」ボタンやグラフィックが満載のウェブページほど嫌なものはありません。それは取り散らかされただけの下品なページです。 Apple Store Appleのページは「less is more」の好例で、派手な広告やプロダクトであなたを攻めたてることはなく、むしろあなたが見るべき一つのもの
ミニサイズのピクセルフォントがダウンロードできるサイトを紹介します。 Fonts | p.yusukekamiyamane 個人・商用無料利用可。 Free Fonts by Cal Henderso
Psd Soft Carbon Text Effect [ad#ad-2] エフェクトはレイヤースタイルでセットされており、テキストを変更することで簡単にカーボンのエフェクトを与えることができます。
雑誌をめくる「Pege Flip」のエフェクトで画像を次々に表示するjQueryのプラグインを紹介します。 mLivre デモ [ad#ad-2] mLivreの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.mLivre.min.js"></script> HTML img要素をdiv要素で内包します。 <div id="demo1"> <img src="celestin/couverture.jpg" width="650" height="325" /> <img src="celestin/illustration2.jp
Designer Dailyの記事を参考に、Appleのウェブデザインからディテールを強化する9つのポイントを紹介します。 Creating beautiful web designs: 9 details that matter Apple [ad#ad-2] 下記は各ポイントを意訳し、Appleのサイトを例にしたものです。 ドロップシャドウ ドロップシャドウは、デザインに深さを与える素晴らしいテクニックです。しかし、計画的に使用しないと、とても素人くさい外見になってしまいます。 良いドロップシャドウを作るには、2つの重要なポイントがあります。 シャドウは繊細にする。 ページ内の光源は一貫したものにする。
ネガティブスペースとはホワイトスペース(空白)としてもよく知られており、コンテンツに占拠されていないエリアのことで、特定のアイテム間のスペースであるとも定義できます。 そんなネガティブスペースを巧みに使用したロゴデザインを紹介します。
「お世話になっております」、「了解しました」、「取り急ぎ、お礼まで」など、ビジネスメールでよく使用する言い回しの間違った使い方、正しい使い方など、ビジネスメールのワンランク上の作法を紹介します。 [ad#ad-2] 下記は、月刊誌「日経おとなのOFF 4月号 美しい日本語」で紹介されている「『美メール』の作法」から、特に気になった箇所をピックアップしてまとめたものです。 日経おとなの OFF 2011年 4月号(amazon) マナー以前のビジネスメールの常識 ワンランク上のビジネスメールの作法 シーン別のビジネスメールの作法 マナー以前のビジネスメールの常識 メールの件名は具体的に 内容が分かる具体的な件名にしましょう。 「こんにちは」「お願い」「なるはやで」は、ダメ。 返信メールの件名は変更しない 同じ議題であれば件名は変更せずに、「Re: 」を付加して返信しましょう。 議題を変更する
IE6をはじめ、iPhone, iPadにも対応した、可変レイアウトも固定レイアウトにも利用できる実用的で多彩なグリッドを組み立てるCSSのフレームワークを紹介します。 StackLayout デモページ:Basic Mockup [ad#ad-2] StackLayoutの主な特徴 StackLayoutの対応ブラウザ・デバイス StackLayoutで使用する12個のclass名 StackLayoutのデモ StackLayoutの使い方 StackLayoutの主な特徴 わずか12個のclass名で、コンポーネントを管理 class名は、簡単にセマンティックなものに変更可能 ネストの制限は無し floatのクリア無しで、エレメントを横列に簡単に並べることが可能 デフォルトは可変レイアウト用で、固定レイアウトにも対応 各カラムの溝の設定は簡単で、px, %の両方に対応 StackLa
軽快なアニメーションが心地よいナビゲーションを実装するjQueryのチュートリアルを紹介します。 タイトルにある通り、Flashは使わないで実装されてます。 Animated Content Menu with jQuery デモページ [ad#ad-2] まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。 デモページ 実装 HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。 HTML:背景 背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 <div id="ac_background" class="ac_background"> <img class="ac_bgimage" src="images/D
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5:ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く