もくじ

開発中のキャッシュに注意

CSSを書き直してサーバーにアップロードしても反映されず、読み込み直しをしてもだめ。ブラウザのデベロッパーツールの要素検査機能（左上にある、四角形に矢印がついたアイコン）を使って見てみると、新しく書いたCSSが見当たらない。なぜ？

こんなときの原因は意外に簡単かもしれない。つまり、キャッシュが残っていてなかなかクリアされないこと。
WindowsならCtrl + F5でブラウザのキャッシュを回避して読込みできる。MacはCmd + Shift + R。

私はこれでけっこうな時間悩みましたが、結局Ctrl＋F5で新しいCSSがちゃんと読み込まれました。^^;

さらにChatGPTによると、

開発者ツールの設定: Chromeのデベロッパーツールでは、ツールが開かれている間はキャッシュを無効にするオプションが提供されています。[Network]タブの「Disable cache」のチェックボックスをオンにすることで、デベロッパーツールが開いている間はキャッシュが適用されなくなります。

という簡単な方法がありました。

HTMLに最低限書くこと

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<!-- レスポンシブのためのタグ -->

<title>タイトル</title>
<meta name="description" content="説明文" />

<meta name="robots" content="noindex,nofollow" />
<!-- 検索避けタグ。必要な場合だけ書くこと -->

<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<!-- 最初にリセットCSSを、次に自作のCSSを。 -->

<link rel="icon" href="icon.ico">
<!-- ファビコンの指定 -->

</head>

<body>

本文。<body>～</body>に書いたものがページに表示されるよ

</body>
</html>

ちなみにコードタグで囲ったときにスクロールじゃなく折返しにするにはCSSで以下のようにする。
pre { white-space: pre-wrap ; }

CSSに最低限書くこと

というか、一般的に書かれていること。
少しは見当がついてるけど、念のためChatGPTに聞きました。

CSS（Cascading Style Sheets）ファイルには、特定の「最低限書かなければならない」内容というものは基本的に存在しません。CSSファイルの目的は、HTML要素のスタイリングを指定することであり、必要なスタイルが何であるかはプロジェクトやデザインの要件に依存します。

ただし、一般的なウェブページのデザインでよく使用されるいくつかの基本的なスタイリング要素は以下の通りです。

  1. リセットスタイル: ブラウザ間で異なるデフォルトのスタイルを揃えるために、一般的なリセットスタイルを適用することがあります。

  2. レイアウト: サイトの基本的なレイアウトを定義するために、コンテナ、ヘッダー、フッター、コンテンツ領域などのサイズと配置を設定することが一般的です。

  3. テキストスタイリング: サイト全体のフォント、色、サイズなどのテキストスタイリングを定義します。

  4. リンクスタイル: リンクの色、下線、ホバーエフェクトなどのスタイルを設定することが一般的です。

  5. レスポンシブデザイン: 異なるデバイスサイズでの表示を考慮して、メディアクエリを使用してレスポンシブなデザインを実装することが一般的です。

そして簡単な例を示してくれました。 

/* リセットスタイル */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* レイアウト */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* テキストスタイリング */
h1, h2, h3 {
  color: #333;
}

