WebDesign/ProblemFinding
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2021
ソーシャルデザイン演習/2021
情報デザイン論/2021
Webデザイン演習/2021
情報デザイン演習IIA/2021
情報デザイン研究I/2021
卒業研究I,II
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*ProblemFinding
HTML+CSS+JavaScriptのコーディングと問題の発見について
~
***はじめに
デザイン行為において最も重要なことは「問題を発見する」と...
Webデザインにおいては、次元の異なる以下のような「問題」が...
-クライアントの抱える問題 > 要求分析の段階でしっかり調...
-開発チームが抱える問題 > プロジェクトマネージメントが...
-''開発途上で発生するバグ、すなわちコードの記述に関わる技...
ここでは3つめの技術的な問題について、授業中によく見かけ...
~
***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デザインにおいては、次元の異なる以下のような「問題」が...
-クライアントの抱える問題 > 要求分析の段階でしっかり調...
-開発チームが抱える問題 > プロジェクトマネージメントが...
-''開発途上で発生するバグ、すなわちコードの記述に関わる技...
ここでは3つめの技術的な問題について、授業中によく見かけ...
~
***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で実現してい...
~
~
ページ名: