CSS写経してみた。なんでコメントが全然無いの？

CSSって、特に何の説明もなく、属性や値が記述されてて、どういう意図でこのCSS書いたの？と疑問に思う事が多いけど、基本的にコメントが無い。
経験則や慣習で、書いているの？

参考URL
https://webdesigner-go.com/coding-practice/easy/

サンプルページ
https://webdesigner-go.com/sky-coffee/

初心者的には、全ての漢字にフリガナを振って欲しい！

@charset "UTF-8"; /* 文字コードを指定 */

/* 全体的なCSS */
body {
  /* 指定したフォントが見つからなかったら、次のフォントへ */
  font-family: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  color: #333
}
a {
  text-decoration: none; /* リンクの下線と青色を無くす */
  transition: 0.3s; /* a:hoverなどのアニメーションの秒数 */
}
a:hover {
  opacity: 0.8; /* マウスオーバーでちょっと薄くする */
}
img {
  max-width: 100%; /* 親要素の範囲内で100%表示 */
  height: auto; /* 横幅に応じて、アスペクト比が維持される */
  vertical-align: bottom; /* 横にテキストがあったら、画像の下とテキストを合わせる */
}

/* レスポンシブデザイン領域 */
.container {
  max-width: 1170px; /* これ以上、ブラウザの横幅があっても変わらない */
  margin: 0 auto;
  padding: 0 30px;
}

/* ヘッダ */
.header {
  padding: 50px 0;
}
.header .logo{
  width: 280px;
  margin: 0px auto; /* 上下の余白無し。左右はautoで中央寄せ */
}
.main-visual {
  text-align: center;
}

.global-nav {
  padding: 40px 0;
}
.global-nav ul {
  display: flex; /* naviのメニューを横並び */
  justify-content: center; /* 中央寄せ */
}
.global-nav ul li{
  font-size: 18px;
  line-height: 1; /* 行間のスペース */
  letter-spacing: 0.1em; /* 文字間のスペース */
  margin-right: 80px; /* 右側余白で、項目が分離して見える */
}
.global-nav ul li:last-child{
  margin-right: 0; /* 最後の項目の右余白は無し！ */
}

/* コンセプト */
.concept {
  padding: 50px 0;
}
/* 直下のcontainerのみ */
.concept > .container {
  display: flex; /* 横並び */
  align-items: center; 
}

.concept .img {
  width: 50%; /* 画像サイズ半分 */
}

.concept .desc {
  width: 50%;
  padding-right: 20px; /* 少し右寄せ */
  padding-left: 40px;
}

.concept .subtitle {
  font-size: 16px;
  letter-spacing: 0.1em; /* 文字同士の隙間をちょっとだけ開けて見やすくする */
  margin-bottom: 20px; /* サブタイトルの下に、隙間をちょっとだけ開ける */
}

.concept .title {
  font-size: 32px; /* タイトルだから文字をデカくする*/
  font-weight: bold; /* タイトルだから文字を太くする*/
  line-height: 1.5; /* 行の上下の余白。0で全く無し。*/
  letter-spacing: 0.1em;  /* 文字同士の隙間をちょっとだけ開けて見やすくする */
  color: #24a8bf; /* イメージカラー */
  margin-bottom: 30px; /* 下の余白を開けて区切り感を出す */
}

.concept .text p {
  font-size: 16px; /* 他で修正されても確実にこのfont-sizeにしたい */
  line-height: 1.8; /* 行の上下の余白を多めにとってパラグラフ感を出す */
  letter-spacing: 0.1em; /* 文字同士の隙間をちょっとだけ開けて見やすくする */
}

/* ブログ記事一覧 */
.blog {
  padding: 50px 0; /* ブログ領域の上下に余白。左右は余白なし */
}

.blog .heading{
  font-size: 32px; /* ブログの見出しなので大きく */
  font-weight: bold; /* 太く */
  line-height: 1; /* 上下に隙間 */
  letter-spacing: 0.08em; /* 文字同士に隙間 */
  color: #24a8bf; /* イメージカラーの青 */
  text-align: center; /* 見出しを中央寄せ */
  margin-bottom: 30px;  /* 下に隙間を空けて、区切り間を出す */
}

.blog .subtitle{
  display: block; /* ブロックレベル要素にすると、中にインライン要素が入れられる。記事一覧とか*/
  font-size: 13px; /* ブログのサブタイトルというかフリガナ？ */
  line-height: 1; /* 行の上下に隙間 */
  letter-spacing: 0.03em;
  color: #333; /* 文字は黒く */
  margin-top: 8px; /* 見出しとの間に、ちょっとした隙間*/

}
.blog .list {
  display: flex; /* ブロックレベル要素でも、横一列に並べる */
  flex-flow: wrap; /* 端まで行ったら、次の行に改行される */
}
/* 個々のブロク記事を横３個になるようにする */
.blog .list .item {
  width: calc((100% - 60px)/3); /* 左右の余白(60px)を引いて、横幅÷3 */
  margin-right: 30px; /* 右余白 */
  margin-bottom: 30px; /* 下余白 */
   /* flex: 0 1 calc((100% - 60px) / 3); でも同じ意味 */ 
}
/* 3の倍数の最後の右余白は0 */
.blog .list .item:nth-child(3n) {
  margin-right: 0px;
} 
/* マウスが上に来たら、ちょっと薄くする */
.blog .list .item:hover {
  opacity: 0.8;
} 
/* 記事の写真の下余白 */
.blog .list .img {
  margin-bottom: 12px;
}
.blog .list .title {
  font-size: 15px;
  line-height: 1.6;
  font-weight: bold;
}

.blog .list .date {
  font-size: 12px;
  margin-top: 6px;
}

