レスポンシブのタブレット幅が崩れたまま残った｜AIが書いたSassのスマホ用の指定を、自分で1023px以下に広げた記録
- 著者
ゆきしょう
こんにちは、ゆきしょうです。
建設会社の採用サイトを、Claude Codeに組ませて作っています。
AIが書いたCSSを、今回は自分の手で直してみました。
スマホ用の指定を、1023px以下まで広げる直しです。
ところが、テスト用のサーバーに上げたあとも、下層ページの画面幅1023px〜768pxはかなり崩れたままでした。
広げたあとも崩れていない所と、崩れたまま残った所を書きます。
AIが書いたCSSは、スマホ用の指定が768px以下に書かれていた
このサイトのCSSは、PC用を先に書き、狭い幅の指定をあとから上書きする作りでした。
ブレークポイントは、Sassのファイルにこう決めてあります。
- sm：600px以下
- md：768px以下
- lg：1023px以下
- xl：1440px以上
スマホ用の組み方は、mdに書かれていました。
mdは768px以下なので、スマホの組み方は768px以下だけに効きます。
AIが書いたCSSは、Sass（SCSS）で役割ごとのファイルに分かれていた
まず、CSSがどこに書いてあるのかをClaude Codeに聞きました。
答えは、Sass（SCSS）で書いているというものでした。
ファイルは、役割ごとのフォルダに分かれていました。
- foundation・global：土台と共通の設定
- layouts：ヘッダー・フッター
- components：ボタンなどの部品
- utilities：補助
- projects：ページ別
入口のstyle.scssが、全部のファイルを読み込みます。
それをViteが1本のCSSにまとめて、サーバーに上げるのはその出来上がりです。
ページ別のファイルは、「ページ名-節の名前」で置かれていました。
どのファイルか迷ったときは、ブラウザで直したい所を右クリックし、「検証」を開きます。
見えたクラス名で検索すれば、書いてある場所が見つかります。
直す手順は、確認用のサーバーを立てて保存するだけ
次に、自分で直すときの手順を聞きました。
- 作業フォルダに移る
- corepack yarn dev で、確認用のサーバーを立ち上げる
- ブラウザで localhost:5173 のページを開く
- 直すファイルを探して、直して保存する
- corepack yarn build:static で、上げる用のファイルを作る
- できたファイルを、テスト用のサーバーへ上げる
保存すると、ブラウザが自動で読み直して、結果がすぐ見えます。
途中で、Dockerを使っているのかも聞きました。
今の静的なサイトの作業では、Dockerは使っていませんでした。
Dockerを使うのは、このあとのWordPress化からです。
mq(md)をmq(lg)に変えて、スマホの組み方を1023px以下に広げた
直し方は、mq(md)と書いてある所を、mq(lg)に書き換えることにしました。
スマホ用の組み方が、768px以下から1023px以下に広がります。
書き換えたのは、会社紹介と仕事紹介のページの4ファイル、合わせて48か所です。
- 会社紹介ページ：2ファイル・31か所
- 仕事紹介ページ：2ファイル・17か所
入社からの道のりの節には、もともとlgだけの調整が2か所ありました。
この2か所は、コメントにして外しました。
働く環境の節は、スマホ用の背景画像の指定を、コメントにして外しました。
直したあと、上げる用のファイルを作り直して、テスト用のサーバーへ上げました。
広げたあとも、崩れたまま残った節があった
あとでClaude Codeに900px幅で3ページを撮って見てもらうと、次の節は崩れていませんでした。
- 会社紹介：ファーストビュー・会社紹介・数字で見る・強み
- 仕事紹介：入社からの道のり
- 社員紹介：ファーストビュー
一方で、崩れたまま残った所もありました。
- 社員インタビューの名前・年代が、右端で切れて読めない
- 社員インタビューの本文は、左右の余白が0で、文字が画面の端に付いている
- 1日のスケジュールは、5個並んだあと、残りが真ん中に落ちて流れが読めない
- 英字の見出しが、単語の途中で折り返す
- 働く環境の英字の見出しが、2行にならず、左右が切れる
- 仕事の流れの番号が、枠から9〜10pxはみ出す
- 3ページ共通のフッターが、左半分に寄る
スマホの組み方を広げた節にも、気になる所が出ました。
900px幅で見ると、写真が大きく文字が小さく、崩れではないものの間延びして見えました。
タブレット幅は「スマホを広げる」だけでは終わらない
タブレット幅をスマホと同じ組み方にすると、間延びする節が出ます。
残った崩れは、これから直していきます。
Sassのメディアクエリの書き方を学び直すなら、Udemyに「Sass」の講座がまとまっています。
AIに書かせたコードとカンプのずれを測った記録は、こちらに書きました。
以上、AIが書いたSassのスマホ用の指定を、自分で1023px以下に広げた記録でした。
