Bootstrap 3.x対応、ミニマルから1ページで構成されたサイトまで高品質な無料のテーマファイル7つ -Black Tieプロダクトやアプリの紹介ページ、デザイナーやクリエイターのポートフォリオなど、1ページで構成されたウェブサイトを美しくデザインしたBootstrap 3.x対応のテーマファイルをBlack Tieから紹介します。 すべてのテーマファイルは、個人でも商用でも無料です。
ウェブデザインにおける透過の効果的な使い方と注意点
半透明のパネルにテキストを配置したり、ナビゲーションを半透明にしたりなど、ウェブデザインでよく利用される透過のエフェクトの効果的な使い方と注意点を紹介します。 Using Transparency in Web Design- Dos and Don'ts 下記は各ポイントを意訳したものです。 はじめに コントラストを作るために透過を使う イメージの重要な部分は隠さない さまざまなレベルの透明度を使う 透過するとテキストが読みやすくなるとは限らない 透過を使うのは少しのスペースに 激しいコントラストの画像には透過は置かない 透過をアートとして使う 透過を飾りとして使用しない 背景に透過を使う 同時に多くの透過のエフェクトは使わない 循環するイメージに透過を使用する おわりに はじめに 透過を使ったウェブデザインは非常に美しいですが、慎重にデザインする必要があります。透過はカラーのブロック・
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
入力箇所も手書き風にしたコンタクトフォームを制作するチュートリアル
メモ状のデザインのフォームに、ユーザーが入力した箇所のフォントをブラウザのデフォルトから変更し、手書き風にしたコンタクトフォームを制作するチュートリアルを紹介します。 デモページ：日本語は設定されてないため、ブラウザのデフォルトフォント 実装 フォームの制作はHTML+CSSだけでなく、メモ状のUIを作るPhotoshopのチュートリアルも掲載されています。 ここでは、デザイン部分は省略して、以下フォームの実装を紹介します。 HTML: 基本構造 まずは、HTML5を使ってフォームを配置する前の基本構造から。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pen & Paper Form</title> <link href="style.css" rel="stylesheet" /> </head>
効果的なミニマルデザインと退屈なデザインの境界線
2013年3月23日 Webデザイン, インスピレーション ミニマルデザインを考えるときによく使われる言葉「Less is more（少ない事は効果的だ）」。装飾が多すぎるとどれも目立たなくなる、無駄を削ぎ落した方がより美しく効果的であるという考えです。これに対し「Less is bore（少ない事は退屈だ）」という皮肉な言葉もあったりします。美しいミニマルデザインと退屈な間抜けデザインは紙一重。その違いを考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ミニマルデザインとは そもそもミニマルデザインとはなんなんでしょう？Wikipediaを見ると ミニマル・デザイン（Minimal Design）は、あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。 とあります。冒頭でも書いたとおり、要素が多すぎると結局なにが主張したいの
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
ウェブデザイナーの固定概念をぶっつぶす１０の方法 – vanillate
Six Revisionsの2010年９月の記事、 「10 Practical Ways to Bust Through Web Designer’s Block」を やっと読みました。 英語の記事で、鮮度は低いですが、 もう一歩ウェブデザインを前に進めたい私としては 非常にエキサイティングな内容でした。 以下は、意訳や直訳ではなく、私のメモです。 （１）逆にして考えてみる ・グリッドでひかれたファイルを大きなカンバスだとおもってはじめない ・ボタンなどの細かいディテールからはじめる ・色にはこだわらない （２）問題点を先に考える （３）コードが先、デザインが後 ・ブラウザの中で考える、フォトショップはあと。 ・スライドショーのようなjqueryを先に書く ・フォーム（デザインはとりあえずきにせず）のエラーバリデーションや、 どんな注意事項がほしいかを考える ・カスタムワードプレステーマで
「ホームページを作る人のネタ帳」さんのリデザインをしました
2013年3月23日 Webサイト制作, Webデザイン Webデザインには大きく分けて2種類あります。新規作成と、既存のサイトのリデザインです。今回「ホームページを作る人のネタ帳」さんのリデザインをお手伝いさせて頂きました！リデザインにあたり、改善点やリデザインの流れをケーススタディーとして公開してみようと思います。 ↑私が10年以上利用している会計ソフト！ 打ち合わせ リデザインにあたり、まずは入念な打ち合わせをします。Yamadaさんからの要望は、 とにかく読みやすく、スッキリと 差し色にピンクを使いたい jQueryを使った何か仕掛けが欲しい の三点。文章主体であるこちらのブログでは読みやすさが命。スッキリとしたデザインを第一にしてほしいとのこと。また、「ユーザーに数秒でもいいので楽しんでもらいたい」という思いから、何か仕掛けを、と依頼されました。Yamadaさんらしい遊び心ですね
なんともいい感じなボタン素材色々:phpspot開発日誌
9 FREE Creative Buttons for You to Download | UnderWorld Magazines なんともいい感じなボタン素材色々。 次のようないい感じのデザインのボタンが色々紹介されています。 デザインの感じも様々で、サイトデザインに合わせたものを選べます。 なんとなくサイトのボタン味気ないなぁ、という方は参考にしてみるとよさそう。 ボタンデザインでクリック率も変わったりするようなので、広告のコンバージョンを測る要領でテストしてよいものを採用する等するとよさそうですね。 関連エントリ シンプルでいい感じのボタンテンプレートPSD iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 ページの端っこに常に表示させるボタン実装用jQueryプラグイン「EdgeButton」
デザインやファッションに取り入れたい、2011年 春のトレンドカラー
PANTONE Spring 2011(PDF) [ad#ad-2] 需要があるか分かりませんが、Photoshop用のスウォッチファイル（.aco）を作成してみました。
[CSS]角丸やシャドウだけではないCSS3の大切な三つのテクニック
CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。 3 Advanced CSS3 Techniques You Should Learn デモページ（※キャプチャはChrome） [ad#ad-2] 1. Advanced Selectors CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。 リスト要素で配置した下記のデモを見てください。 背景色を奇数番目はブルーに、更に5番目はレッドにしています。
MdN Design｜総合情報サイト
スタイルの付与・常套テクニックを使う CSSを分けて記述する 次にスタイルを定義していく。このようにシンプルなデザインの場合は、常套（じょうとう）的に使われているテクニックで効率的に制作できる。 CSSを設定するには＜link＞要素を用いて、href属性にパスを指定する。ここではほかに、type属性とrel属性・media属性を指定している。これらの属性について説明すると、＜link＞のtype属性はhrefで指定されるコンテンツ（この場合はCSSファイル）のMIMEタイプに関する情報を与えることができる。rel属性は、そのコンテンツとの関係性を述べ、media属性は意図する出力メディアを指定できる。ここでは「all」と指定しているので、すべてのメディアに対してこのCSSが適用されることになる。 この＜link＞属性に割り当てられているのは、CSSをインポートするのみの役割を持ったCSSで
ハイセンスにデザインされたHTML/CSSテンプレート集:phpspot開発日誌
32 High Quality Free Html/CSS Templates For Download ハイセンスにデザインされたHTML/CSSテンプレート集がまとまったエントリのご紹介。 どう見てもプロレベルで、改変して利用して手間を省くもよし、デザインの参考にするもよし、といった感じで便利です。 これらを誰かに作ってもらったら・・・と考えると、フリーでこれだけ多数のものが公開されていることの有り難さを感じずにはいられませんね。 関連エントリ フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集 フリーな(X)HTML/CSSなテンプレート集のまとめ CSSテンプレート配布サイト色々まとめ プロレベルでハイクオリティなXHTML/CSSテンプレート集
秀逸なテーブルデザインのパターン集:phpspot開発日誌
Ultimate guide to table UI patterns 秀逸なテーブルデザインのパターン集をまとめたエントリのご紹介です。 デザインだけでなく、見やすさや分かりやすさという点にも気を配りたいテーブルデザインは比較的難しいものになりますね。 テーブルデザインの例を知っておくことで、難しいテーブルのデザインをする際にも参考に出来そうです。 Apple のデザインっぽいテーブル 複雑なデータをわかりやすくスタイリッシュにまとめたテーブル 画像なども盛り込みつつ見やすいテーブル シンプルに見やすいテーブル JavaScript の入ったものも入ってきますが色々なテーブルを見てストックしておくと後に役立ちそうです。 関連エントリ CSSでデザインしたクールなテーブルのサンプル集 CSSでデザインされたテーブルレスでクールなフォームサンプル
「鉄の質感」30フリーベクターアイコン
去年のものですが、まだあまり注目されていないような感じだったので紹介だけ。 鉄の質感が感じられるアイコンです。 過去に紹介したメタルなアイコンもあわせてどうぞ。 30 Free Vector Icons | Dezinerfolio 鉄の質感が感じられる無料アイコン その他前に紹介したものの中から、今回紹介したアイコンとマッチしそうなものをご紹介。 白黒、メタル感を参考に選びました。 こちらもメタルな質感がありますね。 こちらは同じアイコンではありますが、白ベースと黒ベースがあります。赤もありますが。 その他のアイコンをお探しの方は以下でどうぞ。 ハイクオリティ無料アイコンまとめ100パック2009年最新版 それでは、また。
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
デザイナーが知っておくべき背景画像のリソースサイト集:phpspot開発日誌
36 Must Have Backgrounds and Patterns Resources for all Designers : Speckyboy - Web Design, Web Development and Graphic Design Resources デザイナーが知っておくべき背景画像のリソースサイト集。 背景画像のダウンロードやWEB上で動作するジェネレーターがまとまっていました。 背景画像リソース集 Huge Magazine - Desktop Patterns and Tiles 綺麗orおしゃれな背景画像パターン多数 Barracuda Backgrounds 地味だけど汎用に使えそうな背景画像 HYBRID GENESIS カラフルだけどこちらも汎用性がありそうな背景集 DinPattern ちょっと個性的なパターン集 ジェネレーター Tiled Back
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MetroライクなTwitter Bootstrap用デザインテーマ･Cosmo - かちびと.net
[CSS]可変するレイアウト幅の最大値を制限する簡単な方法