レスポンシブ対応の例

2019.05.17
Web

参考サイト　https://sera-dc.com/
こんな感じのサイトにします。

header右に①ハンバーガーメニュー、②WEB予約、③アクセス　がボタンとしてあります。
①~③はスクロールするとついてきます。

1. viewportの設定
2. スマホ用CSSの読み込み
3. スマホナビの表示・更新
- 3.1. テンプレートの更新
- 3.2. CSSの更新
4. sp.cssの更新
- 4.1. 基本的な流れ
5. その他　レスポンシブ対応にあたって

viewportの設定

テンプレートを開き、以下に差し替える

<meta name=”viewport” content=”width=1200px,user-scalable=yes” />
↓
<meta name=”viewport” content=”width=device-width,user-scalable=yes”>

viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。 … 表示のされ方は、制作者がmeta要素のviewportで指定することができます。
参考　https://app.codegrid.net/entry/whats-viewport

スマホ用CSSの読み込み

以下２つを読みこんでいない場合は読みこむ

<link rel=”stylesheet” type=”text/css” href=”../css/sp_common.css” media=”all” />
<link rel=”stylesheet” type=”text/css” href=”../css/sp.css” media=”all” />

ここまでいくとこんな感じの表示になります。

まだむちゃくちゃですね。

スマホナビの表示・更新

templateに下記のようなナビがソース上にある場合が多いので、その部分のソースを参考サイトのソースを元に書き換えます。

テンプレートの更新

↓参考サイトのtemplateファイルにあったナビのソース

<!– ↓スマホのナビここから↓ –>
<div class=”sp_navi sp”>
<h1><a href=”../index.html”><img src=”../images/logo.svg” alt=”Séra Dental Clinic”></a></h1>

<dl>
<dt><a class=”sp_nav_btn”></a>
<a href=”https://www.genifix.jp/sera_dental_clinic-caa/p/reserve/first_time/interview” target=”_blank”>WEB予約</a>
<a href=”../access.html”>アクセス</a>
</dt>

<dd>
<div class=”sp_navi_wrap”>
<ul class=”sp_link clearfix”>
<li><a href=”../index.html”>ホーム</a></li>
<li><a href=”../doctor.html”>スタッフ紹介</a></li>
<li class=”click_menu2″><a>診療案内</a>
<div class=”click_menu2″>
<ul>
<li><a href=”../medical/index.html”>診療案内</a></li>
<li><a href=”../medical/medical01.html”>一般歯科</a></li>
<li><a href=”../medical/medical02.html”>歯周病</a></li>
<li><a href=”../medical/medical03.html”>予防歯科</a></li>
<li><a href=”../medical/medical04.html”>小児歯科</a></li>
<li><a href=”../medical/medical05.html”>口腔外科</a></li>
<li><a href=”../medical/medical06.html”>欠損・補綴</a></li>
<li><a href=”../medical/medical07.html”>審美歯科</a></li>
<li><a href=”../medical/medical08.html”>ホワイトニング</a></li>
</ul>
</div>
</li>
<li><a href=”../clinic.html”>医院案内</a></li>
<li><a href=”../access.html”>アクセス</a></li>
<li><a href=”http://sera-dc.com/blog/” target=”_blank”>ブログ</a></li>
</ul>
</div><!– .sp_navi_wrap –>
</dd>
</dl>
</div>
<!– ↑スマホのナビここまで↑ –>

CSSの更新

参考サイトの該当箇所のソース（sp.css）をまるっとコピーして、制作しているサイトのCSSに上書きします。

/*============================================================================

nav

============================================================================*/

nav{
display:none;
}
.sp_navi {
display:block;
position:fixed;
top:0;
left:0;
width:100%;
font-size:18px;
font-weight:bold;
z-index: 9998;
}
.sp_navi h1{
text-align: center;
width: 100%;
padding: 10px 0 2px;
background-color: rgba(255,255,255,0.85);
}
.sp_navi h1 span,
.sp_navi h1 img{
display:block;
width: 221px;
height: 36px;
margin: 0 auto;
}
.sp_navi h1 a{
vertical-align:middle;
}
.sp_navi h1 img{
z-index: 9999;
position:relative;
}
.sp_navi dl {
}
.sp_navi dl dt {
height: 56px;
font-weight:bold;
cursor:pointer;
padding: 0;
font-size:18px;
display:block;
color:#fff;
line-height: 2;
background-color: rgba(255,255,255,0.85);
}
.sp_navi dl dt i{
margin-right:2%;
}
.sp_navi dl dd {
display:none;
}
.sp_navi_wrap {
width: 100%;
height: calc(100vh – 56px);
overflow: auto;
}
.sp_navi ul{
background: #3B3835;
}
.sp_navi ul li {
display:block;
width: 100% ;
line-height:1;
font-size:15px;
font-weight:normal;
}
.sp_navi ul li i{
margin-right: 4%;
color: #fff;
font-size: 28px;
vertical-align: middle;
position: relative;
top: -2px;
left: -6px;
}
.sp_navi ul li a {
display:block;
padding:4% 2% 4% 8%;
width: 100%;
color:#fff;
text-decoration:none;
font-size: 16px;
border-bottom:1px solid #fff;
}
.sp_link li div{
display:none;
}
.sp_navi .sp_link li div ul {
background-color: #545454;
}
.sp_navi ul li div ul li a {
padding-left: 12%;
width: 100%;
font-size: 15px;
letter-spacing: 0;
}
.sp_navi ul li div ul li a i {
margin-right: 2%;
}

