HTML/CSSのデバッグと解説を通して、コーディングのスキルアップを図ります。

「どうしてもサイトのデザインが崩れる」「なぜうまくいかないのか分からない」

HTML/CSSのコーディングをしていて、バグを解消することができない。周りに聞ける人もいない。そんな状態に陥ってどうしようもないあなたをお手伝いします。

受講の前に！CSSが効かないときのチェック項目

「CSSが効かない！」というのはウェブコーディングでよくある話です。あなたがそれで悩んでいるのなら、深呼吸して以下のチェックを行ってください。大抵の場合これで解決します。

1. HTMLのセレクタにする属性名が、例えばclass= が、classs= とかcrass= のようなスペルミスをしていないか
2. 対象のセレクタ（クラス名など）のスペルを間違っていないか
   ⇒目で見ただけでは分からない場合があります。HTMLでコピー→CSSにペーストでチェック
3. idとclassを取り違えていないか
   ⇒例えば、htmlタグには id=”hoge” となっているのに、CSSでは .hoge { ~:~; }と書いている、あるいはその逆
4. ブラウザキャッシュが効いていないか
   ⇒シフトキーを押しながら再読み込み（更新ボタンかF5キーを押す）してキャッシュをクリアしましょう
5. ちゃんとCSSファイルを読み込んでいるか
   ⇒CSSのリンクがあるか、リンク切れしていないか再確認
6. CSSの優先順位（詳細度など）で負けていないか
   ⇒開発者モードで確認
7. Sassを使っている場合、コンパイルを忘れていないか。あるいはコンパイルエラーを起こしていないか
   ⇒コンパイルされたCSSファイルの更新時刻をチェックする。エディタの機能やプラグイン等でコンパイルしている場合は、エディタを再起動してみる。

これらのチェックを行っても解消されない、あるいはやり方が分からない（開発者モードの使い方が分からないなど）場合は受講しましょう。ツールの使い方、調べ方を含め、自力で解決するための方法もお教えします。

受講の流れ

「お金を払って受講したのにデバッグできなかった」という事態を避けるため、講座の購入前にどういうトラブルなのかを教えていただきます。

1. 講師プロフィールページの「メッセージを送る」ボタンを押して、タイトルに「HTML/CSSのデバッグ講座」と入力し、本文に現在困っている内容を記載してください。
   • もしも現在、テストサーバーなど、リモートサーバーに問題のページをアップロードしていて、インターネット上で確認できる場合は、そのURLも記載してください。
   • URLを記載していない場合は、関連ファイルをまとめてzip圧縮し、返信メールに記載したURLから、送付していただきます。
2. こちらで問題のコードを確認したら、受講の可否と講座の日時調整を行います。
3. 講座を購入いただいた後、開講となります。

関連ファイルのzip圧縮の方法

Windowsの場合：問題のHTML,CSSファイルがあるフォルダを右クリックし、「圧縮」→「.zip」を選択。デスクトップに「フォルダ名.zip」の圧縮ファイルが作られます。

Macの場合：問題のHTML,CSSファイルがあるフォルダをコマンドキー＋クリックまたは二本指タップし、「圧縮」を選択。

機密保持について

• 講座開始前のメッセージによる相談の時点から、講座終了までに頂いた情報・ファイルは、問題を解決するためにのみ使用されます。
• 頂いたファイル類は、講座終了の時点ですべて廃棄します。

Q and A

Q: JavaScriptは対象外ですか？

A: HTMLとCSSだけならほぼ100%解決できる自信はありますが、JavaScriptが絡むと調査の難度が跳ね上がるため、この金額と時間では対応が困難です。とはいえ、関係しているのが10行未満の短いJavaScriptであれば何とかなるかもしれないので、とりあえず相談いただければと思います。
※スライドショーなど、プラグインやパッケージなどは対象外になります。

Q: WordPressは対象外ですか？

A: 動作・表示チェックのための準備や、受講者に用意していただくものが多いため、本講座では取り扱えません。

Q: 手元にバグのあるファイルがありません。

A: この講座は、受講者が抱えているバグをもとにHTML/CSSの理解を深め、スキルアップして頂こうという趣旨のものです。抱えているバグが無い場合、ブラウザの開発者モードの簡単な使い方を教えるくらいの内容になります。