【HTML入門】著作権表示の実装とcopyright表記のルール

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、著作権表示の実装とcopyright表記のルールについて解説します。

1 copyright表記・著作権のルール
2 【SampleCode】著作権表示の実装
3 おすすめ書籍(HTML&CSS編)
4 Twitterやってます！Follow Me！
5 参考・引用
6 最近の投稿

copyright表記・著作権のルール

日本では、著作物が発行された時点で著作権が有効になる「ベルヌ条約」に加盟しているため、copyrightは実はなくてもOKです。

なぜ多くのサイトでcopyrightを書いているのか？

著作権の侵害の抑止力になる
著作権の内容が明確になる
フッターにあった方が見栄えがよい。

などの理由から慣習的に行われているというのが実情です。

copyright(著作権表示)の正しい書き方

copyrightには最低限３つの項目を記載する必要があります。

©︎（コピーライトマーク）
著作物の発行年
著作権者の氏名や会社名など

HTML内でのcopyright(著作権表示)の実装

<small>©️ 2022 神聖グンマー帝国 ロボ玉教団🔥</small>

【SampleCode】著作権表示の実装

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copyright-Test</title>
    <style>
        .robotama {
            text-align: center;
        }
        .explanation {
            text-align: center;
            margin-top: 80px;
        }
    </style>
</head>
<body>
    <div class="robotama">
        <h1>著作権表示-Test-Robotama🔥</h1>

        <h2>ロボ玉🔥</h2>
        <img src="https://masanyon.com/wp-content/uploads/2022/08/6d4f415fd1a8072759496b22c610ae7d-scaled.jpg" alt="ロボ玉" width="550" height="400">
        <div>
            <!-- smallタグで「copyright」を実装します -->
            <small>©️ 2022 神聖グンマー帝国 ロボ玉教団🔥</small>
        </div>
        
    </div>

    <div class="explanation">
        <h2>copyright(著作権)表示の情報</h2>

        <h3>著作物が発行された時点で著作権が有効になるため、copyrightは実はなくてもOKです。</h3>
        <p> => 作品をつくった時点で自動で著作権がつく「ベルヌ条約」に日本は加盟している。</p>

        <p>フッターにあった方が見栄えがよい</p>
        <p>copyrightがあった方が抑止力になる</p>
        <p>などの理由から慣習的に行われているというのが実情です。</p>


        <h3>2. なぜ多くのサイトでcopyrightを書いているの？</h3>
        <p>2-1. 著作権の侵害の抑止力になる</p>
        <p>2-2. 著作権の内容が明確になる</p>

        <h3>3. copyrightの正しい書き方</h3>
        <p>copyrightには最低限３つの項目を記載する必要があります。</p>
        <p>１つ目: ©︎（コピーライトマーク）</p>
        <p>2つ目: 著作物の発行年</p>
        <p>３つ目: 著作権者の氏名や会社名など</p>
    </div>

    <div>
        <h3>参考・引用</h3>
        <ol>
            <li>
                <a href="https://webliker.info/html/89678/" target="_blank">Copyright（コピーライト）を図解で解説！HTMLでの「©」の正しい書き方</a>
            </li>
        </ol>
    </div>
</body>
</html>