海外デザインブログSmashingAppsで、最近公開された高品質な無料PSD素材ファイル40個をまとめたエントリー「40 Fresh & Free High Quality PSD Files」が公開されていたので、今回はこちらをベースにお気に入りのPSD素材をまとめています。 そのまま利用するこ... 続きを読む
ナビゲーションやボタン、スライダー、画像、テーブル、フォームなど、さまざまなUIエレメントが揃ったワイヤーフレーム用のPSD素材を紹介します。 Wireframe Pro Free版の中身 Wireframe Pro Free版のダウンロード方法 Wireframe Pro Free版の中身 「Wireframe... 続きを読む
通知パネルをページ上部からアニメーションで表示したり、中央にモーダルダイアログ風に表示したり、は当たり前。 デザインを半透明や3Dにしたり、パネルの連動やユーザーのアクションでイベントの設定もできる高機能な通知パネルを実装するjQueryのプラグイン... 続きを読む
CSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。 実装 実装のポイントだけピックアップ。 HTML メッセージの見出しとパラグラフをdiv要素で内包し、さらにa要素で内包したものを1コンテンツと... 続きを読む
web2.0のこのご時世、いろいろな便利ツールが無料で公開されております。 専門的な知識の無い方でも、データを入力すればジェネレーターが作り上げてくれます。 例えば、サイト名を入力するだけで、ロゴを作ってくれたり・・・色を指定するだけで、テンプレート作... 続きを読む
前回はWeb制作の作業効率があがるPhotoshopショートカットキーまとめました【第一回基本編】と題しまして一般的によく知られているショートカットを中心に紹介させていただきました。 今回第二回目はより、Web制作現場で頻繁に使っていると思われる、作業効... 続きを読む
先に言っとくけど仕事の合間にぱぱっと書いた記事だからあんまりアテにするなよ? 「極端に低い単価や無料で仕事をしてはいけない単純な理由」 こういう記事が話題になっていたので、ふと気になりまして。 そもそもね、WEBサイトを制作してる側の人間が「どこま... 続きを読む
CSS3のWebフォント機能は、サーバー上にあるフォントを利用するもので、ユーザーの閲覧環境に依存しません。使用したいフォントファイルをサーバーにアップロードし、CSSで読み込ませるだけで利用できるので、フォントの選択肢が広がります。 これまでテキスト... 続きを読む
[フォント] 画像アイコンはもう古い!CSSでスタイル自由自在のアイコンWebフォント 続きを読む
NEWS(12/06/26 18:39) Adobe、HTML/CSS/JavaScriptでできた次世代コードエディター「Brackets」を発表 オープンソースで開発。“Quick Edit”や“Live Preview”などの斬新な機能を搭載 「Brackets」sprint 10 experimental build 米Adobe Systems Incorpora... 続きを読む
デモページ:通知パネル拡大 実装 実装のポイントを紹介します。 HTML パネルはdiv要素で実装し、パラグラフとバーを内包しています。 <div class="tn-box tn-box-color-1"> <p>Your settings have been saved successfully!</p> <div class="tn-progress"></di... 続きを読む
最近デザインに関する記事を少しずつ増やしているSEO Japanですが、予想以上に人気に嬉しいながらも微妙に戸惑っていたりもします。とはいえ、需要があればお届けするということで新たな無料素材のご紹介。 — SEO Japan 世の中には高品質のデザイン素材を作成... 続きを読む
Free Icons Set designed by Brankic1979 - Free psd RetinaディスプレイOKなアプリ用PSDアイコン350。 次のようなアイコンセットがPSD形式で配布されています。ベクター形式ということでRetinaでも使えます。 350種類もあるので、汎用的なものから、ちょっと変... 続きを読む
Archive by month 2012年6月 (45) 2012年5月 (37) 2012年4月 (40) 2012年3月 (39) 2012年2月 (41) 2012年1月 (32) 2011年12月 (37) 2011年11月 (40) 2011年10月 (45) 2011年9月 (52) 2011年8月 (46) 2011年7月 (42) 2011年6月 (51) 2011年5月 (46) 2011年4月 (4... 続きを読む
ボックス要素に色んなタイプの影を簡単に付けられるjQueryプラグイン「jQuery Shadow」 2012年06月26日- jQuery Shadow Plugin ボックス要素に色んなタイプの影を簡単に付けられるjQueryプラグイン「jQuery Shadow」。 次のようにボックス要素に対して影を自由... 続きを読む
[Webデザイン] Webデザイナーなら押さえておきたい、今月の優れたWebデザイン(2012年6月) 続きを読む
最近知ったグラデーションに特化したCSS3ジェネレータを紹介します。国産ということで何となく嬉しくなりました。 グラデーションの色は自由に追加できて直感的に操作できます。色を減らすのにちょっと悩みましたが、消したいポイントを左へドラッグすると消え... 続きを読む
データのバックアップは大切ですよね!疑う余地はないと思います。 WordPressのブログも例外ではありません。バックアップしている人も多いですよね? でも、 「WordPress全体をバックアップできていますか?」 そして、 「実際にリストア(復元)作業を試して... 続きを読む
Baseline.js適用後 Baseline.jsの使い方 使い方は2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/jquery.baseline.js"></... 続きを読む
Photoshopなどの使い慣れたソフトウェアで作成したグラデーション画像から、CSS3グラデーションのスタイルシートを生成するオンラインツールを紹介します。 GradienFinder ドロップすると、すぐにグラデーション画像が反映され、スタイルシートが生成されます。... 続きを読む