Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を
WEBデザインが独学で身につく！WEBデザイナー必見の神サイト20選
2023年2月17日 Webデザイナー1年生はもちろん、Web製作に携わるものなら絶対に知っておきたい神サイトを完全収録しました。 独学でWebデザインを勉強したい人、優秀な先駆者たちの知恵を吸収し飛躍したい人は要チェック。 WEBデザイナー必見の神サイト20コリスWebクリエイターボックスコムテブログかちびと.netバンクーバーのうぇぶ屋ホームページを作る人のネタ帳creive【クリーブ】BlackFlagDesignDevelopArchAteitexe アテークゼウェビメモWebparkNxWorldデザイナーのイラストノート株式会社LIGMdN Design InteractiveドットインストールProgateschooコリス コリス サイト制作に関する最新の情報をご紹介 サイト構築、WordPressのTipsを得られます。ただし、Webデザイナー１年制が、今からの更新情報を受
Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
配色を考えやすくするための様々なルール ｜https://wp.yat-net.com/name
色は、見た人に対して、そのものの意味を伝えることができます。そのため、色の選択を誤ると正しい意味を伝えることができません。 色とは、デザインを行う上で欠かすことのできない要素であり、プロジェクトの成功にも大きく関わっているため、デザイナーにとっては非常に気を使う要素といえます。 世の中には、何万色という色が存在します。デザイナーは、その中からパターンを組み合わせ、最適なものを選択しなければなりません。 しかし、デザインには意味がある以上、そこにはルールが存在します。そのルールに沿って配色することで、デザイナーは正しい選択ができます。 今回は、配色を行うために知っておくべき、知識やルールを解説したいと思います。 色の色相環と虹 配色と自然の関係 色相、彩度、明度 色調（トーン） 色の役割分担 色の意味 色を選んでみる まとめ 参考文献 1.色の色相環と虹 色の相関を表すのに「色相環」というも
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
一つのカラーから配色セオリーに基づいてカラースキームを作りだす配色設計に役立つツールのまとめ
コーポレートカラーなど、一つのカラーをベースに配色セオリーからカラースキームを設計したり、同系色やグラデーションを作りだしたりできるオンラインツールを紹介します。 またカラーのストックを増やしたり、カラーをベースにしたムードボード作りに役立つツールもいくつか。 最初は、国産のツールから。 配色の見本帳 | キーカラーで選ぶ配色パターン 一つのカラーをベースに、さまざまな色の法則から配色パターンを表示します。 上は緑みの青（#0099CE）をベースにしたもの。キャプチャの他に、彩度や明度による配色、色相環による配色など、さまざまな配色を表示します。説明付きなのも嬉しいポイントです。
シニア行動とウェブユーザビリティ | マミオン有限会社-パソコン・数学研修、法人研修
毎日インターネットをしているシニア女性（64歳）。 先日、うまくお花を送れないと相談され お届け先などを入力している操作シーンを見ていた。 以下は入力画面で間違えたところである。（クリックで拡大できます） シニア層が、なぜ操作を間違えるのか、時折わからなくなる。 今回もこのブログを書くために、そのサイトにもう一度アクセスしたが どこで間違えるのか、なぜ間違えたのか 記録メモを見なければ解らないほどであった。 彼女は日々ネットを楽しみ、お買い物も慣れている。 だから、ネットに不慣れである、とはいえない。 では、なぜ間違えるのか？私を呼ぶのか？ その間違いは、「シニア行動」によって起きるのではないだろうか、と考えた。 シニア行動とは何かその理由が知りたくて、参考になればとこの本を読んだ。 （この本についてはまたいつか機会があれば改めて書きたいと思う。） シニア行動とユーザビリティの関係を引用す
コンテンツからみるWebアクセシビリティの課題と提案 : could
コンテンツは本当にアクセシブルか Webアクセシビリティは、大きく分けて 2 つの『デザイン』があります。ひとつは、情報を分かりやすく整理し、目的の情報へた辿り着くための Web アクセシビリティ。この要素は、色、形状、動き、スピードなど、UI デザインの課題と重なるところが多いです。もうひとつの要素は、情報の構成や文章のスタイルといった「編集」とも呼べる Web アクセシビリティです。 前者の情報構造や操作性は、明確なガイドライン化がしやすく、チェックもしやすいですが、後者の編集の部分は、パッと見では判断がしにくいだけでなく、ガイドラインとして共有するのも難しいです。 Webアクセシビリティにある 2 つの『デザイン』 もちろん JIS X 8341–3:2010 でも「利用者が理解できるコンテンツ」を制作・維持できるようにすることが重要であると書かれていますが、技術で解決できるところに
大学サイトのスマホ対応が想像以上に遅れていて心配になった件 | マミオン有限会社-パソコン・数学研修、法人研修
先日発表された総務省の調査によると、最近の高校生のスマホ保有率はなんと【85%】、そして普段ネットにアクセスする際に最も利用する機器はスマホだという回答が【75%】もあったということです。 「平成25年度 青少年のインターネット・リテラシー指標等」の公表（総務省） 平成25年6月から7月にかけて、全国24の公立・私立の高等学校等において、約3500名の１年生相当を対象にテストを実施。併せて、利用している機器やトラブル経験の有無等についてアンケートを行い、クロス集計を実施。（N=3512） ・青少年の99％がインターネット接続機器を保有 ・スマートフォン保有者は昨年度(59％)から大幅に増加(84％) ・インターネットに接続する際、スマートフォンを最もよく利用する青少年が大幅増(48％→75％) 出所：総務省 その一方で、最近の日経BPコンサルティングの調べによると、高校生の閲覧者も多いであ
レスポンシブデザインの見た目を確認できるサイト「Responsive Checker」 | ライフハッカー・ジャパン
「Responsive Checker」はレスポンシブデザインの見た目を確認できるサイトです。確認したいスマートフォンの機種と画面の向きを設定すればOK。レスポンシブデザインに対応しているか、ひと目でわかります。 以下に使ってみた様子を載せておきます。まずはResponsive Checkerへアクセスしましょう。確認したいページのURLを入力します。 左側のメニューから確認したいデバイスを選べばOK。向きも縦と横どちらもありますよ。自分で画面サイズを指定することもできるので、確認したい機種がなければ自分で設定してみましょう。レスポンシブデザインのウェブページを作った際にはぜひご活用ください。 Responsive Checker （カメきち）
お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久
今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO（入力フォーム最適化）をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル（項目名）」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を
あとでまとめ読み！SEOで参考になるSlideShareまとめ | nanapi [ナナピ]
2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より「みんなで作る暮らしのレシピ」という考えのもと、ユーザーの皆さまに生活に関する様々な「ハウツー」を投稿していただく投稿型ハウツーサービスとして運営してまいりました。 約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。 掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。 長きに渡りnanapiを応援してくださり、本当にありがとうございました。
実例で納得！シニアが使えないサイトの例 | マミオン有限会社-パソコン・数学研修、法人研修
パソコン教室でシニア層にインターネットの使い方を教えているときほど 「ああ、ここがもう少し改善されれば！」と吠えたくなる時がある。 「知りたい事」「申し込みたいもの」「買いたいもの」があって ワクワクしているのに、多くの人が、若い人に取っては「些細な」ミスで サイト上で目的を達成できずに諦めたり、 諦めきれないからとサポートセンターに電話して 「その情報はホームページに載ってます」と言われ落ち込んだりしている。 今日は大学の公開講座に申し込もうとしている70歳代後半女性の話。 ウキウキの申し込み「大学の公開講座申し込みたいの。英語をやり直したいのよ」といらしたMさん。 「新聞の折り込みで講座を見たのだけど、ホームページから申し込んでって書いてあって。 ホームページを見たのだけどどうすればいいのかわからないけど ホームページからしか申し込めないらしいから、やり方教えて」 とのこと。 チラシに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://plus.appgiga.jp/masatolan/2014/03/25/51290/
ひとりでWeb制作できた！Webデザインの勉強にもなる独学「スライド」総まとめ
レスポンシブWebデザインの基礎
新着記事
