2019年8月15日ツイートシェアB!はてブポケットPCサイトをレスポンシブ化する際の流れと注意点を紹介します。シンプルなサイトであれば数時間で終わります。おわりビューポートを設定するこれがないとレスポンシブが始まらないというほど重要なのが、ビューポート。<head>タグ内に以下を追記します。https://developers.google.com/web/tools/lighthouse/audits/has-viewport-meta-tag?hl=jaこれは、各デバイスでの幅の振る舞いを指定するものです。width=device-widthとすることで、デバイスの幅に応じたpxになります。iPhone7だと横幅は375pxとして認識されるといった具合です。画像の最大幅を100%にするレスポンシブデザインでは、スマホサイトで画像がはみ出るケースはとても多いです。画像が絶対にはみ出ないようにimgタグに以下のような指定をしておくことをおすすめします。auto;}最大幅を100%にして、アスペクト比を保つために高さをautoとしています。リンクボックスの定義を変更HTMLにはボックス要素があります。(厳密にはHTML5からその概念はないのですが、、)簡単に言うと、divやpなどの幅と高さを持つタグですね。赤の3つから成り立っています。デフォルトの設定では、横幅として認識されるのは、widthのエリアのみ。エリア内に収まるようにwidthを指定しているのに画面からはみ出る場合は、borderやpaddingが考慮されていないことが非常に多いです。いちいち計算するのもめっちゃ面倒くさい。この問題は、border-boxを使うことで簡単に解決することができます。以下のように指定してください。border-box;}これは、「widthの値にborderとpaddingを含めますよ」という指定になります。「widthとborderとpaddingを足して100%になるように...」といった計算をしなくて済むのでとても楽になります。新規で作る場合は上記のようにサイト全体に適応されるように作りますが、PCからのレスポンシブ化の場合はpaddingに依存した幅にしていることもあります。サイトの状態を見ながら、どこにborder-boxを適応させるかは考える必要があります。border-box;といった考え方で大丈夫です。固定幅に最大幅100%を設定PCサイトでは横幅を指定してあることがほとんどです。見るのは、以下のような指定の仕方。auto;}widthが固定値のままだとスマホで確実にはみ出してしまいます。レスポンシブデザインでは、固定値のwidthを設定するなら一緒に最大幅も100%に設定します。具体的には以下のとおり。auto;}これで、デバイスの横幅が狭くなっても最大幅は100%として表示させるため、はみ出すことはなくなります。横並びの解除PCデザインでは、横に広いために横並びのデザインが採用されているケースが多いです。一方のスマホの画面は、横に狭いために縦並びに直してあげる配慮が必要になります。以下のようなデザインは、幅が狭くなってきたら横並びを解除してあげて縦並びになるようにしてあげましょう。300px;}768px(iPad)以下なら横並びを解除する処理。100%;}}高さ指定は基本NGPCサイトでは改行が考慮されていない、高さを固定値で指定してあるケースが多々あります。レスポンシブデザインにおいては、高さを固定させる考えは基本的にダメです(もちろんダメじゃないケースもあったりするのですが...)heightline-heightの2つの要素が固定値の場合は注意しましょう。以下のような指定がされている場合。32px;}高さはautoで自動調整されるようにして、行間は固定値ではなく倍率で指定します。1.6の場合は文字サイズの1.6倍という解釈です。Mapなどの埋め込み要素は幅や高さをガッツリ記載するので、スマホ化した際に画面からはみ出しがちです。一手間必要ですが、レスポンシブ対応する方法がありますのでコードを紹介します。height="315"></iframe></div>まずは、iframeを囲う要素を用意します。56.25%という計算になります。}などに変えることで、横幅の指定も可能です。英字に注意!ブラウザは一応文字の解釈をしていて、意味のまとまりを考慮した改行を行うようになっています。ここで生じる問題は、単語で区切れない文字列の場合は改行されずにどこまでも横に記載されてしまうという点です。ある例としては、「URL」。単語の区切りがないので、改行されずに水平スクロールが発生することが多いです。いった改行できない文字列については、強制的に改行させるCSSを適応させてあげてください。break-word;}賛否ありますが、わたしは全体的に当ててもいいかなと思っています。(もちろん改行されない要素に部分的に当ててもOK)水平スクロールは恥ずかしいと心得るレスポンシブデザインはどのデバイスでも「いい感じに表示できますよ!」といったデザインです。恥ずかしいのは水平スクロールが生じてしまうこと...。レスポンシブデザインにしたら、水平スクロールが発生していないか、確認するようにしましょう!(コーダーでもできない人がいたりするのですが...)横揺れする要因は以下で詳しくまとめています。@haniwa008難しく考えられがちですが、レスポンシブ化はとても単純です。1行で説明すると、ビューポートでデバイスの幅を横幅に指定して、各要素の横幅を100%にしてはみ出さないようにする、だけ。HTMLとCSSの知識がある人なら少し勉強するだけでできちゃいます。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。前の記事WordPressの編集画面にメタボックスを追加する方法はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。