グラフやチャート、マップ、人物、吹き出し、リボンなど、インフォグラフィックやプレゼン用のベクター素材をfreedesignfileから紹介します。
グラフやチャート、マップ、人物、吹き出し、リボンなど、インフォグラフィックやプレゼン用のベクター素材をfreedesignfileから紹介します。
一つ一つの完成度が高い、アニメーションを伴ったさまざまなタイプのスライドショーが簡単に設置できるjQueryのプラグインを紹介します。 Agile Carousel - Javascript Slideshow - Image Carousel [ad#ad-2] Agileは以前ちらっと紹介しましたが、つい最近バージョンアップしたので改めて紹介します。 以前のバージョンではjQuery UIも併用するタイプでした。 Agile Carouselには、下記のさまざまなタイプのスライドショーが用意されています。
スマートフォン・デスクトップをはじめ、IE6などのレガシーブラウザ対応といった要件に合わせたMedia Queriesの実装方法を紹介します。 Techniques For Gracefully Degrading Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 テクニック1:スマートフォンユーザーがメイン テクニック2:レガシーブラウザは非対象 テクニック3:スマートフォンユーザーのみ テクニック4:デスクトップユーザーがメイン テクニック5:レガシーブラウザも含める テクニック1:スマートフォンユーザーがメイン 最初に紹介するテクニックは、Media Queriesをそのまま使うものです。 CSS #container { _width: 460px; /* IE6用 */ max-width: 460px; } @media only scree
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
デモページ:Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て(jqeury.jsも)が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>~</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
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」の好例で、派手な広告やプロダクトであなたを攻めたてることはなく、むしろあなたが見るべき一つのもの
GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。 CSS3 GitHub Buttons [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページはボタンの文言を日本語にし、シンプルしたものをアップしました。 デモページ(当方日本語化) 普通のボタン 注意を促すボタン 大きいボタン グループ化したボタン グループ化したものをまとめたボタン アイコンを伴ったボタン 対応ブラウザ ライセンス 普通のボタン 普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。 ボタンを作るためには、「class="button"」を加えるだけです。 デモページ(当方日本語化) <a href="#" class="button">Post comment</a> <input class="
ヘッドラインやキャッチコピーなどにぴったりな太字の無料・有料の英字フォントをPSDFanから紹介します。
ウェブサイトやブログの運営でよく使いそうな便利な.htaccessの設定を紹介します。 こういうまとめは定期的にあがってきますが、やっぱり必要なのでシェアします。 10 useful .htaccess snippets to have in your toolbox [ad#ad-2] 下記は各ポイントを意訳したものです。 URLからwwwを削除 hotlinkingの防止 feedをfeedbunnerにリダイレクト カスタムエラーページ ダウンロードファイルの処理 PHPのエラーのログ URLからファイルの拡張子を削除 ディレクトリのファイルリストを見せない ファイルを圧縮して軽量化 文字コードの指定 URLからwwwを削除 SEOなどの理由で、URLからwwwを削除して使うことがあるかもしれません。このスニペットは、あなたのウェブサイトにwww付きでアクセスしてきてもwww無しに向
Photoshopのレイヤースタイルパネルを模したインターフェイスで、ドロップシャドウや角丸やグラデーションなどを生成できるCSSジェネレーターを紹介します。
ウェブサイトのパフォーマンスの改善やSEO、セキュリティに役立つ.htaccessの設定を紹介します。 17 Useful Htaccess Tricks and Tips 備考:Apache チュートリアル: .htaccess ファイル、Apache コア機能 [ad#ad-2] .htaccessの設定:パフォーマンスやSEO関連 .htaccessの設定:セキュリティ関連 .htaccessの設定:パフォーマンスやSEO関連 .htaccessでタイムゾーンを設定 .htaccessでタイムゾーンを設定します。 例:東京 SetEnv TZ JST-9 もしくは、 SetEnv TZ Asia/Tokyo .htaccessで301リダイレクトを設定 .htaccessで301リダイレクト(永続的なリダイレクト)を設定します。 例:旧ファイル(old.html)、新ファイル(new
MopBox 複数パネル(デモには100以上のパネルも)の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
昨年くらいからウェブデザインの傾向としてフッタを充実させたウェブサイトが増えてきました。 ユーザーの印象に残り、より利便性の高いフッタを設置する際にヒントとなるアイデアをDesign Shackから紹介します。 10 Techniques for a Fantastic Footer 以下は、そのポイントを意訳したものです。 はじめに 1. プライマリ ナビゲーション 2. 「トップに戻る」ボタン 3. 美しいコントラスト 4. インパクトのあるイラスト 5. 充実したコンテンツ 6. インフォメーション 7. メディア ハブ 8. 新鮮なコンテンツ 9. インフォグラフィックス 10. ビジュアル的なアクセント はじめに 魅力的なフッタは、サイトのユーザーに永続的でポジティブな印象を与えることができます。 フッタのデザインと機能性の両方にフォーカスをあてることで、サイトのフッタを魅力的に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く