お気に入りのカテゴリを選択して、
学習を開始してください。

( 0 レビュー )

HTML/CSSのデバッグ講座

¥1,000

( 0 レビュー )

レッスンレベル

初心者

合計時間

10分

概要

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の理解を深め、スキルアップして頂こうという趣旨のものです。抱えているバグが無い場合、ブラウザの開発者モードの簡単な使い方を教えるくらいの内容になります。

学べること

  • 解決できないHTML/CSSのデバッグを一緒に行います。
  • デバッグを通して、問題個所の見つけ方、解決方法などが分かります。

要件

  • 概要欄に記載したチェック項目を読んで、まずは自力での解決を試みましょう。
  • レッスンの購入前にどういうトラブルなのか、メッセージを送っていただき、所定の方法で問題のファイル一式か、問題のウェブページのURLを送っていただきます。ちゃんと解決できることを確認したうえでレッスン開始となります。
  • ZOOMを使いますので、十分なインターネット環境(光、ADSL回線)で接続してください。
  • インターネットカフェなどは回線ひっ迫や周辺の騒音により通話不能に陥る場合がありますので可能な限り避けてください。

対象者

  • 今現在HTML/CSSのデザイン崩れなどで悩んでいる方
  • ウェブデザイン・コーディングを勉強中の方
  • 周りに問題解決の相談ができる人のいないウェブコーダーの方

講師

0 /5

1 レッスン

1976年沖縄生まれ。筑波大学第三学群基礎工学類を卒業後、電機メーカーの研究開発員などを経て沖縄に戻り、2011年7月からフリーランスウェブデザイナーとして活動開始。独自のCSSフレームワークやWordPressテーマを作成、主にウェブ制作会社のコーディングの下請けや技術サポートなどを行っています。 2016年頃からウェブデザイナー(コーダー)の人材育成へとシフト。2018年、正しい知識を持って技術を伝えるため、国家資格のウェブデザイン技能検定に合格し、一級ウェブデザイン技能士となりました。 コーディングの専門はHTML、CSS、WordPressで、PHP、JavaScriptとjQueryを少々。実現が難しそうなデザインが大好物です。 グラフィックデザインは理論方面が中心。SEO、ライティング、セキュリティ、アクセシビリティなど、ウェブサイトの制作・運用についても広くカバーしています。
¥1,000

レッスンに含まれる内容

  • Zoomでデバッグの実演
  • なぜバグとなったのか、どうしてこれで解決できたのかの解説
  • バグを見つけるための方法やポイントの解説

シェア