TEST2

文字の色

#000000、#111111、#222222、#333333、＃444444

DEMO

#000000

銀河鉄道の夜

ケンタウル祭の夜

ジョバンニは、口笛を吹いているようなさびしい口付きで、檜ひのきのまっ黒にならんだ町の坂を下りて来たのでした。
ABCDEFG,0123456789

#111111

銀河鉄道の夜

ケンタウル祭の夜

ジョバンニは、口笛を吹いているようなさびしい口付きで、檜ひのきのまっ黒にならんだ町の坂を下りて来たのでした。
ABCDEFG,0123456789

#222222

銀河鉄道の夜

ケンタウル祭の夜

ジョバンニは、口笛を吹いているようなさびしい口付きで、檜ひのきのまっ黒にならんだ町の坂を下りて来たのでした。
ABCDEFG,0123456789

#333333

銀河鉄道の夜

ケンタウル祭の夜

ジョバンニは、口笛を吹いているようなさびしい口付きで、檜ひのきのまっ黒にならんだ町の坂を下りて来たのでした。
ABCDEFG,0123456789、#333333

#444444

銀河鉄道の夜

ケンタウル祭の夜

ジョバンニは、口笛を吹いているようなさびしい口付きで、檜ひのきのまっ黒にならんだ町の坂を下りて来たのでした。
ABCDEFG,0123456789

画面サイズでCSSを分ける

PC用のCSS

CSS

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

タブレット、スマホ用のCSS、タブレットとスマホを分ける場合はさらに「max-width: 480px」で作成します。

CSS

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

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>

文字の折り返し

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：振替休日