TEST1
Copyrightを一番下に表示する
androidには効きません、WebkitはOK
html {
position: relative;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0; left: 0; right: 0;
}
画面サイズでCSSを分ける
PC用のCSS
@charset "UTF-8";
@media screen and (min-width: 960px) { /*ウィンドウ幅が960px以上の場合に適用*/
タブレット、スマホ用のCSS、タブレットとスマホを分ける場合はさらに「max-width: 480px」で作成します。
@charset "UTF-8";
@media screen and (max-width: 959px) { /*ウィンドウ幅が最大959pxまでの場合に適用*/
HTML
まずはここから始めます。
viewportを使ってPC用とタブレット端末用にSCCを分けます。
PC用、androidとiPhone用のアイコンを指定。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=3.0, minimum-scale=1.0,">
<meta name="format-detection" content="telephone=no"><!--電話番号に下線が付くのを回避-->
<title>タイトル</title>
<link rel="stylesheet" href="styl.css" type="text/css">
<link rel="stylesheet" href="styl_m.css" type="text/css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="appleicon.png" sizes="180x180">
<link rel="icon" type="image/png" href="androidicon.png" sizes="192x192">
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
</body>
</html>
画像のサイズ
スマートフォンで画像が画面からはみ出さないようにします。
img {
max-width: 100%;
height: auto;
}
文字の折り返し
display : inline-block;を使うと<span></span>毎の区切りで改行してくれます。
カレンダーで使用
<p class="test1"><span>1：天皇の即位の日</span><span>2：国民の休日</span><span>3：憲法記念日</span><span>4：みどりの日</span><span>5：こどもの日</span><span>6：振替休日</span></p>
.test1 span{
display : inline-block;
margin-left : 1em
}
1：天皇の即位の日2：国民の休日3：憲法記念日4：みどりの日5：こどもの日6：振替休日