HTML・CSSレビュープログラミングレッスン

HTML・CSSレビュー:レイアウトの不具合とレスポンシブ対応の修正

最短1日で納品修正対応込み品質チェック
プラン
安心決済詳しく
  • プランの範囲内の修正は無料です。
  • 納品から3日以内にご対応がない場合、自動的に承認されます。
注文する · ¥5,410

代金はお支払い時にお預かりし、納品を承認した時点ではじめて支払われます。

HTML・CSSレビュー:レイアウトの不具合とレスポンシブ対応の修正

成果物の例

スタンダードパッケージの例

コードレビュー:小さなネットショップの注文取り込みPythonスクリプト

コードの処理内容

  1. ショップから出力した orders.csv を読み込む
  2. 注文行ごとに stock.xlsx からSKUで商品を探し、数量を差し引く
  3. 更新した在庫を書き戻し、集計を import_log.txt に記録する

構成はわかりやすく、関数名も適切です。問題の多くは、想定と違う形式のデータが入ってきたときに起きています。

バグと弱点

No.行重要度内容
148高同じCSVを2回取り込めてしまう。処理済みの注文IDを確認していない。在庫がマイナスになる最も有力な原因
272高返品注文の空欄や「2.0」のような値で int(row["qty"]) が落ちる
395中SKUの照合が大文字・小文字を区別するため「gt-101」と「GT-101」が別商品扱い
4130中encoding="utf-8" を指定せずにファイルを開いており、Windowsで日本語の商品名が文字化けする
5201低素の except: が本当のエラーを隠し、ログが役に立たない

修正コード(抜粋)

問題1:取り込み済みの注文をスキップする

processed = load_processed_ids("processed_orders.txt")
for row in reader:
    if row["order_id"] in processed:
        continue
    # ... 既存の処理 ...
    processed.add(row["order_id"])
save_processed_ids("processed_orders.txt", processed)

理由:同じファイルでもう一度実行しても、各注文は1回しか反映されません。

問題2:数量を安全に読み取る

raw = (row.get("qty") or "").strip()
try:
    qty = int(float(raw))
except ValueError:
    log.warning("注文 %s:数量 %r が不正のためスキップ", row["order_id"], raw)
    continue

理由:返品や一部キャンセルの行は、取り込み全体を止めずに、わかりやすいメモを残してスキップされます。

問題3:SKUを正規化する

sku = row["sku"].strip().upper()

在庫の辞書を作る側にも同じ .strip().upper() を適用してください。

書き方と読みやすさ

  • process() が90行あります。read_orders、apply_to_stock、write_report に分けましょう。
  • row[7] のような列番号の直書きは、見出し名での参照に置き換えてください。

ご注意: 各修正は必ずファイルのコピーで試してください。今回はコードを読んでレビューしたもので、実行はしていません。

クライアント: 紅茶専門店のオーナー。ネットショップの注文CSVを在庫表に取り込む310行のPythonスクリプトをご自身で作成 ご相談内容:「ときどき在庫がマイナスになる。ファイルによってはスクリプトが止まる」

お客様とすべての情報は架空のものです。

このサービスについて

レイアウトの不具合の原因は、たいていいくつかに絞られます。スマートフォンではみ出す固定幅、設定を誤ったフレックスやグリッドのコンテナ、スタッキングコンテキストのせいで効かない z-index、互いにぶつかり合うメディアクエリなどです。HTMLとCSSを、現在の見た目と本来の見た目のスクリーンショットとともに貼り付けていただければ、レイアウトが崩れる理由を説明し、修正したCSSをお届けします。代替テキスト、フォームのラベル、見出しの順序など、すぐにできるアクセシビリティの改善点もお伝えします。

含まれる内容

  • 納品内容注文ページに書面のレビューをお届けします。内容は、レイアウトが崩れる理由、デスクトップとモバイル向けに修正したHTMLとCSSの断片、アクセシビリティに関するメモです。プレミアムでは、スタイルシートを再利用できるクラスに整理するプランも付きます。
  • レイアウトの修正Flexbox、グリッド、はみ出し
  • レスポンシブのルールぶつからないメディアクエリ
  • 重なり順と z-index要素が他の要素の裏に隠れる理由
  • セマンティックなHTML見出し、ランドマーク、ボタン
  • アクセシビリティの基本代替テキスト、ラベル、コントラスト

ご利用の流れ

  1. 1
    依頼内容コードとスクリーンショットを貼り付けていただきます
  2. 2
    通読レイアウトを崩すルールを見つけます
  3. 3
    チェック修正したCSSとメモが届きます

ご用意いただくもの

テキストで貼り付けたHTMLとCSS、デスクトップとスマートフォンでの問題のスクリーンショット、問題が起きるブラウザ、本来の見た目。

お伺いする内容:

  • 素のCSSですか、それともフレームワークですか?
  • どの画面サイズとブラウザで崩れますか?
  • そのセクションはどのような見た目にしたいですか?
  • ページはサイトビルダーで作りましたか、それとも手書きですか?

プランを比較

プランベーシック最大100行のマークアップ¥2,320スタンダード最大400行のマークアップ¥5,410プレミアムスタイルシートのプラン付きで最大1,000行¥10,670
納期1日2日3日
修正回数123
コードの行数最大100最大400最大1,000
修正済みの断片ありありあり
スタイルシート整理プランなしなしあり
注文する ベーシック注文する スタンダード注文する プレミアム

安心決済

お支払いは注文時ですが、代金が支払われるのは承認された納品に対してのみです。

  • 固定料金お支払い後にプランの料金が変わることはありません。
  • 代金はお預かりお支払い時、代金はお預かりするだけです。納品を承認した時点でサービス側に支払われます。
  • 納品前にチェックすべての成果物はお手元に届く前に品質チェックを受けます。承認前に注文ページで内容を確認できます。
  • 無料の修正依頼内容の範囲内で、プランで定められた回数まで修正を依頼できます。
  • 3日後に自動承認納品から3日以内に承認も修正依頼もない場合、自動的に承認されます。納品後に注文チャットでメッセージを送った場合、注文は保留されます。こちらから回答した後、3日間のカウントを再開することがあり、その際はチャットでお知らせします。
  • やり直しまたは全額返金結果が依頼内容と合わず修正でも解決しなかった場合、または作業に納期の2倍を超える時間がかかった場合は、注文チャットでご連絡ください。作業をやり直すか、代金を全額返金いたします。
詳しい仕組み →

質問と回答

実際のブラウザで確認してもらえますか?

いいえ、コードとスクリーンショットを読んで確認します。公開する前に、修正したCSSをお使いのブラウザで確認してください。

WixやTildaで作ったページも直してもらえますか?

そこに追加した独自のコードのみ対応します。ビルダー自体のレイアウトは、お送りいただけるコードではなく、そのエディターで管理されています。

これはアクセシビリティの完全な監査ですか?

いいえ。お送りいただいたコードの明らかな問題を指摘します。完全な監査には、公開中のページでスクリーンリーダーを使ったテストが必要です。

プラン
注文する · ¥5,410· 2日