WebDesign/ProblemFinding をテンプレートにして作成

開始行:
*ProblemFinding HTML+CSS+JavaScriptのコーディングと問題の発見について ~ ***はじめに デザイン行為において最も重要なことは「問題を発見する」と... Webデザインにおいては、次元の異なる以下のような「問題」が... -クライアントの抱える問題　＞　要求分析の段階でしっかり調... -開発チームが抱える問題　＞　プロジェクトマネージメントが... -''開発途上で発生するバグ、すなわちコードの記述に関わる技... ここでは３つめの技術的な問題について、授業中によく見かけ... ~ ***menu #contents2_1 ~ **本当にコードの問題ですか？ 何かおかしい、というとき、まず疑うべきは、''ほんとに書い... ~ ***あなたのページだけが異常ですか？ めったにないことですが、ブラウザそのものの異常で正しくレ... ~ ***再読み込み(リロード)しましたか？ ブラウザは一定の期間、キャッシュ(表示歴のあるページのデー... 　ただし、HTML以外のCSSやJSなど、リンクでインクルードする... -Firefox：Shift + 「再読み込み」｜ Ctrl + F5 ｜Ctrl + R ... -Google Chrome：Ctrl + Shift + R （Mac では ⌘ +Shift + R） -Safari： Shift + 「再読み込み」｜Ctrl + F5 or Ctrl + R ... -Internet Explorer：Ctrl +「最新の情報に更新」｜ Ctrl-F5 Chrome では、開発コンソールの表示中はリロードボタンにオプ... ~ ***編集中のファイルと、チェックしているファイルは同一です... ファイルやフォルダの場所に無頓着なPC初心者の方が最も陥り... ~ ***別のブラウザで試してみましたか？ ブラウザを変えると正しく表示されることがあります。という... &size(12){ただし、動くブラウザの方がおかしい（後述）とい... -そもそも当該ブラウザにその機能が実装されていない・・とい... -実験段階の仕様であれば、[[ベンダープレフィックス>Google:... 当該機能のブラウザ対応状況は、[[Can I Use?>http://caniuse... -特定のブラウザでは、環境初期設定で動作が「無効」になって... &size(12){そもそも閲覧者のブラウザの状況は様々なので、標... ~ ~ **問題はそこですか？ ''問題は他（注目対象の外）にある''ことが多いものです。画... ~ ***全角スペースが混入していませんか？ タイトルや文章以外のところに全角スペースがあると、タグや... ~ ***エラー箇所以外の場所をチェックしましたか？ 開発コンソール(後述)にエラーが表示された場合、まずは当該... -HTMLタグのエラーの場合、それよりも上方のコードに問題があ... --正しく閉じられていないタグがあるケース --値がきちんとダブルクォート( ” ) で閉じられていないケ... -CSSの場合は、上も下もあります。 --当該箇所よりも上、文の最後にセミコロン( ; )が抜けていま... --当該箇所よりも下に、同じセレクタに対する記述がありませ... CSSは後着優先。以前の指示を、後から書いた記述で上書きして... ~ ***問題はCSSではなく、HTML、JavaScriptの方ではありません... テンプレート作りでは、多くの学生さんがCSSの記述に時間を割... -HTMLは正しくコーディングされていますか？ ブラウザは、部分的に閉じタグが無いなどの問題には、柔軟に... ''Firefoxの「ソースを表示」では、タグの構成にエラーがあれ... -JavaScriptでスタイルを制御していませんか？ 例えばウインドウのサイズをJS側で制御するようなコードを含... ~ ***「動く方がおかしい」ということありませんか？ ブラウザ間の比較で動かないものがあると、私たちは通常「動... 　例えば、Mac の Safari でローカルの動作確認をしている場... 　つまりこの場合、''動かないブラウザに対策を施すのではな... 　で、結論。''はじめからルールに厳しい環境で開発をする'' ... ~ ***ブラウザ間で差がある・・それは本当ですか？ ブラウザ間の違いではなく、たまたま開いている各ブラウザの... 私たちの視野は狭く、意識は偏見に満ちています（だから災害... &aname(DeveloperTool); ~ ~ **ブラウザの開発ツールを利用する ***開発ツールの起動 FirefoxやChrome、Safariには、開発支援ツールが標準で実装さ... -Firefoxの場合 --ページ上で右クリック＞要素を調査　※これが最も早いです --トップメニュー＞ツール＞Web開発＞開発ツールを表示 --右上のメニューボタン＞開発ツール＞開発ツールを表示 -Cromeの場合 --ページ上で右クリック＞検証 --トップメニュー＞表示＞開発/管理＞デベロッパーツール --右上のメニューボタン＞その他のツール＞デベロッパーツール -Safariの場合 --ページ上で右クリック(要カスタマイズ)＞要素の詳細を表示 --トップメニュー(要カスタマイズ)＞開発＞Webインスペクタを... --ツールバー(要カスタマイズ)＞Webインスペクタアイコンをク... --''補足''：Safariはデフォルトが「素人モード」になってい... ・環境設定＞詳細＞開発メニューを表示　にチェック 　この操作で、メニューバーに「開発」の項目が表示されると... 　コンテクストメニュー（右クリックで表示されるメニュー）... 　「ソースを表示」が出るようになります。 ・環境設定＞詳細＞スマート検索フィールド 　Webサイトの完全なアドレスを表示 　にチェック -なお、開発ツールはショートカットでも出せます。 Firefox, Chrome とも [command]+[option]+[i]（Windowsは [F... ~ ***開発ツールの使い方 &color(red){ここではFirefoxの例で説明します。どのブラウザ... -まず、開発ウインドウの出し方について ウインドウ右上のアイコンで、ページの下・右・独立ウインド... -開発ウインドウ＞ 要素選択 ページ上の要素選択で、当該部分のHTMLソースがハイライト表示 -開発ウインドウ＞インスペクタ --HTMLソースに触れるとページ上の当該部分がハイライト表示... --CSSの各プロパティについて、その有無による表示の違い、さ... 　　 &lightbox(InspectorHTML.png,,25%);　　&lightbox(Inspector... -コンソール CSSやJSのエラーが行番号とともに表示されます。 --「警告」は、あくまで警告なので、そのままでも大丈夫です... --JSパネルでエラー（赤字）が出ている場合は、その行で機能... ~ ~ **ネット検索の活用 同じ問題で悩んでいる人はたくさんいて、特にWeb開発について... -「どう書くか」は調べれば出てきます。重要なのは「どう質問... -記事の日付に注意 Webの技術は日々変化しています。かつて10行のJSで実現してい... ~ ~

