スマホのテキストボックス(スクロール)を中央寄せする

現在、にせワンクリック詐欺のスマホ版を製作中です!

スクリーンショット 2015-02-23 22.50.25

利用規約の下にあるスクロールするテキストボックスの製作に手間取りました。また、作ったテキストボックスを中央寄せするのにも手間取ったので作り方を公開します。

 

CSSと解説

.box
{
border: solid 1px #808080;  周囲の境界線を表示
width: 75%; スマホ対応幅は%で設定
height: 200px; 高さは200pxで設定
padding: 0.5em; 余白
overflow: auto; この設定でスクロールがされます。
background-color: white; 読みやすいよう背景は白
margin: 0 auto; これが中央寄せの記述

}

marginは要素の幅を引いた値を左右均等に余白を開けるという意味があるのでこの場合は幅75%に対して残りの余白を均等に割り振ることになります。

 

 

スクリーンショット 2015-02-23 22.50.11

「コピペ用」

.box
{
border: solid 1px #808080;
width: 75%;
height: 200px;
padding: 0.5em;
overflow: auto;
background-color: white;
margin: 0 auto;
}

ちなみにHTMLは

<div class=”box”>

表示したい内容

表示したい内容

表示したい内容

</div>

になります。

 

スマホサイトを作ることがこれから増えると思いますが、幅を固定せず「%」で記述することが多くなるため今までと違った書き方が必要になりますね。

Please Share!Share on FacebookTweet about this on TwitterShare on Google+