Webサイトを作る（フッター編) vol.5

フッターの中を作って行く

3つのブロックに分けたうちの今日は一番下にある『フッター』の部分を作って行きます。

1.　コンテンツ部を分析

フッターにはコピーライトが大抵置かれています。
なぜコピーライトが必要なのかと言うと、サイトの中にあるイメージ（ロゴ、イラスト、画像など）や文章はこのサイトの所有しているものなのでコピーして使うことを禁じています。
このコピーライトをつけないままだと、画像を無断でダウンロードされ文章もコピーされても文句は言えないんです。
最近の傾向では、画像をダウンロードして自分のブログなどに使用する人がいますが、これはネット上の法律では禁止されている立派な犯罪なのです。
あまりにも多すぎて規制しきれないのが現状ですが、著作権侵害に当たるのでネットから拾ってきたものを無断で使用するのはやめて欲しいものですね。

コピーライトを記述するにはルールがあるので、覚えておきましょう。

さて、今回は<footer></footer>の中に書き込んでいきますね。
コピーライトを記述するときは<address></address>を使います。

<footer>
　<address>ここにコピーライトを記述します。</address>
</footer>

2.　コピーライトのマークってどうやって表示するの？

©このマークってどうやって表示させるの？
もちろん、テキストで打っても表示される場合もありますが、インターネット上では色々なルールが常に変化していくのでテキストでは表示されないことが多々あります。
そこでエンティティと言われる独特の記述方法を使用して記号などを記述していきます。

&で始まって;で終わるようになっているのですが、これらを覚えるのはかなり大変なのでよく使用するものを覚えておくと便利です。
ちなみに©の記述方法は&#169；です。←これをコピーする時は最後のコロンを半角にしてくださいね。

特殊文字のページで紹介していますので後でゆっくり覗いてみてください。

<footer>
　<address>&#169; 2015-2021 73Fstudio. All Rights Reserved.</address>
</footer>

3.　デザインをCSSで指定する

コピーライトは左上に...フッターの背景も暗くて文字が見づらい。
これをなんとか修正していきましょう。
まずは、フッターの背景をロゴと同じ黄緑色へ変え、文字を真ん中中央へ配置し、ヌキ文字にしてみます。

footer{
   height:100px;
   background-color:#79bf49;
}
address{
 color: white;
 text-align: center;
 padding-top: 3%;
}

フッターもデザインの一部なので全体的に統一した感じにしたため、文字が小さかったり見づらかったりしますが、これがあるのと無い能登では雲泥の差がありますので、ここのコピーライトの場所は記述しているだけで意味があるので、あえて目立たせなくても大丈夫です。

こんな感じでサイトは作られていきます。あとは、応用力が必要になります。
基本さえ押さえておけば、後は忘れがちなコードやよく使うコードなどをメモしておくとサイト作りが楽になります。

これからも皆さん一緒にがんばりましょう！