![CSS3でここまで出来るの?!真似してみたいと思える物からそうじゃない物まで様々なCSS3チュートリアル達! | バンクーバーのうぇぶ屋](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1a7e84eb2c11ce1a028793dc5671626234745bb/height=288;version=1;width=512/http%3A%2F%2Fwebya.opdsgn.com%2Fwp-content%2Fuploads%2F2012%2F11%2FScreeny-Shot-2012-11-25-6.10.50-PM11-1.png)
ウェブページのメニュー、ボタンなどをはじめ、ボックス、スライダー、アイコン、背景パターン、リボン、バッジ、エフェクト、テンプレートなど、トータル2,000くらい?のPSD素材がダウンロードできるByPeopleを紹介します。 そんなに数多くダウンロードできないよ、って人も大丈夫! 全素材まとめてダウンロードできます。 ByPeople ダウンロードできる素材はほとんどがPSDで、モノによってはAIだったりします。 ダウンロードはページ下のメール欄にメールアドレスを入力して、ダウンロードボタンをクリックします。しばらくすると、ダウンロードのURLがメールに送られてきます。 素材の利用にあたっては個人でも商用でも無料、とのことです。 詳しくは、Use Licenseをご覧ください。 数多くありすぎる素材から、いくつか紹介します。 本当に、ごく一部です。
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換:-9999px 改善したテクニック 画像置換:-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
ウェブデザイン技能検定とはウェブデザイン技能検定は、国家検定制度である技能検定制度の一つとして、 厚生労働省より職業能力開発促進法第47条第1項の規定に基づき指定試験機関の指定を受け、 特定非営利活動法人インターネットスキル認定普及協会(以下、当協会)が実施するものです。 試験は実技および学科試験で実施され、 関連国際標準規格等に基づきウェブデザインに関する知識・技能、実務能力等が問われます。 1級の合格者には厚生労働大臣より、2級及び3級の合格者には当協会理事長より、 ウェブデザイン技能士の合格証書が発行されます。
当サイトでもテクスチャやパターンなどを素材として紹介しますが、ダウンロードして満足するだけでなく、どのように使うかが大切です。 テクスチャやパターンを効果的に使った実例を見ながら、その使い方を紹介します。 The What, Why and How of Textures in Web Design 下記は各ポイントを意訳したものです。 1. ノイズのテクスチャ 2. リアルにするためのテクスチャ 3. ビジュアル効果を与えるテクスチャ 4. トーンや印象を明確にするテクスチャ 5. シンプルなピクセルパターンの繰り返し 6. 大きなインパクトを与えるパターン 1. ノイズのテクスチャ ノイズのテクスチャは最近のウェブデザインでとても人気があります。これは背景からボタンまで、あらゆるデザインほとんどのエレメントにマッチします。 ノイズの使い方は使う場所に依存しますが、良いノイズというのはぱ
最近普及しているスマートフォンですが、その専用のサイトを作っている所も多くなってきました。 WEB制作の会社でもスマートフォンサイトを制作する事が多くなってきたと思います。 スマートフォンは指で操作するのでパソコンとはまた違ったデザインになっています。 そこで、デザインをまとめているサイトをまとめてみました。 優れたiPhoneサイトデザイン集 – iPhoneデザインボックス 優れたiPhoneサイトデザイン集 – iPhoneデザインボックス 全iPhoneサイト一覧|iPhoneサイトデザイン集のiPhoneデザインアーカイブ 公式サイト 全iPhoneサイト一覧|iPhoneサイトデザイン集のiPhoneデザインアーカイブ 公式サイト スマートフォンサイト集めました。 スマートフォンサイト集めました。 iShowcase – 国内のiPhone / iPad最適化対応をしたサイトを
2013年3月23日 Webサイト制作, アクセシビリティ, 色彩 「We are Colorblind」というサイトをご存知でしょうか?サイト名を訳すと、「我々は色覚障がい者です」。そう、色を識別することが困難なデザイナーさんの作ったサイトです。数々の例とともに、Webサイト制作における改善すべき点を指摘してくれています。とっても勉強になったので、簡単に紹介します! ↑私が10年以上利用している会計ソフト! Webクリエイターボックスでは以前「色覚障がい者に配慮したWebサイトの作り方」という記事で色覚障がいとは何か、どのように見えるのか、また、Webサイト制作において注意すべき点をまとめました。読んでいない方は、まずはこちらに目をとおしてみてくださいね ;) Webサイト「We are Colorblind」の中の人はオランダ在住のデザイナー、Tom van Beveren氏。サイト名
ウェブメディアやウェブサイトの運営に関わっていると、「編集長」ポジションの重要性を感じることがあります。 フィルターを通さずコンテンツがアップされてしまう これは特に大規模なサイトで顕著ですが、編集長が不在の場合、コンテンツが各部署、各デザイナー、各ライターからバラバラと上がってきてしまい、フォントや色、トーンやマナーの統一感が喪失してしまいがちです。サイト内でフォントの種類やフォントサイズが統一されていない、ということは結構よくあります。 そういった時、編集長ポジションの人間がいると、掲載されるコンテンツの統一感をかなり出しやすくなります。 例えばGEのブログ「GE Report」では元ジャーナリストの人材が編集長として採用されており、かなり厳しめのコンテンツ水準を全社的に求めている。せっかくブログのネタをスタッフが出しても、却下、大幅リライトということが頻繁にあるという噂を聞いたことあ
ほとんどのウェブサイトのメインとなるゴールは、コミュニケーションでしょう。 全体的なレイアウト、テキスト、画像はコミュニケーションにとって非常に重要で、ユーザーに適切に情報を伝える武器になります。 ウェブページを制作する際、ユーザーに正しく効果的にメッセージを届けるための基本的なルールを紹介します。 10 Basic Graphic Design Rules for Web Designers 下記は各ポイントを意訳したものです。 画像は高品質なものを使う 時には大胆に! 目的をもってデザインする シンプル・イズ・ベター フォント選びは賢く テキストより画像 ページの重要な箇所を強調 コンテンツの組織化 空白スペースの活用 文章は読みやすく 画像は高品質なものを使う 多くのつまらない画像を並べるより、一つの高品質な画像を配置した方がより多くのものを得るでしょう。画像を選ぶときは、伝えたいメ
今知りたいコト、僕が知りたいコト、教えます。@shintarowfreshです。 あー、違う違う、上からじゃないよ、マジでマジで。 今すぐ取り入れるべき素敵すぎるネタ達です。是非一読あれ! 魅力的でワクワクする最新のエフェクトを使ったウェブサイトのまとめ | コリス 今知りたいネタがもう、満載。 あー、ほんとワクワクするわ。なんだろうな、やっぱパララックスすきっすわ。ほんと。わくわく感が半端ない。 この記事を読むだけでレベルアップできる素敵な3つのWebサイトの使用技術を分析&実践してみた | Webクリエイターボックス これは素敵。マジで素敵。 最新の技術をメチャクチャわかりやすく解説。 いいんですか??? 画像を文字でマスクするとか、マジスカ?? しかも、意外と簡単なのね。 と、目を通してブクマするなりエバノに放り込むなり光の速さで永久保存しチャイナよ。 素敵な3つのWebサイトの使用
リクエスト記入例: カタカナの[バレンタイン]の手描き文字 いちごのイラストのバナー素材 クリスマスのアイコン 筆記体のカフェメニューなど
『二ノ国 漆黒の魔導士』完成披露会 水道橋近くのJCBホールで行われた『二ノ国 漆黒の魔導士』完成披露会に参加してきました。 一般ユーザーは1000名が当選できたとのこと。ラッキー♪ ■声優陣 多部 未華子/長澤 まさみ/大泉 洋/古田 新太/八嶋 智人/渡辺 えり/溝端 淳平/黒田 知永子 ■ 麻衣 ■芦田 愛菜 最初の方はスタジオジブリの「二ノ国」ムービーをみたり日野社長の話を聞いたり音楽担当の久石譲さんのメッセージをみたり、、 その後はLEVEL5スタッフにより、実際にプレイしている様子をみることができました。 今回はソフトととも「マジックマスター」という魔法の指南書が同梱されてきます。 これをみながら冒険をすすめるとのことなんですが、これって、、、 (さらに…) WBS(ワールドビジネスサテライトの新コーナー スミスの本棚 「経済学の父」であるアダム・スミスの名を冠したWBS(ワー
WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック!まだフォローしてない人はお気軽にフォローしてみてくださいね! 続きを読む Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します。 続きを読む WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック!まだフォローしてない人はお気軽にフォローしてみてくださいね
はてブたくさんついちゃいました(・∀・) お久しぶりの意匠子です。 先日のHTML5に関する記事がとんでもないブクマ数ついちゃいました。 今の世の中はHTML5旋風吹き荒れてますね! このような最新情報を集めるのもデザイナーの大事なお仕事! そこで今回は知らないと人生を損しているであろうデザイナー必見のサイトをまとめました! 続きをどうぞ! まずは鉄板サイトから!! Webクリエイターボックス チュートリアル系の記事が豊富。 まぁWebデザイナーはほぼ100%見てるいると思って間違いなし。 コリス Webデザイナーやマークアップエンジニアで、 このサイトを知らないのはモグリと思われてしまうくらい有名なサイト。 CSS3やJavaScriptの話題が豊富。ちなみに某りすこさんとは関係ありません。 ホームページを作る人のネタ帳 Webデザインを学ぶ人はみんな一度は見たことがあるぐらい有名なネタ
Webデザイン Webデザインや配色をサポートする新サービス「Croppy」をリリースしました Wednesday, October 26th, 2011 WordCamp KOBE で私の講演をご覧になった方はご存知かと思いますが、Webデザインや配色をサポートする新サービス Croppy(クロッピィ) をようやくリリースしました。 Croppy にアクセスすると、このようなページが見れます。 色々なサイトのパーツが「ヘッダー」や「サイドバー」「ボタン」などカテゴリ毎に並んでおり、ブブンデザインアーカイブ のように見えるかもしれません。 しかし、Croppy は集められたパーツを見るだけではなく「今見ているWebページをブラウザ上で切り抜き、手軽にスクラップできる」のです。 Twitter または Facebook アカウントで Croppy にログインしたあと、気になるデザインのサイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く