Hannah & Jeremiah 洋服や髪型にもトレンドがあるように、ウェブデザインにもトレンドがあります。そして背景は特にトレンドがあります。上にあげた例のいくつかの写真やイラストの背景はシャープで分かりやすいですが、いくつかは解釈することが難しいものもあります。ソリッドな背景は人気が高く、ぼんやりとしたブラーな背景もあちこちで目にするでしょう。また、ブラックやホワイト（時代遅れな使い方ではなく）だけでなく、単一のカラーの背景で奥行きをコントロールしエレメントを目立たせるように使っているサイトもあります。そして、パターンやテクスチャもよく機能する背景で、これは最近形の大きさが変化したように思われます。パターンは大きいけれど、繊細なテクスチャのように低いコントラストのアイテムを使っています。 1. シャープなイメージ 背景にシャープで強いイメージを使うことは定番と言っていいでしょう、ポイ
[対象: 上級] Google日本 (google.co.jp)で著者情報の表示の導入が始まったようです。 この記事を書いている時点で公式発表がないのでテストの可能性は否定できませんが、ブラウザを変えてもCookieを削除してもGoogleアカウントのログイン・ログオフを切り替えても先週後半から続けて確認できるので高い確率での本採用の気配です。 海外SEO情報ブログのGoogleの検索結果に表示された僕の著者情報です。 「著者」ではなく「作成者」になってますね。 Google+のサークルに入れられている人数は他の国と同様に付いています。 こちらは僕が寄稿しているWeb担当者Forumの連載コーナーのページに対して表示されている著者情報です。 また仕様が少し変わって同一著者によるページが検索結果のなかに複数ある場合は最初のページにだけ写真が付くようになったようです（Google.comでも確
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
ずいぶん久しぶりの投稿になってしまいました。申し訳ない。 今回はタイトルの通り、ワイヤー上がった！デザイン依頼した！で上がってきたデザイン案（もしくはモックアップ）を見て、その段階でディレクターが何を「確認」すればいいのか？という内容についてです。 もちろん経験を積む。もしくは自分自身でデザイナーも経験するなどの機会に恵まれれば大丈夫なんですが、僕みたいに「いきなりWebディレクターという肩書きを与えられてしまった人」は、デザインの何を確認すれば良いのか分からなくなってしまうケースも多いんじゃないかな？と思って書いてみました。 実際にはマークアップ後まで影響してくるので、もっともっと項目は伸びると思うのですが、ひとまず僕が注意して見ているポイントを10個ピックしています。 色数を使いすぎていないか あれもこれも！と欲張りすぎて、結局なにが「一番強調したいのか」が分からなくなってしまっている
マウスのホバー時に、画像を次々に表示させるスタイルシートを紹介します。 デモはモデルのかっこいい写真ですが、これはパラパラ漫画だ！と思いましたｗ How to Create a Fast Hover Slideshow with CSS3 [ad#ad-2] デモ 実装 デモ デモは2つあり、Firefox, Chrome, Safari, Operaでご覧ください。 まずは、デフォルトのデモから。 デモ：With titles 実装 HTML HTMLはシンプルで、複数のimg要素とオーバーレイで表示させているテキストをdiv要素で内包します。 <div class="hs-wrapper"> <img src="images/1.jpg" alt="image01"/> <img src="images/2.jpg" alt="image02"/> <img src="images/3
img要素でalt属性の内容がポップアップしない img要素のalt属性に値を設定しておくと、 その画像の上にマウスカーソルを乗せた時にポップアップによってその画像の説明が出る、 またはalt属性そのものがそういう役割の属性であると認識している人がいるようですが、 このような考え方は間違いです。 alt属性の仕様 img要素のalt属性の説明を仕様書から見てみましょう。次のように書かれています。 alt = text [CS] この属性は、画像、フォーム、アプレットを表示できないユーザエージェントのために、 代替テキストを指定する。代替テキストの言語は、lang属性で指定する。 非テキスト系の要素である、IMG、AREA、 APPLET、INPUT要素は、著者に対し、 当該要素が順当にレンダリングされない場合の要素内容として提供される代替テキストを指定することを求める。 代替テキストを指定
TOP > Design , Photoshop , WebDesign > 無料でダウンロードできるフリーアイコンセット24個「24 Free Mini Icon Sets To Download」 WEBを制作するにあたって、非常に便利な素材、アイコン。もちろんアイコンもフルオリジナルで作る時間と予算があれば良いのですが、毎回そうも言っていられない現場では、非常に重宝する素材の一つです。今日紹介するのは無料でダウンロードできるフリーアイコンセットをまとめたエントリー「24 Free Mini Icon Sets To Download」です。 Micro Icon Set ある程度数があるアイコンセットが全部で24個まとめられていましたので、今日はその中から気になったアイコンセットをピックアップして紹介したいと思います。 詳しくは以下 Minicons. シンプルで使い勝手がよ
パネル右：グラデーションやシャドウなどの編集 作成が完了したら、コードを下部に生成されます。 生成されるコードは下記のようになっています。 <!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center;
HTML5 移行前に確認しておきたい HTML4 or XHTML の典型的な間違い 2010-08-15 23:30 追記 id:satoshi351017 さんにコメント欄でご指摘頂いた間違いを修正しました（参考：エスケープする文字 - 雑記帳） 前提 DTD の読み方はここでは解説しないので DTDの読み方 参照のこと そろそろ「IE6」の「非標準」を考慮しなくてもよいのではというスタンスで書きます The W3C Markup Validation Service で自分のブログ（Doctype: HTML 4.01 Transitional）をチェック ...orz よーく見てみると、エラーはブログパーツに多い ちなみに はてなトップページ（Doctype: XHTML 1.0 Strict）は... 大惨事っ！！（当然こちらの原因はブログパーツじゃないが） 共通の間違い：ＵＲＬ
ページのタイトルはブラウザウインドウの最上部やブックマーク、Googleなどの検索エンジンの検索結果ページに表示されるそのページを明示する重要なものです。 ページのタイトルで避けるべき5つの落とし穴を紹介します。 5 Common SEO Mistakes with Web Page Titles はじめに ウェブページのタイトルとは 1. タイトルがない 2. タイトルが短すぎる、または長すぎる 3. キーワードの詰め込みすぎ 4. 全てのページに社名/サイト名を使う 5. タイトルが重複している はじめに ページのタイトルは検索エンジンのランキングに対して、あなた自身がコントロールできる最も強力な要因です。しかしながら、ウェブサイトのオーナーはしばしばタイトルを放置します。ウェブサイトをいっそう有意義にするために、タイトルを考えるときに下記の5つの落とし穴は避けるべきです。 ウェブペー
テキストで実装した見出しなどを画像に置換するテクニックで「-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
「Sign in with Twitter」をクリックしてTwitterへログインします。 アクセスを許可しますか？と聞かれますので「許可する」をクリックするとWeview.jpへ登録・ログインが完了します。 また、Weview.jpへの登録が完了した時点で「利用規約」に同意された事となります。 初回ログインに限り、開発・運営者アカウント @fujinyo と公式アカウント @weview_jp をフォローします。 「Sign in with facebook」をクリックしてfacebookへログインします。アクセスを許可しますか？と聞かれますので「許可する」をクリックするとWeview.jpへ登録・ログインが完了します。 Weview.jpへの登録が完了した時点で「利用規約」に同意された事となります。 Welcome to Weview Weview(ウェビュー)は、Web(ウ
SEO業者の方々とやり取りをする際や、クライアントへの説明が必要な際に知っておくべき用語をピックアップして意味を調べました。どの技術が有効で何がブラックなのかというのは基本的に記述していません。あくまで専門用語の解説として活用してください。関連する情報を解説しているサイトのリンクも付けていますので、詳しく知りたい方はリンク先のサイト等を参照してください。 ホワイトハットSEO 検索エンジンのルールに従いサイト制作を行うことです。 White Hat SEO （ホワイトハットSEO）とは – 海外SEO情報ブログ ブラックハットSEO SEOにおいて悪質な手法を駆使して検索上位に表示させる手法・技術のことです。上記ホワイトハットSEOと対極の言葉でもあります。 ブラックハットSEO – IT用語辞典バイナリ サテライトサイト SEO対策や集客を目的として本サイトとは別に作られたサイトのこと。
元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいｗ はじめに：デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ
日本と海外のWebサイトって、「どこか違う」そんな気がしませんか？ 色々見ていると、海外サイトが素晴らしいなと思うんじゃないでしょうか。 日本のサイトに無い表現が多く、表現技術も高いモノが多く見られます。 日本サイトでも、負けない程の素晴らしいサイトはあります。 個人的に最近好きなのが・・・ 回転寿司チェーン「おどり寿し」 このしずる感良いですよね。そして洗練された和の感じ・・・ そういえば、この「しずる感」っていう表現も日本独特で良いですよね。 ジョッガ なかなか日本で見られないダイナミックなデザイン。 配色がとっても綺麗ですよね。 こういったカッコ良さのあるクオリティの高いサイトも、 海外サイトを見ていると、けっこうな数で見つかります。 単純に絶対数が多いという点と、英字などのカッコ良さが要因かもしれませんが・・・ ただ、「海外にかっこいいサイトが多い」とい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
