デザイナーなら知っておかないと損するGoogleWebフォント特選10個 | Find Job ! Startup
現在、欧文を中心に600以上の書体が選べるGoogleWebフォント。これだけ数が多いと、どれを選べばいいのか日本人の私たちにはよく分かりません。 今回は、全世界で最も使われている人気のGoogleWebフォントを10個厳選してお届けします。海外向けのサイトを作る際にはハズせない、日本向けサイトを作る際にもアクセントとして使いたい、とっておきのGoogleWebフォントを集めました。 GoogleWebフォントを使うメリット GoogleWebフォントを使うと、こんなにもたくさんのメリットがあります。 SEO対策になる 修正が簡単に行える 選択してコピペできる 拡大縮小・高解像度画面（Retina Displayなど）でもボケない 使わない手はありません。 GoogleWebフォントの使い方 使い方に関しては、OZPAさんのブログが詳しいです。参考にしましょう。 今さらながらWe
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！：にわかデザイン（1）（1/3 ページ） Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
非WEB屋でもサイトが作れる驚異的サービス／『サイトを作る』という敷居がどんどん低くなっていると実感する物色々 | バンクーバーのうぇぶ屋
先週くらいのお話ですが、“カナダで留学した後自分たちでスモールビジネスをやるからサイトが欲しい、でもお金無いから自分たちで作りたい。”的な相談があって、「そんな、サイト作るだけのサービスなんぞ、腐る程あるわぁああ！！」と、半分ヤケくそになってお話したので丁度いい機会だからまとめてみようと思います。 まぁ、今日はどちらかというと、完全に非WEB屋な人に向けたサイト自体を作るサービス、問い合わせなどのフォームを作るサービス、ユーザーテストを低コストで行うためのサービス、そういう物をご紹介していこうと思います。 たぶん、趣味やとりあえずサイト作りたいと思っている人には朗報として、とりあえずサイト作れる人がWEBデザイナーだと思っている人へは啓発（的な？）として、記事を書かせて頂けると幸いです！ 加えてたまに、「サイトが作れるようになりたい。」と僕の元に来てくれる人がいますが、もしそういった人が「
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
WordPressではじめてテーマをカスタマイズ・自作するときありがちな10のつまずき – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
今回は【WordPressではじめてテーマをカスタマイズ・自作するときありがちなに10のつまずき】ということで、テーマをカスタマイズや自作していく際、まず最初につまずくであろうポイントを10個、できるだけ簡単にわかりやすく解説してみました。 全部私が実際最初につまずいたポイントなので、きっとはじめてカスタマイズするかたのお役にたてるはず…！ テーマカスタマイズの基礎の基礎編です。 テーマファイルを開いてみて、なにがわからないのかすらわからなくてカスタマイズを断念した、というような方にぜひ見ていただきたいエントリーです。 ざっくり概要がつかめれば、「なにがわからないのかわからない状態」が解消されるので、あとは自分で調べて理解していけるようになるんじゃないかな、と思います。 とりあえず一から作るのは大変だから既存テーマをいじって勉強したい。 今使ってるテーマのヘッダーをオリジナルの画像にしたり
WordPressサイトをデザインする時に気をつけていること
この記事は、2011/9/11 に神戸芸術工科大学で開かれた「WordCamp KOBE 2011」で私がお話しした「WordPressサイトをデザインする時に気をつけていること」というセッション内容をブログ記事として起こしたものです。 当日はたくさんの方にお越しいただきありがとうございました。 会場に入れなかった方もいらっしゃったそうですみません。 この記事で、少しでも内容を共有できればと思います。 このセッションでは、オリジナリティのあるWordPressサイトのテーマをデザインする際に私が気をつけていることについてお話させて頂きます。 このセッションでお伝えしたいことは「4つ」あります。 いずれも、私がオリジナルのWordPressテーマをデザインする際に気をつけていることです。 このセッションで伝えたいこと このセッションでお伝えしたいことは「4つ」あります。 いずれも、私がオリジ
CSS3で画像のドロップシャドウを簡単に作成できる「CSS3 Drop Shadow Generator」
画像にドロップシャドウを付けるには、Photoshopなどの画像編集ソフトで画像にエフェクトをかける必要がありますが、そのようなことをしなくても、CSSを使ってドロップシャドウの効果をつけることもできるようになりました。 ただ、できるとは言っても、自分のやりたいように０からその効果をつけるのは、なかなか至難の業。そこで今回は、ドロップシャドウを付けるCSSを簡単に生成してくれるサービスをご紹介します。 CSS3のドロップシャドウをカンタンに作れるジェネレータ 「Css3 drop shadow generator」は、スライダでドロップシャドウの効果を調整するだけで、HTMLタグとCSSを生成してくれるサービス。 影の付け方も全部で８種類と豊富で、この記事の冒頭にある画像のようなエフェクトを簡単にかけられるようになっています。 ドロップシャドウを簡単に設定
WordPress.com公式ブログで紹介された秀逸なデザインと機能のテーマ27選
ニューヨークタイムズのブログ「NY Times Blogs」やSCEA公式のプレイステーションブログ「PlayStation.Blog」でも採用されているオープンソースで無料利用可能なブログ/CMSソフト「WordPress」の魅力として、豊富なデザインが揃った各種テーマの存在と、それらを簡単に切り替えることでブログの雰囲気をガラッと変えることができるという点がありますが、あまりにも数が多すぎてどれを使えばいいのか選ぶだけでも一苦労。 そこで参考になるのが、スパムコメントやトラックバックを止めるプラグイン「Akismet」で有名なAutomatticが運営しているブログサービス「WordPress.com」公式ブログで紹介されている各種テーマです。 百聞は一見にしかず、実際にどういう秀逸なデザインのテーマがあるのか、実際に選んでみた一覧は以下から。 Blog - WordPress.com
a:hoverを使ってアンカーのスタイルをJavaScriptを利用せずスタイルシートだけで変更します
疑似クラス a:hover を使うと アンカーテキストにマウスが来たとき(onmouseover)にアンカーのスタイルを変更する という動作を、JavaScriptを利用しなくてもスタイルシートだけで実行する事が出来ます。 スタイルの変更 CSSコード
デザインのいいブログおしえｒ・・・教えてください ニュース速報BIP
1 以下、名無しにかわりましてVIPがお送りします 2010/02/28(日) 00:54:22.77 ID:FS2s1X7Q0 二十歳街道まっしぐらとか http://tokuna.blog40.fc2.com/ 3 以下、名無しにかわりましてVIPがお送りします 2010/02/28(日) 00:55:55.34 ID:FS2s1X7Q0 どんどん教えてくだしあ 4 以下、名無しにかわりましてVIPがお送りします 2010/02/28(日) 00:56:45.45 ID:3gtZLmqc0 ぷにるのブログとか? 6 以下、名無しにかわりましてVIPがお送りします 2010/02/28(日) 00:57:51.94 ID:FS2s1X7Q0 >>4 これか フェンリル | デベロッパーズブログ http://www.fenrir.co.jp/blog/ 8 以下、名無しにかわりましてVI
ミblog : レビューや日常など
SONY DSC-RX100を購入したので犬の散歩道を撮ってみました SONYから発売されたコンデジ、サイバーショットDSC-RX100を購入しました。今後、レビューなどは別ブログでと思っていましたが、その別ブログの完成がまだ当分かかりそうなので、こちらで作例だけでも掲載しておこうと思いま […]
最近見つけた完成度の高いフリーのWordPressテーマ
最近知ったthemes2wp.comというサイト のフリーのWordPressテーマで、個人的 に完成度高いなと感じたテーマをいくつか ご紹介したいと思います。完全に主観が 入っているので参考にならなかったら ごめんなさい。 ここで言う”完成度が高い”、というのは「使いやすそう」「変更箇所が少なそう」という意味です。いいデザインにしたいけどカスタマイズは面倒・・・という方にお勧めです。11個あります。 [note]ワームのご報告を受けて全テーマへのリンクを削除しました。テーマは沢山ありますのでテーマカテゴリでお探しになってみてください。[/note] BlockStock Theme 非常に綺麗なテーマです。シンプル系がお好きな方なら殆ど変更する箇所無さそうな気がします。個人的に凄く好きなテーマです。 ※「誰がために鐘は鳴る」さんよりご指摘を受けてリンクを削除しました BlockStock
ホームページ作成 簡単ホームページ作成サービス Jimdo
プロに任せる。ジンドゥーに精通した制作のプロが、\nあなたの代わりにホームページをお作りします。\n全てを安心してお任せください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
カラーコード 色見本、定義済みの色の名前１６色、ウェブセーフカラー216色
Photoshop Vip » ダウンロードしておきたい100個のフリーフォント保存版まとめ
RouxRil（るーりる）
http://www.designwalker.com/2008/05/wp-themes.html
お気に入りWordpressテーマいっぱい - DesignWalker