知恵袋　（前に戻る）
110

 １．viewport（スマホ画面）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=yes">
<style>
<!--

@charset "UTF-8";
/* 追記CSS・半角アルファベット文字の折り返し可能 */
*{
word-break: break-all;
}

/* スマホからPCまで全てのデバイス幅に効くCSS */
table{
max-width:800px;
width:100% !important;
margin:0 auto;
}
img{
max-width:100% !important;
height:auto !important;
}
@media screen and (max-width: 767px) {
table{
max-width:650px;
}
}
-->
</style>

２．ヘッダー・フッター
* {
margin:0; padding:0;
}
header {
width: 100%;
padding: 15px 0;
margin: 0 auto;
text-align: center;
background-color: #cab64a;
}
header .headline{
font-size: 32px;

}
.nav-list {
text-align: center;
padding: 10px 0;
margin: 0 auto;
}
.nav-list-item {
list-style: none;
display: inline-block;
margin: 0 20px;
}

footer {
width: 100%;
height: 120px;
text-align: center;
padding: 50px 0;
background-color: #cab64a;
}
.footer-text {
color: #fff;
}

３．スクロールバー
/* css */
.scroll-box {
overflow-y:scroll;/* autoでも良い */
height:200px; /* 任意の高さ */

/* 下記は無くても動くかもです */
.scroll-box a { /**/
display:block;
}

（HTML内の記述）
<td>
<ul class="scroll-box">
<li><a href="＃">リンク</a></li>
<li><a href="＃">リンク</a></li>
<li><a href="＃">リンク</a></li>
</ul>
</td>

（前に戻る）

chie2.html(tvm)
<EOF>


↑