COLUMN コラム

PCサイトのコーディングを終えてからレスポンシブ対応を進める時、「そういえばここは◯◯にしなきゃいけないんだった…」とつい忘れがちだけど、重要なポイントってありますよね？あらかじめ注意すべきポイントを抑えておけば、手戻りが発生することなく効率良くコーディングすることができます。

今回はレスポンシブサイトのコーディングで、忘れてしまいがちだけど考慮すべきポイントについてご紹介します。

1. 見出しの行間指定

レスポンシブ対応で忘れがちなポイントの1つが見出しの行間指定です。PCサイトでは１行に収まっていたテキストが、SPサイトでは改行されることが多々あります。その時にline-heightの指定が適切に指定されていないと、行間が狭すぎたり広くなり過ぎたりと、読みづらくなってしまいます。

見出しの行間はSPサイトでの改行を踏まえて設定しておきましょう。

2. レスポンシブの改行位置

PCサイトではキレイに文字組みされていたキャッチコピーや見出しが、SPサイトではブラウザ幅に応じて改行されてしまうのは、ちょっと見栄えがよろしくありません。

brタグにclass=”sp-br”などのクラスを付与して改行位置を調整するのもありですが、このやり方ではまだ崩れてしまう可能性があります。キレイに改行させたいテキストをspanタグで囲い、inline-blockを適用しましょう。

3. flexのspace-betweenの最終行

新着記事などの一覧表示に使われるカードレイアウトをコーディングする際、要素をきりの良い数字で作成するとdisplay: flexとjustify-content: space-betweenで作りがちです。しかし、1行3列のレイアウトに要素が４〜５つしかなかった時、、最終行の要素は左寄せではなく両端寄せになってしまいます。justify-content: flex-startと指定しましょう。

4. 改行される要素の高さ指定

見出しに限らずレスポンシブ対応で文字が改行されてしまう箇所は多いです。お問い合わせフォームでよく使われるラベルやボタンなどにheight指定をしていると、SPサイトでは枠からテキストがはみ出てしまうことが良くあります。高さはpaddingで調整するようにしましょう。

5. アスペクト比が異なる画像に対応

「お知らせ」などCMSでクライアントが管理する投稿コンテンツは、デザイン上想定していたアスペクト比とは異なる画像が使用される可能性があります。その際にoverflow: hiddenを設定していないとレイアウトが大きく崩れてしまいます。
投稿コンテンツの画像エリアにはoverflow:hiddenを忘れないようにしましょう。

6. transitionで予期しないアニメ―ション

hover時に滑らかなアニメーションを指定する際、深く考えずにtransition: allを設定していると、幅を縮めた時に予期しないアニメーションが発生することがあります。アニメーションさせるつもりのないプロパティがtransition: allの指定によって、すべてアニメーションになっているのが原因です。面倒臭がらずにtransition : opacity 0.3, transform 0.3 とアニメーションさせたいプロパティを指定しましょう。

おわりに

コーディング業務で指定が漏れてしまいがちなポイントについてまとめてみました。

デザインからコーディングをする際に、常に理想の状態（文字数や画像サイズ）を前提としたコーディングをしていると、このような落とし穴にはまってしまいがちです。Webデザイナーとしては実際の運用を常に見越して、あらかじめ注意すべきポイントを抑えたコーディングを心がけましょう。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。Webサイトについてお悩みのある方はお気軽にお問い合わせください。