HTMLのフッター作成「コピーライト」と「フッターメニュー」をマークアップ

HTMLのフッター作成「コピーライト」と「フッターメニュー」をマークアップ

HTMLでフッターを作成するときに使用することが多い「コピーライト」と「フッターメニュー」をheader要素にマークアップしたのですが、基本的に必要なHTMLタグやコピーライトの書き方を忘れないようにアウトプットしとこうと思います。

参考になる内容が、もしあればですが使ってください。

 

HTMLでフッターを作成する

 

HTMLでフッターを作成します。

フッターは基本的にウェブサイトのページの最下部に位置してる領域です。

記事を読み終わってからフッターに気になる情報が目に止まれば、たとえそのページに満足したとしてもフッターから次のアクションに進むこともあります。

そのため、フッターを作成するときには、そのページを見終わった最後のフッター部分で「次のアクションがしやすいフッター」を考えてフッターコンテンツを考えてみることから始まります。

 

それぞれのウェブサイトによって、どんなフッターにするかは違いがありますが、フッターの作成で使用することが多い「メニュー」と「コピーライト」をHTMLでマークアップしたいと思います。

 

 

Advertisement

 

 

フッター作成に使用するHTMLタグ

 

<footer>フッター</footer>

 

footerの開始タグと終了タグを使用してfooter要素にした中をフッターコンテンツにしていきます。

footerタグの使用はサイト全体のフッターとして作成してもオッケーですし、article要素の中にフッターを作成するような使用もできます。

そしてフッター作成でfooter要素の中に使用するHTMLタグにはどんなタグを使えばいいのかです。

 

footerの開始タグと閉じタグの中に「divタグ」を記述。

書いたdiv要素の中にメニューをフッターに作成するならHTMLのリストタグ「ul」と「li」を使用することが多いです。

 

もしくはリストタグ使用しないで「pタグ」でマークアップしたりすることもあります。

footer要素を使うというだけで、あとは普通のマークアップと同じ感じですね。

あとはフッターに作成するメニューには、次のアクションができるようにaタグ」を使用して各ページへのリンク作りも必要です。

 

フッターをHTMLでマークアップする

 

実際にフッターにHTMLでマークアップするときですが、土台を作成するなら他の領域より簡単です。

HTMLでマークアップする構成は、フッターにはコピーライトとフッターメニューを表示してみるとして、先述したフッター作成に必要なHTMLタグを使用してフッターをマークアップしていきます。

 

Advertisement

 

フッター作成の流れですが、フッターにコピーライトを表記させてからフッターメニューをマークアップしていきます。

 

HTMLでコピーライトの書き方

 

コピーライトの書き方です。

 

© sample. 2019.

 

  • ©️(丸の中にC、丸C、マルシー)の記号
  • 著作権者の氏名
  • 最初の発行の年

 

丸Cとかマルシーとか今回は言い方を統一してマルシーにします。

 

マルシーがコピーライトを示しています

それなので、マルシーと一緒にコピーライトの先頭に書いてあってよく見かけることがある「Copyright」は必要がなくて省略することができます。

でも個人的には「Copyright」が書いてあると好きなので、このサイトでは使用してます。

 

マルシーの書き方ですが、普通にCで変換してマルシーを変換することもできるし、文字実体参照を使用してコピーライトにすることもできます。

 

&copy;

 

文字実体参照を使用する場合のマルシーは上記の書き方をします。

そしてコピーライトの年号は著作物の内容が更新された年号を書きます。年号はなくても大丈夫です。

 

それから「All Rights Reserved」もウェブサイトによっては見かけますが必須ではない表記です。

「All Rights Reserved」はコピーライトの規定をしてる「万国著作権条約」とは無関係なため、任意でコピーライトに含めるか含めないかで使用できます。

コピーライトの内容をフッターに書くときの記述順番も決まりはないので好きな順番で書くことができます。

 

 

Advertisement

 

 

上記の必須ではない内容を省いたコピーライトの書き方でフッター作成するときは以下のようにマークアップするだけです。

 

<footer>
 <p>&copy; 著作権者の氏名. 2019.</p> 
</footer>

 

または

 

©<a href="index.html">著作権者の氏名.</a>2019.

 

上のようにホームにリンクしたり、著作権についてのページが用意されてる場合には、そのページにリンクしてコピーライトを詳細にしておく作成もできます。

 

 

 

フッターでコピーライトをリンクさせておくと意外と効果があるかもしれません。

私のサイトのコピーライトクリック率は地味に高いです。

 

フッターメニューのマークアップ

 

次はフッターにHTMLでマークアップしてフッターメニュー作成をしていきます。

さっきfooter要素の中にコピーライトを記述してるので、コピーライトの上、footer開始タグの下にfooterメニューを作ります。

 

といってもリストを作成するだけです。

 

<footer>
 <div class="menu">
 <ul>
  <li><a href="index.html">ホーム</a></li>
  <li><a href="about.html">店舗案内</a></li>
  <li><a href="access.html">アクセス</a></li>
  <li><a href="menu.html">メニュー</a></li>
  <li><a href="contact.html">問い合わせ</a></li>
 </ul>
 </div>
  <p>© Practice. 2019.</p>
</footer>

 

まずはdivタグでフッターメニューの要素を囲むdiv要素を作成して枠組みにします。

次にフッターメニューにCSSをあてやすいようにdiv要素には属性をつけておきます。

そして枠組みのdiv要素の中にHTMLのリストタグを使ってメニュー内容をマークアップしていきます。

 

 

関連 【HTML】ul ol liの使い方を覚えてリストを作れるようにする

 

 

このときにli要素にはaタグを使ってフッターメニューのリストから指定するページに遷移できるようにマークアップしておきます。

 

基本的なフッター作成のHTMLマークアップでしたが、応用する場合はリストを増やしてCSSでflexboxを使ったり、フッターメニューやコピーライトを好きな位置にしたり、ごにょごにょとデザインしていくのです。

 

作成したフッターのデザインを確認

 

では、さっきコピーライトとリストタグでフッターメニューにしたフッターの確認をHTMLプレビューして問題ないかチェック。

 

 

 

 

HTMLでマークアップしたリスト状態は良好。コピーコンテンツ表記も良好。

けどこれだけだと寂しいですね。

同じリストですが、もう少しだけリストの追加とリンクしたバージョンのコピーコンテンツも追加するとHTML使ってるなぁという気になれます。

 

 

 

 

さっきよりはマークアップしたっぽくなってる。

 

最終的に、HTMLのフッター作成「コピーライト」と「フッターメニュー」をマークアップして、ほんのりCSSでデザインしてからプレビュー確認したらフッター作成の基本系は仕上がりです。

 

 

あとは応用して、ほんのりフッターからビューティフルフッターにしていくだけですね。

 

HTMLカテゴリの最新記事