パソコンサイトにおいては16pxが標準的によく使用される大きさであると言われている。
スマホ用サイトでもviewportの設定で
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
とhtmlコードのhead内に書く事でパソコンサイトと等倍の比率で表示する事が出来る。
ただパソコンと違いスマホは小画面で幅広い年代の人が使い屋外も含め様々なシーンで使用されるので一律に16pxにするのも如何なものかと思う。
iPhoneのSafariではデバイス内での文字サイズを変える事は出来たが個々のサイトまではその調整が出来なかったので色々な層のユーザーに合わせられそうな三通りの文字サイズに変化させられるボタンをJavaScriptとCSSでボタンを作ってみた。
S、M、LのサイズのボタンをHTMLで作りそれらをクリックしたらJavaScriptでCSSの文字サイズを変えるという流れで。
(HTML)
HTMLではボタンの体を成していて各要素のDOM(Document of Model)を取得出来れば任意の物で良い。各ボタンの要素を取得する為にidを指定する。ボタンはCSSで装飾するか画像を差し替えて作成して下さい。ここではspanタグを用いているがお好みのタグでどうぞ。
(コード)
<span class="changeFont1">
<span id="fontS">S</span>
<span id="fontM">M</span>
<span id="fontL">L</span>
</span>
(CSS)
ボタンで変化させたいタグのセレクタと値をCSSで記述。ここでは例としてpタグを。文字変更以外にも色を変えたり他のCSSの操作も可。
(コード)
<style>
p {
font-size:16px;
}
</style>
(JavaScript)
ボタンを操作出来る様にgetElementByIdで各ボタンの要素のDOMを取得する。
↓
getElementsByTagNameでpタグの要素を取得する。
(getElementByIdやgetElementsByClassNameはそのままDOMの操作を出来るがgetElementsByTagNameはHTMlコレクションで配列風に格納されるので配列毎に指定する必要がある)
↓
後で使うfor文の条件式に設定する為に全てのpタグの数をlengthプロパティで変数に格納する。
↓
取得した要素のプロパティであるstyleのfontSizeの値にボタン操作した際に変えたい文字サイズを設定する(ここでは13pxと標準の16pxと19pxを指定)。
↓
for文の処理を納めた呼び出し無しで実行する無名関数を各要素のonclickイベントに格納する事でボタンを押した際にスクリプトを起動する様にする。
(コード)
<script>
var s = document.getElementById('fontS');
var m = document.getElementById('fontM');
var l = document.getElementById('fontL');
var z = document.getElementsByTagName('p');
var x = z.length;
s.onclick = function() {
for(var i=0;i
}
}
m.onclick = function() {
for(var i=0;i
}
}
l.onclick = function() {
for(var i=0;i
}
}
</script>
以上のコードで作成したボタンを押せば文字サイズを変える事が出来る様になるものの内部リンクでサイト内の別ページに遷移した時にも変えた文字サイズを保持出来た方が使い勝手が良いのでそのtipsをwebストレージについてのページで書き記してみたい。