/*--------------------------------
フッター
---------------------------------*/
.footer {
  padding: 70px 0 30px;
  background-color: #000;
}

.footer .logo {
  width: 180px;
  margin: 0 auto;
  margin-bottom: 50px;
}

.footer .copyright {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #8b8b8b;
  text-align: center;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

@charset "UTF-8"; /* 文字コードを指定 */

/* 全体的なCSS */

body {

/* 指定したフォントが見つからなかったら、次のフォントへ */

font-family: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

font-size: 16px;

color: #333

}

a {

text-decoration: none; /* リンクの下線と青色を無くす */

transition: 0.3s; /* a:hoverなどのアニメーションの秒数 */

}

a:hover {

opacity: 0.8; /* マウスオーバーでちょっと薄くする */

}

img {

max-width: 100%; /* 親要素の範囲内で100%表示 */

height: auto; /* 横幅に応じて、アスペクト比が維持される */

vertical-align: bottom; /* 横にテキストがあったら、画像の下とテキストを合わせる */

}

/* レスポンシブデザイン領域 */

.container {

max-width: 1170px; /* これ以上、ブラウザの横幅があっても変わらない */

margin: 0 auto;

padding: 0 30px;

}

/* ヘッダ */

.header {

padding: 50px 0;

}

.header .logo{

width: 280px;

margin: 0px auto; /* 上下の余白無し。左右はautoで中央寄せ */

}

.main-visual {

text-align: center;

}

.global-nav {

padding: 40px 0;

}

.global-nav ul {

display: flex; /* naviのメニューを横並び */

justify-content: center; /* 中央寄せ */

}

.global-nav ul li{

font-size: 18px;

line-height: 1; /* 行間のスペース */

letter-spacing: 0.1em; /* 文字間のスペース */

margin-right: 80px; /* 右側余白で、項目が分離して見える */

}

.global-nav ul li:last-child{

margin-right: 0; /* 最後の項目の右余白は無し！ */

}

/* コンセプト */

.concept {

padding: 50px 0;

}

/* 直下のcontainerのみ */

.concept > .container {

display: flex; /* 横並び */

align-items: center;

}

.concept .img {

width: 50%; /* 画像サイズ半分 */

}

.concept .desc {

width: 50%;

padding-right: 20px; /* 少し右寄せ */

padding-left: 40px;

}

.concept .subtitle {

font-size: 16px;

letter-spacing: 0.1em; /* 文字同士の隙間をちょっとだけ開けて見やすくする */

margin-bottom: 20px; /* サブタイトルの下に、隙間をちょっとだけ開ける */

}

.concept .title {

font-size: 32px; /* タイトルだから文字をデカくする*/

font-weight: bold; /* タイトルだから文字を太くする*/

line-height: 1.5; /* 行の上下の余白。0で全く無し。*/

letter-spacing: 0.1em; /* 文字同士の隙間をちょっとだけ開けて見やすくする */

color: #24a8bf; /* イメージカラー */

margin-bottom: 30px; /* 下の余白を開けて区切り感を出す */

}

.concept .text p {

font-size: 16px; /* 他で修正されても確実にこのfont-sizeにしたい */

line-height: 1.8; /* 行の上下の余白を多めにとってパラグラフ感を出す */

letter-spacing: 0.1em; /* 文字同士の隙間をちょっとだけ開けて見やすくする */

}

/* ブログ記事一覧 */

.blog {

padding: 50px 0; /* ブログ領域の上下に余白。左右は余白なし */

}

.blog .heading{

font-size: 32px; /* ブログの見出しなので大きく */

font-weight: bold; /* 太く */

line-height: 1; /* 上下に隙間 */

letter-spacing: 0.08em; /* 文字同士に隙間 */

color: #24a8bf; /* イメージカラーの青 */

text-align: center; /* 見出しを中央寄せ */

margin-bottom: 30px; /* 下に隙間を空けて、区切り間を出す */

}

.blog .subtitle{

display: block; /* ブロックレベル要素にすると、中にインライン要素が入れられる。記事一覧とか*/

font-size: 13px; /* ブログのサブタイトルというかフリガナ？ */

line-height: 1; /* 行の上下に隙間 */

letter-spacing: 0.03em;

color: #333; /* 文字は黒く */

margin-top: 8px; /* 見出しとの間に、ちょっとした隙間*/

}

.blog .list {

display: flex; /* ブロックレベル要素でも、横一列に並べる */

flex-flow: wrap; /* 端まで行ったら、次の行に改行される */

}

/* 個々のブロク記事を横３個になるようにする */

.blog .list .item {

width: calc((100% - 60px)/3); /* 左右の余白(60px)を引いて、横幅÷3 */

margin-right: 30px; /* 右余白 */

margin-bottom: 30px; /* 下余白 */

/* flex: 0 1 calc((100% - 60px) / 3); でも同じ意味 */

}

/* 3の倍数の最後の右余白は0 */

.blog .list .item:nth-child(3n) {

margin-right: 0px;

}

/* マウスが上に来たら、ちょっと薄くする */

.blog .list .item:hover {

opacity: 0.8;

}

/* 記事の写真の下余白 */

.blog .list .img {

margin-bottom: 12px;

}

.blog .list .title {

font-size: 15px;

line-height: 1.6;

font-weight: bold;

}

.blog .list .date {

font-size: 12px;

margin-top: 6px;

}

/*--------------------------------

フッター

---------------------------------*/

.footer {

padding: 70px 0 30px;

background-color: #000;

}

.footer .logo {

width: 180px;

margin: 0 auto;

margin-bottom: 50px;

}

.footer .copyright {

font-size: 12px;

letter-spacing: 0.05em;

color: #8b8b8b;

text-align: center;

}

関連記事