/* リンクスタイル */
a {
  color: #06f;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* レスポンシブデザイン */
@media (max-width: 600px) {
  .container {
    padding: 10px;
  }
}

リセットスタイル

リセットCSSについてはここを参照して、読み込みタグをHTML内に書くことにした。
【2023年版】おすすめのリセットCSS（reset.css）3選【CDNのコピペあり】
他にもたくさんあるらしいけど、他のとこ見てもだいたいこの3選は紹介されている。表示サンプルもある。modern.css か ress.css か迷うところ。

各CSSの中身を見たければURLをアドレスバーに入れれば見れる。
https://unpkg.com/modern-css-reset/dist/reset.min.css
https://unpkg.com/ress/dist/ress.min.css

せっかくなのでサンプル作ってみた。フォームの入力エリアの様子もわかるように、リセットCSSの後に、自作CSS（body背景色のみ指定）を読み込んでいる。
ブラウザのデフォルト（リセットなし）
modern.cssでリセット
ress.cssでリセット
私としては、ress.cssのやりすぎなところをカットしていい感じにしたものを使いたい。

box-sizing

リセットについて、私が参考にしている書籍「プロの「引き出し」を増やす　HTML+CSSコーディングの強化書」とChatGPTの示してくれた例の両方にあったのが、
box-sizing: border-box;

さきほどのmodernとressのリセットCSSでも指定されています。
これは重要らしいのでちょっと解説。

ボックス要素（divとか）をサイズ指定したとき、初期値ではpadding、border、marginのうちのどれも含まない中身のみのサイズとされます。たとえば、widthを500pxに指定したとき、初期値では 500px＋padding＋border の大きさ、つまり500pxより大きいスペースが必要になるということ。計算が面倒だしブラウザごとに数値が異なる可能性もあって厄介。

これをbox-sizing: border-box;と指定してあげることにより、500pxの中にpaddingとborderが含まれるので、全体のスペースが変わらずにpaddingやborderを調整することができます。

レイアウト

幅を決めて中央配置にする

横幅を決めなきゃいけない。決めないと、大きいモニタで見たときに幅いっぱいに広がってしまう。ある程度の幅にしておいて、中央に表示される感じにしておきたい。 

HTML
<div class="container">
  <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
</div>

CSS
.container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

こんな感じ。単位はemとかでも。
幅が固定されると左寄りになるが、マージンをこのように書くと中央配置になる。

高さを画面いっぱいにする

そして、containerに背景色をつけている場合。内容が少ないと、内容の終わったところでcontainerの高さも終わりになってしまいます。height: 100%;を使えば画面いっぱいの高さになりますが、containerだけでなく親要素（html、body）にも指定する必要があります。 

html, body { height: 100%; }

.container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  padding: 10px;
  background-color: #CEE4F2;
}

フォントファミリー

フォントファミリーはあまり書いたことがなかった。というか、指定してもその通りに表示されないことが多そうなので気にしないことにしていた。
いちおう参考になりそうな記事にリンクしとく。
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例

行の高さ

line-height: 1.6;は一行の高さを1.6emに指定するという意味と同じ。これに単位をつけない理由は、子要素の文字の大きさが変わったときにもその都度計算してくれるから。もし単位をつけてしまうと、親要素で計算された高さが子要素にも適用されてしまうらしい。

文字間

letter-spacing: 1px;で、文字と文字の間を1px広くすることができます。なんだか文字間が詰まって読みにくかったんで設定してみました。

段落（p）の下マージン設定

リセットCSSによってマージンが0になっているので、一行分に近いマージンを設定。
p { margin-bottom: 1.6em; }
実際はline-height: 1.8;にしてるのですが、このくらいがちょうどよかった。

テキストスタイリング

あとで書きます

リンクスタイル

未訪問と訪問済みを同じ色にしたかった。その場合はaに色指定するだけでよいらしい。
ただ、マウスが乗ったときに文字色だけを変えて、アンダーラインの色は変えないようにしたかった。
アンダーラインはすでに出てるので、それぞれに色を指定してあげればよい。a:hoverで文字だけに色指定すれば、文字色のみが変わり、アンダーラインの色はそのままになる。 

a {
  color: #113285;
  text-decoration-color: #113285;
}
a:hover {
  color: #656765;
}

レスポンシブ対応

サンプルページではとくにレスポンシブにする必要はなかったんだけど、いちおう横幅を90％にして背景色が少し見えるようにしてみた。paddingも変えておいた。
max-width:をいくつにするかは、ブラウザのデベロッパーツールに出てくるデバイスを参考にした。SurfaceDuoというやつが540px幅あるらしいので、550にしておいた。

あと、画像を「縦横比を保ちつつ画面の幅に合わせて伸縮」させる指定も追加しておいた。
max-width: 100%;とすれば、元の画像の大きさ以上には広がらない。これもサンプルページでは必要なかったけど。 

@media (max-width: 550px) {
  .container {
    max-width: 90%;
    padding: 10px;
  }
}

/* 画像を縦横比をたもったまま伸縮表示できる */
img {
  max-width: 100%;
  height: auto;
}

けどこの程度なら、はじめのところで 

.container {
  width: 90%;
  max-width: 800px; ～

としておいたほうが、幅が550を超えて800くらいまでのときに背景が見えなくなることがなくて都合が良い。

おまけ（br）

<br>と<br />とどちらを使えばいいかよくわからなかったんで調べました。htmlの場合は<br>、xhtmlの場合は<br />だそうです。一行目で<!DOCTYPE html>と書いてるのでこの場合はhtml、<br>でよいです。

サンプルページ

https://contact.mayoi.tokyo/　私の連絡先ページを実験台にしました