#はじめに
この記事は私がHTML・CSSの学習で学んだことや、コーディングの際に覚えておきたいメモを記載したものです。適宜更新していきます。
#HTML・CSSテンプレート
##HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>○○○○○○○○○○</title>
</head>
<body>
<header>
<div class="container clear">
<div class="header-left">
</div>
<div class="header-right">
<ul class="header-nav">
<li class="header-nav-item"><a href=""></a></li>
<li class="header-nav-item"><a href=""></a></li>
<li class="header-nav-item"><a href=""></a></li>
<li class="header-nav-item"><a href=""></a></li>
</ul>
</div>
</div>
</header>
<section class="top">
<div class="container">
</div>
</section>
<section class="about section">
<div class="container clear">
</div>
</section>
<section class="contact section">
<div class="container clear">
</div>
</section>
<footer>
<div class="container clear">
<p class="copyright">Copyright(C) ○○○○○○○○○○ ALL Rights Reserved.</p>
</div>
</footer>
</body>
</html>
##メモ
###clearクラス
レスポンシブ対応の際にfloatを外して縦並びに戻したい要素の親要素に入れておく。
メディアクエリでする。
.clear::after {
clear: both;
content: "";
display: block;
}
#CSS
/* ===================
common
=================== */
body {
color: black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
line-height: 1.5;
}
img {
height: auto;
width: 100%;
}
a {
color: black;
text-decoration: none;
}
a:hover {
opacity: 0.7;
}
.container {
width: 90%;
max-width: 960px;
margin: auto;
}
.clear::after {
clear: both;
content: "";
display: block;
}
##body
###line-height: 1.5;
目的：行の高さを指定する。
１だと行が詰まって読みにくいため、間隔を空ける。
##a
###text-decoration: none;
目的：テキストの装飾的な線の表示を設定する。
aタグの下線を消す。
##float:left;
目的：縦並びの要素を浮かせて横に移動させる。
参考ツイート
https://twitter.com/098ra0209/status/1085519869485887494
浮き上がった要素の下に次の要素が入り込むので、以下の方法で回避する。
##display: flow-root;
目的：floatによる回り込みを回避する。
回り込みを回避したい要素のCSSに追加する。
下の.clear::afterと異なりclearタグをクラスに追加する必要が無く、1行で済むためこちらを使うことにする。
##.clear::after
目的：floatによる回り込みを回避する。
floatを解除したい要素の親要素にclearタグを追加し、以下のCSSを記載する。
.clear::after {
clear: both;
content: "";
display: block;
}