黄金比や三分割など、レイアウトや写真の構図確認に使えるPhotoshopのカスタムシェイプが便利！
黄金比、黄金螺旋、1/3ルール、L字など、レイアウトや写真の構図に重要なパスを簡単に描けるPhotoshopのカスタムシェイプを紹介します。 カスタムシェイプなので、サイズやカラーなど自由に利用できます。 Photoshopのバージョンも古いものから新しいものまで、使えると思います。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 紹介するのは二つ、両方とも無料です。 一つ目は黄金比や黄金螺旋、1/3ルール、L字など、さまざまな構図がセットになったものです。
Webデザインレシピ » Blog Archive » jQuery Plugin Fancybox
1. 特にエフェクト無し + タイトル + グループ化 クリック時のオーバーレイの色を淡いグレー（背景のこと）にした以外、特にエフェクトを指定していない状態です。<a>タグの title属性が、そのまま画像タイトルとして表示されます。 <a>タグの rel属性に同じ名前（グループ名）を入れるとグループとしてまとめられ、矢印ボタンで移動できます！ また、jquery.mousewheel.js を使えば、マウスホイールでも画像を切り替えることもできます。
デザインやファッションに取り入れたい2014年のトレンドカラー、春のトレンドカラー12色も魅力的！
Pantoneが2014年セレクションしたカラーは、鮮やかに咲き誇るランをイメージさせる淡くピンクがかったパープル「Radiant Orchid」。 今回はダウンロード素材として、Radiant Orchidを含む2014年 春のトレンドカラー12色をPhotoshop用のスウォッチを用意しました。 Pantone Color of the Year 2014 PANTONE 18-3224 Radiant Orchid Radiant Orchid（レイジアント オーキッド）とは「光り輝くラン」のことで、表情が非常に豊かなカラーです。その鮮やかな色味は信頼と暖かさにあふれ、人々の興味をそそります。 パープルとピンクが織りなす魅力的なハーモニーは、ランの花のように大きな喜び、愛、健康を象徴します。 Radiant Orchidのイメージボード PANTONE Color Systems:
【みんなの知識 ちょっと便利帳】パソコンの、現在のウィンドウサイズ[画面サイズ]を調べる
現在のウィンドウサイズ ② [ ＊画像説明 ② ] (スクロールバーを含み、メニュー・ステータスバーなどを除く)
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
細かすぎて伝わらないアンチエイリアスの話
はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい：photoshopのアンチエイリアスについては、基本的には５種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の５種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の４つに関しては シャープ：文字が太い / くっきり 鮮明：文字が細い / くっきり 強く：文字が太い / なめらか 滑らかに：文字が細い / なめ
[ HUE / 360 ] The Color Scheme Application
Circle Controller HUE/360 Ver.0.1.3 © 2012 SAUCER.JP
配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色
Webで見るデジタル色彩見本として 配色の見本帳は無料のインターネットツールです。各色のページでは、Webカラー（RGBカラー）をベースとした色の系統（色相）と色の鮮やかさ（彩度）・明暗の度合い（明度）を数値で表しています。各種カラーモードでの色数値を掲載しています。DTPでチラシや看板を作るとき、ホームページといったWEBサイト作成、パワーポイントでの資料作成など、各種デザインでのカラーマネージメントに便利なカラーコードが一目でわかるWebで見るデジタル色見本です。 色を扱うときに頻繁にぶち当たるのが配色ですが、色の法則に沿った色の組み合わせがテンプレートとなり色彩設計の手助けをしてくれます。 色検索で見つかる新配色 ベースとなる色、キーカラーを選ぶとそこからおすすめな相性の良い色をマッチングしてくれるのが当サイトの色検索です。メインに使う色が決まっているとき求める配色がすぐに見つけられ
[CSS]スクリプト無しでこんなにかっこいいスライダーが実装できるとは！ -radio click through
画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 radio click through スライダーの動作の仕組みはラジオボタンで、チェックが入ったコンテンツを表示します。 実装はこんな感じ。 HTML 各パネルはリスト要素で、ラジオボタンとラベル、コンテンツがセットになっています。 <div id="gal"> <nav class="galnav"> <ul> <li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure> <img src="image.jpg"/> <figcaption> <h4>見出し</h
パクリサイトに記事を全文無断転載されたのでGoogleに著作権侵害を報告しつつ差し替え画像を用意して対策を講じてみた
人の心を盗むことはあっても、記事を盗むことはありません。おつぱ（ @OZPA ）です。ｸﾗﾘｽｩｰ!!ｸﾗﾘｽｩｰ!! さて先日、Twitterで@25kei12 さんより「とあるサイトで記事が全文パクられてますよ」と教えて頂きました。 参考：全文パクリブログ発見! – ま鉄系 よくよく考えたら全文まるまる無断転載されたのは初めてのこと（把握する範囲で）。しかもサイトを見てみたら画像まで直リンクしてくださっているご様子。 うーん殴りたい。 そんなわけでどんな制裁をくわえてやろうかと高鳴る鼓動を抑えつつ、当該パクリサイトにいろいろと対策を講じることにしました。（パクリサイトへのリンクはしておりませんので悪しからず） Googleに著作権侵害で報告 まずはじめにやるべきはGoogleへの著作権侵害を申告することでしょう。以下のサイトを参考にさせて頂きました:) 無断コピーされたコンテンツをGo
Placehold.jp
基本 以下の形式で、指定したサイズの画像を作成することができます。 https://placehold.jp/{幅}x{高さ}.png 例) <img src="https://placehold.jp/150x50.png"> 背景・文字の色サイズを変更する https://placehold.jp/{文字色}/150x100.png https://placehold.jp/{背景色}/{文字色}/150x100.png https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png ※背景色・文字色はRGBの16進数表記 例) <img src="https://placehold.jp/24/cc9999/993333/150x100.png"> ファイルフォーマットを変更する URL末尾の拡張子で、pngとjpgの2種類が指定可能です。
個人創作サイト向け無料テンプレート配布 | レゾンデートル
ワンコインで！個人さま向けWeb制作をはじめてみました！ 2014/04/16 「ココナラ」というサービスを利用して、ワンコイン（500円）でWebサイト制作するのをはじめてみました。 条件付きですが、ぜひ「私のイラストでいい感じにホームページ作って欲しい！」という方お待ちしております。→詳細はこちら 過去の更新履歴 レゾンデートルは、創作サイト向けテンプレートを配布している、Ayumiによる個人運営サイトです。 テンプレートはすべて無料で提供していますが、必ず利用規約を読んでからご使用ください。 ここに置いてあるテンプレートは、すべて無料配布・報告任意となっております。以下の約束を必ず守ってください。テンプレートをご使用した時点で同意したものとします。楽しんで素敵なサイト作りの手助けになれれば幸いです。 テンプレートの改造と再配布について 素材を入れ替える、スタイルシートを変更するなどの
これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://xiz.sub.jp/wm/
デザインの勉強にもなる、CSSで実装するパンくずのまとめ
キュートな配色がかわいい！センスが光るUIエレメントが揃ったPSD素材
Fontello - icon fonts generator
http://www.abc-abc.net/index.php
背景色と文字色の設定テスト