CSS-1

@charset

文字コードの指定

CSS

@charset "UTF-8";
html{
font-size: 62.5%;
}
body{
margin:0;
padding:0;
overflow-wrap: break-word;
word-wrap: break-word;
font-size : 1.6rem;
-webkit-text-size-adjust: 100%;
}
p{
line-height : 1.8;
}

画面サイズでCSSを分ける

PC用のCSS

CSS

@charset "UTF-8";
@media screen and (min-width: 960px) { /*ウィンドウ幅が960px以上の場合に適用*/

タブレット用

CSS

@charset "UTF-8";
@media screen and (max-width: 959px) { /*ウィンドウ幅が最大959pxまでの場合に適用*/

スマホ用のCSS

CSS

@charset "UTF-8";
@media screen and (max-width: 480px) { /*ウィンドウ幅が最大480pxまでの場合に適用*/

HTML

まずはここから始めます。
viewportを使ってPC用とタブレット端末用にSCCを分けます。
PC用、androidとiPhone用のアイコンを指定。

HTML

<!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>

画像のサイズ

スマートフォンで画像が画面からはみ出さないようにします。

HTML

img {
max-width: 100%;
height: auto;
}

文字の折り返し

display : inline-block;を使うと<span></span>毎の区切りで改行してくれます。
カレンダーで使用

HTML

<p class="test1"><span>1：天皇の即位の日</span><span>2：国民の休日</span><span>3：憲法記念日</span><span>4：みどりの日</span><span>5：こどもの日</span><span>6：振替休日</span></p>

CSS

.test1 span{
display : inline-block;
margin-left : 1em
}

demo

1：天皇の即位の日2：国民の休日3：憲法記念日4：みどりの日5：こどもの日6：振替休日

Copyrightを一番下に表示する

current

CSS

html {
position: relative;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0; left: 0; right: 0;
}

top<end>html-1