HTML で作った元素周期表

はじめに

HTML 、 CSS元素周期表を作りました。

HTML なのでウェブサイトへ掲載するには画像や PDF より適しているのではないでしょうか。

著作権は主張しますが、ご自由のご利用ください。改変、再配布など自由です。

実際の表示

元素周期表

キャプチャ画像

消してもいいコード

ヘッダ情報

<!-- 消してもいい部分 ここから -->
<meta name="description" content="HTML で作った元素周期表です">
<meta name="keywords" content="元素周期表, 元素, 周期, 表,priodic table, periodic, table, html, css">
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="Yayoi Thyme">
<meta property="og:title" content="元素周期表">
<meta property="og:url" content="http://yayoi-thyme.com/etc/periodic-table/">
<meta property="og:type" content="webpage">
<meta property="og:description" content="HTML で作った元素周期表です">
<meta property="og:image" content="http://yayoi-thyme.com/etc/periodic-table.png">
<meta property="og:image:width" content="504">
<meta property="og:image:height" content="252">
<meta property="article:publisher" content="https://www.facebook.com/yayoi.thyme">
<meta property="fb:admins" content="yayoi.thyme">
<meta itemprop="name" content="元素周期表">
<meta itemprop="description" content="HTML で作った元素周期表です">
<meta itemprop="image" content="http://yayoi-thyme.com/etc/periodic-table.png">
<meta name="twitter:title" content="元素周期表">
<meta name="twitter:description" content="HTML で作った元素周期表です">
<meta name="twitter:image" content="http://yayoi-thyme.com/etc/periodic-table.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@camellia">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="publisher" href="https://plus.google.com/u/0/+sasanquacamellia">
<link rel="canonical" href="http://yayoi-thyme.com/etc/periodic-table/">
<!-- 消してもいい部分 ここまで -->

フッタ情報

<!-- 消してもいい部分 ここから -->
<footer>
<h2>このデータについて</h2>
<p>この表は HTML と CSS で構成されています。 CSS は HTML ファイルの中に記述していますので、このファイルだけをダウンロードしてそのまま利用することができます。 head タグ内に SEO 的な記述が多数ありますので、その辺りを削除するといいかもしれません。まぁ削除しなくてもなんら問題ないですが。</p>
</footer>
<!-- 消してもいい部分 ここまで -->

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です