一番簡単なスマホ対応ページの作り方

<meta name="viewport" content="width=device-width">

img.photoL{
float:left;
margin: 0 10px 0 0;
display:block;
}

img.photoR{
float:right;
margin:0 0 0 10px;
display:block;
}
@media only screen and (max-width : 700px) {　　/*700px以下の時はこの指定*/
img{
display:block;
max-width:100%;
}
img.photoL{
float:none;
margin: 0 0 10px 0;
display:block;
width:100%;
}

img.photoR{
float:none;
margin: 0 0 10px 0;
display:block;
width:100%;
}
}

↓この下にどんどんcssを追加していきますが、全部、PC用とスマホ用がセットになります

<a href=”#wrapper” onclick=”scrollToTop(); return false” id=”scroll-to-top” class=”scroll-to-top-not-display”>▲Top</a>

<script>
function scrollToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout(“scrollToTop()”, 30);
}

}

</script>
<script>
var element = null;
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if (element == null) {
element = document.getElementById(‘scroll-to-top’);
}
if (scrollTop / scrollHeight > 0.1) {
element.classList.remove(‘scroll-to-top-not-display’);
} else {
element.classList.add(‘scroll-to-top-not-display’);
}
}
</script>

#scroll-to-top {
position: fixed;
z-index: 2147483647;
bottom: 20px;
right: 20px;
background: rgba(0,0,0,0.5);
color: #fff;
font-size: 12px;
font-family: sans-serif;
text-decoration: none;
padding: 10px 10px;
border-radius: 6px;
}