HTML
基本
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
</body><！--コメント-->
</html>
!DOCTYPE
HTML5
<!DOCTYPE HTML>
html lang="ja"
ページ言語の宣言
lang＝"ja"はなくてもよいようなのですが、あっても害はないようです。
<html lang="ja">
文字コードの指定
文字コード(文字エンコーディング)
<meta charset="UTF-8">
画面サイズでCSSを分ける
PC用のCSS
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0,">
PC、タブレット、スマートフォン用とスタイルシートを分ける。
@charset "UTF-8";
@media screen and (max-width: 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>
</head>
</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：振替休日