更新日
#29 お問い合わせ&フッター【ポートフォリオ作成】
web兄さん
１｜HTMLのコーディングをしよう
フッターのコピーライト（copyright）について
このサイトの下部にもありますが、フッターには通常そのサイトの著作権を記すコピーライトというものがあります。
コピーライトは以下の３つの要素で構成されています。
- マーク（©）
- 年度（西暦）
- 著作権者名（会社名、組織名、ペンネームなど）
ポイントとしては、<small>を使うことと、©は意味を持った記号であるため、「©」といった特殊記号で記述をする必要があります。
<small>© 2022 webliker</small>※ただ、実はこの著作権、著作物が発行された時点で発動するため、コピーライトを記しておく法的義務はありません。
※慣例的に行われているので書いておいて損はないという感じです。
詳しくは「Copyright（コピーライト）を図解で解説！HTMLでの「©」の正しい書き方」を見てください。
動画内で書いたコード
<!-- お問い合わせ -->
<div class="contact">
<div class="contact__inner">
<a class="contact__button" href="">
<img src="img/contact__icon.svg" alt="お問い合わせボタンのアイコン">
contact
</a>
</div>
</div>
<!-- /お問い合わせ -->
<!-- フッター -->
<footer class="footer">
<small>© 2022 GoodCreate</small>
</footer>
<!-- /フッター -->２｜CSSのコーディングをしよう
02:53〜｜字間の調整（letter-spacing）について
行間は１つの文章が折り返されたときにできる上下の余白（※marginでつける余白とは違います）
字間は文字同士の横の余白です。
行間がline-heightに対して、
字間はletter-spacingを利用します。
注意点としては、line-heightは「%」（文字何個分）という指定だったのに対し、letter-spacingは「%」は効かないため「em」という単位を使って指定する必要があります。
「文字何個分」という考え方のベースは同じですが、emの場合1文字分 = 1emなので、数字の刻み方が以下のように異なります。
- 「%」= 1% 〜 100%
- 「em」= 0.01em 〜 1em
その解説については今後別の記事で解説するよ！
line-heightは単位なしの指定も可能
自己紹介セクションでも解説しましたが、今回の講座では初学者向けの解説の便宜上、line-heightはfigmaの指定に沿って、「%」の単位で解説しています。しかし、line-heightは一般的に単位なしで指定することが多いです。
p{
font-size: 16px;
line-height: 200%; /*2文字分*/
}
p{
font-size: 16px;
line-height: 2; /*2文字分*/
}
例えば、左の例のように、書いた場合どちらも「32px」分の行間が開きます。
具体的な違いは改めて別の記事で解説しますが、間違って覚えているというレベルではないので一旦ポートフォリオサイトの作成は「%」の単位で進めてください。
動画内で書いたコード
/* ===========================
お問い合わせ
=========================== */
.contact{
padding: 130px 0;
background-color: #000000;
}
.contact__inner{
max-width: 1140px;
margin: 0 auto;
}
.contact__button{
font-size: 80px;
font-weight: 700;
font-family: 'Montserrat';
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 0.2em;
border: solid 3px #FFFFFF;
padding: 30px 0;
display: flex;
align-items: center;
justify-content: center;
}
/* ===========================
フッター
=========================== */
.footer{
padding: 50px 0;
text-align: center;
}
.footer small{
font-family: 'Montserrat';
font-weight: 700;
font-size: 14px;
}