.sp_navi dt a {
display: block;
float: right;
width: 56px;
height:56px;
position: relative;
z-index: 9999999;
background-color: #3B3835;
}
.sp_navi dt a.sp_nav_btn::after {
position: absolute;
width: 56px;
left: 0;
bottom: 2px;
content: ‘MENU’;
font-size: 11px;
text-align: center;
color: #FFF;
}
.sp_navi dt a span {
display: block;
background: #fff;
width: 26px;
height: 2px;
position: absolute;
left: 15px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
}
.sp_navi dt a span:first-child {
top: 14px;
}
.sp_navi dt a span:nth-child(2) {
margin-top: -1px;
top: 23px;
}
.sp_navi dt a span:last-child {
top: 30px;
}
.sp_navi dt a.sp_nav_btn.active::after {
content: ‘CLOSE’;
}
.sp_navi dt a.active span:first-child {
-webkit-transform: translateY(8px) rotate(45deg);
-moz-transform: translateY(8px) rotate(45deg);
-ms-transform: translateY(8px) rotate(45deg);
transform: translateY(8px) rotate(45deg);
}
.sp_navi dt a.active span:nth-child(2) {
opacity: 0;
}
.sp_navi dt a.active span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
-moz-transform: translateY(-8px) rotate(-45deg);
-ms-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}

.sp_navi dt .sp_navi_tel a {
display: block;
float: left;
width: 34%;
height: auto;
box-sizing: border-box;
margin-top: 10px;
margin-left: 3%;
line-height: 38px;
background-color: #AACD37;
border-radius: 4px;
font-size: 15px;
font-weight: bold;
color: #fff;
text-align: center;
}
.sp_navi dt .sp_navi_tel a img {
height: 22px;
width: auto;
margin-right: 6px;
vertical-align: middle;
}
.sp_navi dt .sp_navi_access a {
display: block;
float: left;
width: 38%;
height: auto;
box-sizing: border-box;
margin-top: 10px;
margin-left: 2%;
line-height: 38px;
background-color: #AACD37;
border-radius: 4px;
font-size: 15px;
font-weight: bold;
color: #fff;
text-align: center;
}

ナビが出ましたね！

sp.cssの更新

基本的な考え方としては、style.css（PC用のCSS）をsp.css（レスポンシブ用のCSS）で修正するというものになります。

例：PCのヘッダーをstyle.cssで指定して、レスポンシブでは非表示にしてる。

基本的な流れ

横幅の指定を100%またはautoに変更して画面からはみ出ないようにする。
スペースの空き方や行間をスマホで見やすいように調整する。（ご挨拶の文の行間が開きすぎて見づらくないかなど）
スマホ対応にしたときに背景画像が拡大しすぎている個所はスマホ用に調整する。（メイン画像が拡大しすぎて意味が分からなくなっていないかなど）
各パーツのサイズ感やレイアウトの調整する。（診療案内や特徴などは大きくなりすぎる場合は2列にするなど）
お知らせ・アクセス・地図・診療時間・電話番号などスマホで見るときに重要な情報は上に持ってくる。
見出し画像や小さなアイコン画像などは特にですが、実機で見たときに画像がぼやけて見えてしまう場合は2倍のサイズの画像を用意して縮小して見れるようにする。
画像文字を使用していて文字が小さくなりすぎている個所があったら、テキストで差し替える。

このあたりの調整を行い、最終的に事例に載っているようなレスポンシブサイトを制作してください。

その他　レスポンシブ対応にあたって

幅・高さの単位はなるべく統一しましょう

sp.css を書き直して、レスポンシブ対応にしていきます。
style.css をコピペして作っても構いませんが、style と重複するcss は全て削除します。
style.css を元にsp.css へレスポンシブ用のcss を追加し上書きするという認識でいてください。

よくあるレイアウト崩れ

・コンテンツの中にあるオブジェクトの横幅が、端末の横幅よりも大きい
・テーブルの中身を含めた横幅が、端末の横幅よりも大きい
・white-space:nowrap; を使っているため改行されずに文字が飛び出す

retina 対応について

そもそもretina 対応って何？という方はお勉強です。【http://biancaweb.net/blog/retina/】
具体的には以下のように対策をしてください。
・ロゴは、なるべくSVG で書き出す
・写真やイラストは、2 倍サイズのものを縮小して表示
・文字の画像やアイコン等のベクターのデータは、なるべくSVG で制作
・h3 等が画像で作られていて且つテキストに置き換えが可能な場合は、.pc で画像のh3 を非表示、
テキストを.sp で表示させるなどして対策

sp_common.css の使い方

基本的にsp_common は触らないこと。
sp_common.css に設定されていて、よく使うものは以下です。
.pc　　：　pc だけで表示したいブロック要素
.sp 　：　sp だけで表示したいブロック要素
.pc_inline：　pc だけで表示したいインライン要素
.sp_inline：　sp だけで表示したいインライン要素

更新作業漏れの原因になるので、丸々全部pc やsp で囲むのは出来る限り控えてください。

メディアクエリの設定について

sp.css には以下が設定されています。

@media screen and (max-width:640px) {

対応する端末は、640 以下のもの（iPhone・Android）です。
スマートフォンを横にした時は、パソコン画面で見るものが出るようになります。
タブレット用の対応は基本行っていませんが、イレギュラーとして対応する場合はあります。
その他、320px 以下の対応など必要であれば適宜対応してください。