終了行:
*ProblemFinding HTML+CSS+JavaScriptのコーディングと問題の発見について ~ ***はじめに デザイン行為において最も重要なことは「問題を発見する」と... Webデザインにおいては、次元の異なる以下のような「問題」が... -クライアントの抱える問題　＞　要求分析の段階でしっかり調... -開発チームが抱える問題　＞　プロジェクトマネージメントが... -''開発途上で発生するバグ、すなわちコードの記述に関わる技... ここでは３つめの技術的な問題について、授業中によく見かけ... ~ ***menu #contents2_1 ~ **本当にコードの問題ですか？ 何かおかしい、というとき、まず疑うべきは、''ほんとに書い... ~ ***あなたのページだけが異常ですか？ めったにないことですが、ブラウザそのものの異常で正しくレ... ~ ***再読み込み(リロード)しましたか？ ブラウザは一定の期間、キャッシュ(表示歴のあるページのデー... 　ただし、HTML以外のCSSやJSなど、リンクでインクルードする... -Firefox：Shift + 「再読み込み」｜ Ctrl + F5 ｜Ctrl + R ... -Google Chrome：Ctrl + Shift + R （Mac では ⌘ +Shift + R） -Safari： Shift + 「再読み込み」｜Ctrl + F5 or Ctrl + R ... -Internet Explorer：Ctrl +「最新の情報に更新」｜ Ctrl-F5 Chrome では、開発コンソールの表示中はリロードボタンにオプ... ~ ***編集中のファイルと、チェックしているファイルは同一です... ファイルやフォルダの場所に無頓着なPC初心者の方が最も陥り... ~ ***別のブラウザで試してみましたか？ ブラウザを変えると正しく表示されることがあります。という... &size(12){ただし、動くブラウザの方がおかしい（後述）とい... -そもそも当該ブラウザにその機能が実装されていない・・とい... -実験段階の仕様であれば、[[ベンダープレフィックス>Google:... 当該機能のブラウザ対応状況は、[[Can I Use?>http://caniuse... -特定のブラウザでは、環境初期設定で動作が「無効」になって... &size(12){そもそも閲覧者のブラウザの状況は様々なので、標... ~ ~ **問題はそこですか？ ''問題は他（注目対象の外）にある''ことが多いものです。画... ~ ***全角スペースが混入していませんか？ タイトルや文章以外のところに全角スペースがあると、タグや... ~ ***エラー箇所以外の場所をチェックしましたか？ 開発コンソール(後述)にエラーが表示された場合、まずは当該... -HTMLタグのエラーの場合、それよりも上方のコードに問題があ... --正しく閉じられていないタグがあるケース --値がきちんとダブルクォート( ” ) で閉じられていないケ... -CSSの場合は、上も下もあります。 --当該箇所よりも上、文の最後にセミコロン( ; )が抜けていま... --当該箇所よりも下に、同じセレクタに対する記述がありませ... CSSは後着優先。以前の指示を、後から書いた記述で上書きして... ~ ***問題はCSSではなく、HTML、JavaScriptの方ではありません... テンプレート作りでは、多くの学生さんがCSSの記述に時間を割... -HTMLは正しくコーディングされていますか？ ブラウザは、部分的に閉じタグが無いなどの問題には、柔軟に... ''Firefoxの「ソースを表示」では、タグの構成にエラーがあれ... -JavaScriptでスタイルを制御していませんか？ 例えばウインドウのサイズをJS側で制御するようなコードを含... ~ ***「動く方がおかしい」ということありませんか？ ブラウザ間の比較で動かないものがあると、私たちは通常「動... 　例えば、Mac の Safari でローカルの動作確認をしている場... 　つまりこの場合、''動かないブラウザに対策を施すのではな... 　で、結論。''はじめからルールに厳しい環境で開発をする'' ... ~ ***ブラウザ間で差がある・・それは本当ですか？ ブラウザ間の違いではなく、たまたま開いている各ブラウザの... 私たちの視野は狭く、意識は偏見に満ちています（だから災害... &aname(DeveloperTool); ~ ~ **ブラウザの開発ツールを利用する ***開発ツールの起動 FirefoxやChrome、Safariには、開発支援ツールが標準で実装さ... -Firefoxの場合 --ページ上で右クリック＞要素を調査　※これが最も早いです --トップメニュー＞ツール＞Web開発＞開発ツールを表示 --右上のメニューボタン＞開発ツール＞開発ツールを表示 -Cromeの場合 --ページ上で右クリック＞検証 --トップメニュー＞表示＞開発/管理＞デベロッパーツール --右上のメニューボタン＞その他のツール＞デベロッパーツール -Safariの場合 --ページ上で右クリック(要カスタマイズ)＞要素の詳細を表示 --トップメニュー(要カスタマイズ)＞開発＞Webインスペクタを... --ツールバー(要カスタマイズ)＞Webインスペクタアイコンをク... --''補足''：Safariはデフォルトが「素人モード」になってい... ・環境設定＞詳細＞開発メニューを表示　にチェック 　この操作で、メニューバーに「開発」の項目が表示されると... 　コンテクストメニュー（右クリックで表示されるメニュー）... 　「ソースを表示」が出るようになります。 ・環境設定＞詳細＞スマート検索フィールド 　Webサイトの完全なアドレスを表示 　にチェック -なお、開発ツールはショートカットでも出せます。 Firefox, Chrome とも [command]+[option]+[i]（Windowsは [F... ~ ***開発ツールの使い方 &color(red){ここではFirefoxの例で説明します。どのブラウザ... -まず、開発ウインドウの出し方について ウインドウ右上のアイコンで、ページの下・右・独立ウインド... -開発ウインドウ＞ 要素選択 ページ上の要素選択で、当該部分のHTMLソースがハイライト表示 -開発ウインドウ＞インスペクタ --HTMLソースに触れるとページ上の当該部分がハイライト表示... --CSSの各プロパティについて、その有無による表示の違い、さ... 　　 &lightbox(InspectorHTML.png,,25%);　　&lightbox(Inspector... -コンソール CSSやJSのエラーが行番号とともに表示されます。 --「警告」は、あくまで警告なので、そのままでも大丈夫です... --JSパネルでエラー（赤字）が出ている場合は、その行で機能... ~ ~ **ネット検索の活用 同じ問題で悩んでいる人はたくさんいて、特にWeb開発について... -「どう書くか」は調べれば出てきます。重要なのは「どう質問... -記事の日付に注意 Webの技術は日々変化しています。かつて10行のJSで実現してい... ~ ~

ページ名: