ここが変わった！HTML5マークアップ入門 (1/6)
ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、「次のリニューアルはHTML5で制作したい」と考えるWeb制作者も少なくないでしょう。本連載では、「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア 浜 俊太朗さんが解説します。（編集部） 「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （
サンプルデザインでわかりやすく見る。プロデザイナーが使うセオリー10のこと。 | Maka-veli.com
Webディレクターから見る、デザイナーさんなら当たり前にやってる事で 是非取り入れて欲しいという視点で書いてます。 グリッドレイアウト 目線の誘導にはグリットの設計は重要です。 Webなら特に縦位置を意識する必要があるかなと思います。 奇麗なグリッドが引かれたデザイン（線がある/ない、かかわらず） は、とても視認性が高く、目の誘導を行いやすいです。 シンメトリー 対照性なデザインは人の頭に一定のルールを認知させる事ができます。 それ故に、次のページなども惑わす事なく閲覧ができます。 また、単体的にも目線の誘導がされやすく、 かつ見た目も奇麗ですっと入ってくると思います。 アシンメトリー 逆に、ネガティブスペースを上手くつかい、 目線のジャンプ率を高くしたレイアウトも効果的です。 目的と用途で使い分けが重要かと思います。 タイポグラフィとビジュアルイメージ 和文書体、欧文書体で使い分け、
実践！Webユーザビリティ研究室： 実践編：その1「窓の杜」
Webサイトのユーザビリティを、実例を基にわかりやすく紹介する新連載「実践! Webユーザビリティ研究室」。第1回目の今回は、オンラインソフト紹介サイト「窓の杜」を取り上げます。 ● 「Webユーザビリティ」とは Webの世界において「ユーザビリティ」という言葉を、ここ数年でさかんに耳にするようになりました。ユーザビリティ（Usability）というのは、つまるところ「ユーザーが意図通りに使えること」を意味する言葉になります。 具体的な例を見てみましょう。例えばこのINTERNET Watchのサイトでは、ページ左上の「INTERNET Watch」ロゴをクリックすると、トップページに移動します。このように「ページ左上のロゴをクリックするとトップページに移動」というのは、多くのユーザーの経験則上「当然そうあるべき反応」として認識されています。下層ページで迷ったユーザーの多くは、ページ左上の
Facebookページをカスタマイズするのに便利なアプリのまとめ | その他（IT） | 毎日がアップデート | あすなろBLOG
Facebookが普及するにつれて、Facebookページ(旧ファンページ)を作る人が増えてきました。Facebookページは、個人のページと同じくアプリを入れることで、色々とできる事があります。 今回は、そのFacebookページに色々な機能を追加するアプリをご紹介します。 ○FacebookのSmart Tweets for Pages → 自分のTwitterの投稿を自分が管理している任意のFacebookページのウォールに投稿できるアプリです。公式TwitterアカントなどでTwitterをやっていて、Facebookページにも同じ内容を投稿したいと場合は、このアプリを使用すると良いでしょう。 ○RSS Graffiti → ブログなどで配信されているRSSをFacebookページのウォールにも投稿できるツールです。管理しているFacebookページの他、自分のプロフィールページで
ロゴ、背景、アイコンなどの画像ジェネレータ厳選20個｜Webpark
背景、ロゴ、favicon、Ajaxローディングなどの画像をオンラインで作成できるサイトを集めました。まだまだありますが、多すぎるとかえって不便だと思うので各ジャンルごとで3個または5個で厳選しています。 背景関連 1. Stripe Generator ストライプの模様を作るならここ。ストライプの幅はもちろん、影や柄なども自由自在です。グラデーションもつけることもできます。 2. bgMaker 背景パターン作成サイトです。サイズは自由に変更できて、リアルタイムで背景に提要されて確認できるので便利です。 3. BgPatterns ― Background Patterns Maker こちらも画像の背景パターン作成サイトです。背景画像の組み合わせからサイズや色まで詳細にカスタマイズすることができます。 4. Dotted Background Generator 水玉模様の背景画像が作
就活に打ち勝つポートフォリオWebサイトの作り方 | Webクリエイターボックス
2016年2月18日 Webサイト制作 Webデザイナーとして働く際、自分をアピールするのに最も大切なのがポートフォリオWebサイト。今まで作った作品や自分がどんな人間なのか、何ができるのかを紹介するサイトを作っておけば、就職活動にも大変役立ちます。ここではポートフォリオWebサイトを作る際のポイントや素敵なポートフォリオサイトを紹介します！ ↑私が10年以上利用している会計ソフト！ 最新版書きました！こちらも参考にしてみてください。 ポートフォリオWebサイトを作ろう！2015年版 ポートフォリオWebサイトを作る時のポイント 1. 自己紹介 自分は何者なのか？何ができるのかをわかりやすく完結に紹介します。あまりダラダラ書いても読まれない確立が高いため、大きめのフォント・短い文章で紹介すると効果的です。 「自分はWebデザイナー」という事をはっきり書く 自分ができることをわかりやすく表記
http://blog.v-colors.com/etc/778.html
先日、ノンプログラマのためのPHP入門という素敵なUSTを見ていたのですが、その中で出てきたzen coding。 前々から知っていたものの、これ使うならエディタごと乗り換えないといけないんだ！とずっと勘違いしていて、なんだかんだでまだDreamweaver使ってるし…サイトの定義とかもしてるからなんだかんだでエディタ乗り換えるの面倒だしなぁ…とかごにょごにょ思っていたのですが… Dreamweaverでも使えるらしいよ！知らなかった！無知って怖い！＞＜ Dreamweaver用はこちらからダウンロードできます。 ダウンロードしたZen Coding.mxpをダブルクリックするとエクステンションマネージャーが立ち上がるので、承諾するをクリックしてインストール。 これだけでOK。 インストールが終わったら、早速何か入力してみましょう。 すごい！感動！ 展開はcontrolキーと,(カンマ)キ
30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars - noupe
30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars Every once in a while we like to focus on different design elements and how to use javascript and ajax to make them more interactive and more flexible to the user. In this article we’d like to present a list of over 30 hand-picked Sliders, Scrollers and scrollbar techniques you can use to achieve some special visual effects in yo
Yahoo！に自分のサイトを効率的にクロールしてもらえる「Yahoo!検索 サイトエクスプローラー」の使い方 - GIGAZINE
Googleには「ウェブマスター ツール」というのがあり、自分のサイトのどこが更新されたかというのをサイトマップ（RSSで代用可能）によって通知し、Googleの検索クローラー（ページを取得して解析するプログラム）用のボットに来てもらうという便利な機能があるのですが、それと同じものがついに日本のYahoo！にも登場しました。その名は「Yahoo!検索 サイトエクスプローラー」、まだベータ版ですが、海外では2005年9月にリリースされており、遅れること実に2年半近く、やっと日本でも使えるようになったというわけ。 機能的にはかなり優秀で、インデックスされてYahoo！の検索結果として登録されている自分のサイトのページを確認してTSVまたはXML形式で最大1000件ほど出力したり、逆にインデックスされているページを非表示（Yahoo！の検索結果に出ない）にすることもできます。また、スパムサイトが
ITクオリティ クオリティの高い無料アイコンいっぱい
ブクマ的なエントリー。 過去に掲載したものも多いですが、まとめ量がはんぱじゃないので、気になるものものいくつかありました。 あとでじっくり見てみます。 Free Developer Icons | Developer Icon Sets | Web Design Icons | Outlaw Design Blog 2008/05/01(木) 10:30:13| 無料アイコン | トラックバック:0 | コメント:0
Showing Hyperlink Cues with CSS (Ask the CSS Guy)
I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it in a way that's supported in IE7, Firefox, and Safari. Download zip Images First, find some nice little icons (or better yet, create them yourself) in gif format that will be used as the cues. It might be easier for them a
あなたのサイトにショッピングカードを埋め込むための『Fat Free Cart』 | 100SHIKI
あなたのサイトにショッピングカードを埋め込むための『Fat Free Cart』 May 2nd, 2008 Posted in 便利ツール（ウェブ） Write comment Google Checkoutってはやく普及しないすかね・・・それはいいとして、もっとネットで手軽に商取引が発生すれば景気もよくなるはずだ（いろいろ問題はあるが・・・）。 そう考えるとFat Free Cartのようなサービスはうれしいですな。 このサイトではショッピングサイトをあなたのサイトに埋め込むためのコードを生成してくれる。ちょっと設定が面倒ではあるが、このコードを貼り付けるだけでPaypalとGoogle Checkoutに対応したカートが出来上がる、というわけだ。 ちゃんと数量の変更やカートの確認機能もある。それほど大規模ではないが、ちょこっとだけグッズを売りたい、という人なんかに良いのではなかろうか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://designaholic.cc/2011/03/webweb21.html
WEBディレクターなら知っておきたいWEBサービス25選｜designaholic -Creative Column-
ユーザー視点のウェブデザインガイド ～ユーザビリティ実践ガイド
4象限マトリクス分析はロングテールなWebの実データではビックリの結果になる [アクセス解析tips] | 衣袋宏美のデータハックス![4象限マトリクス分析はロングテールなWebの実データではビックリの結果になる [アクセス解析tips] | 衣袋宏美のデータハックス](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c7da2e9041cd0eab265a2c698386bec563d2a30/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Farticle2009%2Fdatahack%2Fdatahack_icon.gif%3Fitok%3DHzcXGYqr){kind=icon}
http://www.designwalker.com/seed/2008/01/imageflow.html
http://www.designwalker.com/seed/2008/03/icarousel.html
loadingアイコンのオンライン生成ツール
CSS Spriteを活用しよう - DesignWalker