リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用
Webデザインで「やるべきこと」と「やってはいけないこと」
１.どんなデバイスでも同様の体験を提供する サイトの訪問者は、さまざまな種類のデバイスを使ってサイトにアクセスしています。デスクトップかもしれませんし、ラップトップやタブレット、携帯電話、音楽プレイヤー、または腕時計を使っているかもしれません。 UXデザインにおいて重要なのは、訪問者がどのようにサイトを閲覧しても、デバイスの種類に関わらず同様の経験を提供しなければならないことです。 ※編集部より：一部、誤訳がありましたので修正しました（11/10 11:00） ２. 使いやすくわかりやすいナビゲーションをデザインする ナビゲーションはユーザビリティにおける要です。どんなに良いWebサイトを作ったとしても、ユーザーがサイト内で上手く操作できないならば意味がないということを覚えておいてください。そのため、サイトのナビゲーションは以下の項目に従うべきなのです。 シンプル：どんなサイトであっても最
Webで仕事をする人全員に知っておいてほしい文字詰め・カーニングの基礎知識 | 株式会社ZINE
株式会社ZINEの仁田坂です。編集者ですがデザインするのが好きです。 自己主張しすぎな圧倒的アイキャッチで失礼しました。今日はフォントと文字詰めの話をします。ぼくは雑誌編集者として数年働いた後にWebメディアをつくり起業、みたいな感じで働いてきたんですけれども、編集もデザインけっこう似ている部分が大きいと思っています。文字で読者に伝えるのか、視覚情報でユーザに訴えかけるのか。 結局のところ同じだよなあ、と思ったりします。編集もデザインも一緒くたにして考えたほうが都合いいことが多いです。 で、けっこうWebメディア見てると残念なデザイン、多いんですよね。 Webフォントでタイトル設定してるメディアは気にならないんですけれども、アイキャッチ見ると最悪……みたいなの多い。以前GitHubでアイキャッチ用のテンプレートを公開したもんだから、形だけ真似してデザインがてんでなってないメディアが増えまし
ウェブサイトのユーザビリティに関する最高の秘訣20か条 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ 昨日、ウェブサイトのリーダビリティに関する記事を配信しましたが、意外と好評でした。ということで、2匹目のドジョウを狙って今回はユーザビリティについての記事を紹介したいと思います m(__)m ウェブデザイナーにもSEO担当者にも、基本ながら一読の価値ある内容。 — SEO Japan ユーザビリティは、ウェブサイトにとってものすごく大切なことだ。訪問者が素早く簡単に楽しくウェブサイトにアクセスしてそれを使うことができなければ、ウェブサイトの外観がどんなに格好良くても、コンテンツがどんなに素晴らしくても関係ないのだ。訪問者の多くは、ただ諦めて他のどこかに行ってしまうだろう。 それでは、どうやってで
Browsershots
No active screenshot factories. Please try again later. What is Browsershots? Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of
自分のページやサイトが各ブラウザでどのように見えるか確認できる便利なサイトいろいろ - GIGAZINE
サイトのレイアウトを変更したり、新しくデザインする際に使えるのがこのクロスブラウザテスト、要するに「それぞれのOSのそれぞれのブラウザで自サイトは正しく見えているのか？」をチェックするサイトです。予算と時間が潤沢であれば、自分で各種OSを揃え、各種ブラウザを導入してチェックできるのですが、あまりにも非現実的な場合が多いため、この手のテストサイトは非常に重宝します。 というわけで、デザインやレイアウトのチェックに使えるクロスブラウザテストのサイト一覧は以下から。 10 Helpful Resources for Cross Browser Testing Browsershots http://browsershots.org/ 見てのとおり、現時点ではほぼ最強に最も近い定番クロスブラウザテストサイトが「Browsershots」です。Linux・Windows・Mac OS・BSDの各種ブ
Free Icons Web - Free Icons,Free Icons Download,Free Desktop Icons,Royalty Free icons
U.S. DollarEuroBritish PoundCanadian DollarsAustralian DollarsIndian RupeesChina Yuan RMBMore Info →
カラーユニバーサルデザイン推奨配色セット
色覚の多様性に配慮した 案内・サイン・図表等用のカラーユニバーサルデザイン 推奨配色セット ■ 東京大学分子細胞生物学研究所 高次構造研究分野 伊藤啓 ■ 社団法人日本塗料工業会（JPMA） ■ DIC 株式会社（旧･大日本インキ化学工業株式会社） DIC カラーデザイン株式会社 ■ 特定非営利活動法人カラーユニバーサルデザイン機構（CUDO） 概略 一般の人にも色の見え方が異なる人にも見分けやすい、カラーユニバーサルデザイン推奨配色セットを作成。 被験者実験を重ね、数千の候補色から20色を絞り込み。 塗料業界の色指定の業界標準であるJPMA塗料用標準色2011年F版に対応色を収録。印刷・デザイン業界の色指定の業界標準であるDICカラーガイドシリーズから対応色を選出。 はじめに いわゆる色弱（色覚異常）の人や、緑内障など網膜の疾患を持つ人、白内障の人は、色によっては違いを
【icon】無料アイコン素材
便利に使えるシンプルクリップアート｜背景透明の無料アイコン 会員登録不要でダウンロード頂けます。｜欲しいアイコンが見つかります。 永久に無料ですので安心してご使用ください。サイト制作・ブログの挿絵
WEB制作者の為のベストエントリ38個まとめ-part4*ホームページを作る人のネタ帳
ライブラリ・WEBツール FancyForm - Javascript checkbox replacement チェックボックスをオシャレに変換する。 見飽きたチェックボックスを変更するだけで、少し違った印象を与える事が出来るかも？ （前に紹介した気もしますが念のため） Popular Online Generators | Tech Magazine 過去に話題になったWEB2.0系の画像を自動生成するWEBジェネレータまとめ。 アップした写真をお洒落に見せるJavaScript 写真風に自動変換してくれる便利なJavaScriptライブラリ。 Gigazinize: あなたのブログ，GIGAZINEのようにします 自動でブログ文章に見合った画像を探してくるサービス。 後継のGigazinize Tools - Image: Making up your Blog（あなたのブログに選り
[CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート | コリス
「a href」を使用したリンク箇所のアイコンを、リンク先やmailtoやPDF・画像などそれぞれごとにアイコンを変更するスタイルシートのサンプル紹介です。 外部リンクでアイコンを変更する場合 a[href^="http://"]{ background:transparent url(../images/external.png) center rightright no-repeat; display:inline-block; padding-right:15px; } 判別する箇所のサンプル -mailto a[href^="mailto:"] 判別する箇所のサンプル -PDF a[href$='.pdf'] 判別する箇所のサンプル -圧縮ファイル a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] 判別する箇所のサンプル -画像
各種CSSメニューをカスタマイズしてダウンロードできる『CSS MENU MAKER』 | 100SHIKI.COM
このサイトでメニューを作って張ってみたんですが メニューがTOP画像の上に表示されるのです。 どうすればよいでしょうか？ Top Tools Yotube Music Diary これがHTMLで ul#menu { margin:0; padding:0; list-style-type:none; width:auto; position:relative; display:block; height:36px; font-size:12px; font-weight:bold; text-transform:lowercase; background:transparent url(“http://error911.up.seesaa.net/image/bg.jpg?20090326204938″) repeat-x top left; font-family:”Trebuchet
ストライプの次はタータンチェック？『Tartan Maker』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
Web 2.0っぽいデザインといえばストライプの背景を思い出す人も多いかもしれません。 しかし、常に次を見ている人はタータンチェックに注目です（多分）。 StripGenerator.comという壁紙ジェネレータサイトの作者が次に仕掛けているのがTartan Maker。 ちょっと懐かしい感じのタータンチェックの壁紙を作ることができます。もちろん色やパターンをカスタマイズ可能です。 常に次のデザインを模索する。そういう姿勢を保ちたいですね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webフォントとして使える、最近公開されたフリーフォント
ぱくたそ - フリー写真素材・無料ダウンロード
吹き出し素材専門サイト「フキダシデザイン」
sekailog.com
1キロバイトの素材屋さん
リストに使える小さいサイズのアイコン素材集 ５サイト - DesignWalker
CSSでフッタ位置をレイアウトする （CSS Sticky Footer） - youmos