新着記事『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
新卒でも分かる！成果に繋がるWEBサイトの基礎まとめ「5つのステップ」 | SUN MEDIA
ECサイトを無料で作るオープンソース5選＋3！ 自社ECサイト制作に必要なパッケージまとめ 38,133 views 良い企画書をマネることから始めよう！大手企業が行うプロモーションの企画書事例まとめ 16,680 views 今更聞けないマーケティングの基礎が勉強できる便利な５サイトまとめ 13,238 views 0.1秒の遅れが、1%の売上に影響する!? ページ表示速度の影響力と改善法まとめ 11,789 views 脱初心者！事業計画書の書き方やテンプレート配布サイト4選 11,336 views 売上アップに必要不可欠！販促企画書のアイデアを貰えるサイト5選 8,667 views あなたのサービスが広まる、エレベーターピッチ！ 7,625 views 困った時に使える14パターンの無料名刺デザインサンプルデータ 7,429 views WordPressの導入からデザイン、プラ
デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則
このブログ、Webデザインレシピのデザインをリニューアルしました。 この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない、基本原則 4つをご紹介します。 この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。 古い本ですが、とっても素晴らしい本で今では新装増補版となって発行されているようです。 今回、このブログ – Webデザインレシピのデザインを、ガラッと変えてみました。これを機会にちょっとデザインの基本というか、デザインをするときにガイドとなる、4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトを作るとかじゃなくても、知っておいて損はないかもしれませんね。 せっ
2011年、押さえておきたいウェブデザインの11のトレンドとテクニック
Web Design Trends in 2011 [ad#ad-2] 以下、各ポイントを意訳したものです。 1. HTML5 + CSS3 2. シンプルなカラースキーム 3. モバイル対応 4. 視差効果 5. タッチスクリーン 6. 奥行き 7. 大きい写真の背景 8. 素敵なドメイン名 9. QRコード 10. サムネイルデザイン 11. Life Stream 1. HTML5 + CSS3 HTML5とCSS3はリリースされてから今日まで、あまり多くは使用されませんでした。しかし、この2011年、多くのサイトで採用されるようになるはずです。 多くのデザイナーはFlashから離れてはじめています。次の2つのサイトを見てみてください。 Scribblertoo(Flash) ここで注意してほしいのは、FlashとHTML5は敵対するものではないことを理解しておいてください。問題は、
文章の作り方 - 伝わるデザイン 研究発表のユニバーサルデザイン
研究者や研究に関わる大学生や大学院生は、一年を通じて研究室ゼミや学会などで研究成果の発表を行なわなければなりません。また、近年、科学者でない人たちに対する一般向けのプレゼンや講演（アウトリーチ活動）の機会も増えてきています。他にも、研究論文や報告書を書いたり、研究費調達のために予算申請書やプロジェクトの提案書を作成したりすることも、研究者にとって欠かせない仕事です。これらはいずれも情報を他者（研究仲間や審査員、一般市民）へ伝えようとする行為であり、正確かつ効果的な情報の発信が望まれます。しかし、自己流で資料を作成して、闇雲に情報を発信していても、スムーズに情報は伝わりません。ときには誤った情報が伝わってしまい、研究の価値を正当に評価してもらえないことさえ起こりえるのです。 情報を正確にかつスムーズに他者に伝えるためには、情報をデザインすること、つまり文章を読みやすく整えたり、図表を見やすく
アンダースコアハック
CSS覚え始めの頃、多様していたハックがアンダースコアハックです。 アンダースコアハックとは、Win版IEのみ適用させたい時に使います。 コレは、IEのバグを利用したテクニックで、プロパティの前に特殊記号などが記述されていた場合でも読み飛ばして通常と同じように解釈してくれます。 記述方法はいたって簡単。 プロパティの前に _ を置くだけ。 使いどころとしてはかなり多様で、IEだけ表示がおかしい時には何かと便利に使えます。 例えば、 .hoge { border-top:1px solid #CCC; margin:1px 10px 20px 0; _margin-top:0; } などのように、記述すればIEだけmargin-topが0になります。 IEには、互換モードの時に、 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう というバグがあるので、バグにはバグ
雑食堂
↓ クリックで それぞれの感想に飛びます。 黒執事 寄宿学校編 第2話 声優ラジオのウラオモテ 第2話 黒執事 寄宿学校編 第2話 黒執事 寄宿学校編 第2話 『その執事、偽装』 リジーのお兄ちゃんが出てくるのは覚えてた。 そうだ、そうだ、あの王子様も出てくるんだった。 www.kuroshitsuji.tv 声優ラジオのウラオモテ 第2話 声優ラジオのウラオモテ 第2話 『夕陽とやすみとユニットと』 お肉屋さんでコロッケが売ってる事を知らない人がいるのか。 揚げたては おいしいよね。 2人でユニット組むのかと思ってたら、3人だった。 seiyuradio-anime.com ビアードパパの《カスタードプリンシュー》。 シュー生地はクッキーシュー。 4月30日までの販売です。 ファミマの《U.F.O.ぶっ濃い濃厚そばめしおむすび》。 食べかけ。
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
RedLine Magazine : floatの親ボックスをoverflowで伸ばす
floatの親ボックスをoverflowで伸ばす CSS - Clearing floatsという記事を拝見して。左記ページでは冒頭で『floatを利用したレイアウトに関する一般的な問題はfloatボックスを含む親ボックスがそのfloatボックスの最後まで高さを伸ばしたがっていないということです。』と述べている。少し日本語訳がおかしいかもしれないが、要するにfloat使用時に一番やっかいなのは親ボックスの背景が伸びない事だと言っているわけだ。 cssレイアウトを始めた頃に混乱に陥りがちなあの現象。 以前ほんの少しだけこのサイトでもclearfixを利用したこの問題の解決方法を書いた記憶があるが、上記ページではoverflowを利用した解決方法が書かれている。ソースはシンプル。 div.container { border: 1px solid #000000; overflow: auto
スタイルシート …文字の折り返しとレイアウト崩れ (IE/Firefox) - 琴音 【 みんカラ 】 ブログ
スタイルシートをカスタマイズする際、word-break: break-all; こんな記述があることに気づくかと思います。 これはIE独自の仕様で、文字列を指定条件(幅・方法)にて折り返すという意味です。 指定方法はnormal break-all keep-all の３種類があり、意味はそれぞれ word-break: nomal; 英語などの半角英数文字列は単語の切れ目で折り返され 日本語などの全角文字列は、単語の途中でも表示範囲にて折り返す。 word-break: break-all; 文字列や言語に関係なく、設定された表示範囲で折り返す。(単語の途中でも) word-break: keep-all; 文字列や言語に関係なく、単語の切れ目で折り返す。 みんカラブログをはじめとしたブログ全般では、予め記事やコメント メニュー・リンクリストといった、テキストが書きこまれる場所の範囲が
404 Blog Not Found:CSS - 縦方向にセンタリングする
2008年03月01日14:15 カテゴリTips CSS - 縦方向にセンタリングする 以下で紹介されていた、縦方向にセンタリング表示するためのCSSです。 Vdot Media - Vertically center content with CSS 縦方向にセンタリングするという需要は私には結構あります。たとえばスライドを作る時とか。 結論だけいきなりまとめてしまうと、以下のようになります。 http://www.dan.co.jp/~dankogai/blog/vcenter.html ここではあえてpaddingをつけてそれぞれのdivタグの位置関係を明示するようにしました。 これで、セルが一つだけ入ったtableを使う必要がなくなりました。 が、はっきりいってめんどいなあ。divタグを三重に使うというのがねえ。原理も、CSSでtableを再現しているに過ぎないし。IE用のテクニ
CSSでDIV要素内の縦方向の中央揃え方法を教えてください。…
CSSでDIV要素内の縦方向の中央揃え方法を教えてください。 テーブルレイアウトで言えば「valign="center"」みたいな事をしたいのですが、分かりません。 以下のような感じの事をDIVボックスを使って表現したいです。 <table width="100px" height="100px" bgcolor="#AAAAAA"> <tr valign="center"> <td>テキスト</td> </tr> </table> 中央揃えにはなりませんが、イメージ的にはこういう感じです。 <div style="width:100px; height:100px; background-color: #AAAAAA; valign:center">テキスト</div> また、もし出来ないなら、その理由等を解説したページも紹介していただければ嬉しいです。
フッターの背景をコンテンツが少ない時でも下まで表示させる
デジパのベトナムオフィシャルサイトがオープンしました。 さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。 Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は当然上に来てしまい、下がbodyに指定している背景色になってしまいます。 キャプチャみたいな感じです。 コレがイヤでフッターをページ下部に固定する方法とかを使う事もあるかと思いますが、アレはアレでコンテンツ部分が間延びしてしまう感じも無きにしも非ずだったりします。 と、言うか個人的には1サイトに1ページ有るか無いかも分からないような部分に労力を割きたくないのが正直なトコロなので、出来れば見逃して欲しい部分だったりします。 htmlとbody要素にheight: 100%指定して...みたいなの
シンプルにクールで使用感のよいボタンを作るサンプル:phpspot開発日誌
Particletree Rediscovering the Button Element Creating a consistent interface for your users is a constant struggle for every application designer. シンプルにクールで使用感のよいボタンを作るサンプル。 次のようなボタン、あったらつい押したくなりそうです。 フラットなデザインで、押した感じが心地よいです。 単純に、ボタンタグで <button type="submit" class="positive"><img src="/images/icons/tick.png" alt=""/>Save</button> のように定義してスタイルしている感じで、マークアップとCSSが公開されています。 ボタン作成の際の１参考にできそう。
[JS]入れ子の階層に対応した、多段型ナビゲーションのスクリプト集
Dynamic Driveのエントリーから、入れ子の階層に対応した多段型ナビゲーションのスクリプトを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
lepracaun.info
Webデザイン・デザイナーに役立つネタ検索 || デザインレシピデータベース このサイトについて
[CSS]スクリプト無しで、スタイルシートで実装するアコーディオン
[JS]フォームのボタンやチェックボックスをかわいくするスクリプト | コリス