ウェブサイトの制作時によく使用される実践的なテクニックの一つ一つが丁寧に解説された「HTML/CSS デザインの教科書」を紹介します。 最新の知識をおさえつつ、基本を正しく理解し、しっかり身につくオススメの本です。
WordPressのテーマで記事がどのように表示されるか、テキスト記事、画像コンテンツ、動画コンテンツなどが正常に表示されるかテストできるWP Testを紹介します。 普通に想定されるパターンだけでなく、タイトルが異常に長い、コメントがたくさんついた、カテゴリが無い、カテゴリが異常にたくさんなど、イジワルなパターンも用意されています。 WP Test ダウンロードできるテストデータはXMLフォーマットで、WordPressに直接インポートできます。画像などはuploadsフォルダでサーバーにアップします。 どんなパターンが用意されているかは、WP Testのデータを読み込ませたデモで見ることができます。たくさんあるデモページから一部をご紹介。
全て商用利用無料!すぐに使えるJPEG素材からオリジナルを作成できるPSDまでブラーな背景素材のまとめ
世界14ヵ国のウェブデザイナーにアンケートをとった、人気のある有料・無料のフォント ベスト10を紹介します。
WordPressにちょっと機能を追加したい時に役立つスニペットをまとめたサイトを紹介します。 目的をもって探すだけでなく、こんなこともできるのかという発見もあるかもしれません。 WPSNIPP – 500+ WordPress code snippets for your blog [ad#ad-2] WPSNIPPでは現在、545個のWordPressの便利なスニペットが登録されています。 下記にほんのちょっとだけ、その便利なスニペットをピックアップしました。 よく使うショートコードをボタンから選択可能に 特定のページのみ特定のスタイルシートを適用 アーカイブウィジェットの表示期間を制限する Google+1ボタンを設置する プラグインを管理画面を使わずに停止する CSSファイルのキャッシュを防止する 大切な「wp-config.php」を守る よく使うショートコードをボタンから選択可
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
クリーンで、エレガントで、美しく、そしてしっかりと機能するウェブデザインを作成するのに役立つPhotoshopのテクニックを紹介します。 7 Photoshop tips for designing clean and modern websites [ad#ad-2] 下記は各ポイントを意訳したものです。 1. Space(ホワイトスペース) 2. Depth(奥行き) 3. Detail(ディテール) 4. Definition(明確) 5. Interest(興味) 6. Perspective(遠近法) 7. Readability(リーダビリティ) 1. Space(ホワイトスペース) スペースはボックスやラインやグラフィックなどを使用しないで、デザインエレメントの見た目での分離を可能にするもので、モダンデザインの中でも最も重要なテクニックです。これはコンテンツのプレゼンテーショ
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」の好例で、派手な広告やプロダクトであなたを攻めたてることはなく、むしろあなたが見るべき一つのもの
10 Very Useful WordPress Hacks [ad#ad-2] 下記は各ポイントを意訳したものです。 リンクを新しいウインドウで開く 検索結果ページのインデックスを阻止 編集ボタンを設置 コントロールパネルのリンクを設置 データベースエラーページのカスタマイズ ページ内にもう一つのページを埋め込む 著者の情報を加える Facebookのボタンを加える WordPressのアドミンバーを下に移動 管理者用のパスワードをリセット リンクを新しいウインドウで開く デフォルトでリンクを常に新しいウインドウで開くようにします。 「wp-admin」フォルダ内の「quicktags.js」を変更します。 変更前 if (!edCheckOpenTags(i)) { var URL = prompt('Enter the URL' ,defaultValue); if (URL) {
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Loupe 画像の一部を拡大します、多彩なオプションが便利。 Slicebox 画像をダイナミックに3Dスライスするギャラリー。 E
Tips in Using Background Pattern for Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ビジターを知る コンテンツは明確に コンテンツの強調に暗い背景を 限られたエリアのみにパターン パターンを全体に サイトのテーマに則したパターン シンプルなデザインには軽いパターンで パターンの多用に注意 パターンで視線を誘導する パターンをテクスチャと組み合わせる 異なるパターンを組み合わせる デザインにはフレッシュさを 洗練されたデザインに はじめに パターンは今日、ウェブデザインだけでなく、ビジネスカード、壁紙、包み紙など数多くその使用を見ることができます。 パターンとは一定の形状をもったセルが繰り返しと定期性によって配置されたもので、その種類はタイル、ライン、スワールなど何千何百とあります。 そのパターンをウェブデザイン
表示サイズによって正方形のユニットが最適に構成される、Media Queriesを使ったフレームワークを紹介します。 IE8以下のMedia Queries非サポートブラウザにもスクリプトで対応しています。 Fluid Squares V2 [ad#ad-2] Fluid Squaresの主な特徴 正方形のユニットを使った、HTML5ベースの可変グリッドのフレームワーク。 Media Queriesで表示サイズによって、カラム数が増減、フォントサイズも調整。 モバイル ファーストで、小さいディスプレイのためにCSSを記述。 最近のモダンブラウザだけでなく、iOS, Android, BlackBerryなどにも対応。 IEなどMedia Queries非サポートブラウザには「css3-mediaqueries-js」で対応。 Fluid Squaresのデモ カラム数は1, 2, 3, 4
エレメント同士を水平に配置したり、垂直に配置したり、またそれが対称だったり非対称だったりなど、ウェブデザインでヴィジュアルのバランスを実現する5つの方法とバランスに大きな影響を与える5つの要素を紹介します。 Developing Balance in Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに バランスの5つのタイプ バランスの5つのプロパティ はじめに もしあなたのウェブサイトのデザインがヴィジュアル的にバランスがとれていないなら、あなたのサイトは混乱に陥っているようにユーザーは感じるものです。そして、心地悪く感じさせるでしょう。 あなたのデザインは魅力的であり、ユーザーにリラックスして見回してもらえるようにするべきです。それを達成する最も良い方法はヴィジュアルのバランスです。 ヴィジュアルのバランスとは、デザインエレメントのバランスをとるだ
その映画の特徴をうまくミニマリズムにしたポスターを紹介します。 バットマン source 不思議の国のアリス source インディ・ジョーンズ 最後の聖戦 source [ad#ad-2] ダイ・ハ
矢印 ゆる~い感じのミニサイズの矢印・アローのPhotoshopのブラシ素材を紹介します。 しっかりした矢印をお求めの方は、「全74種のシンプルなデザインで使い勝手のよい矢印・アローのPhotoshopのシェイプ素材」をどうぞ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く