CSS だけでおしゃれなウェブアルバムを作る

JavaScript 不要CSS だけでおしゃれなウェブアルバムを作ります。

画像サイズがバラバラの場合はそれぞれに合った CSS を記述しなくてはならないので、サイズを揃えるのが望ましいです。

実際の表示

デモページ

コード

HTML

<div id="thumbnail">
<ul>
<li><a href="#disp-1"><img src="/cmp/parts/web-album/pic1-150s.jpg"></a></li>
<li><a href="#disp-2"><img src="/cmp/parts/web-album/pic2-150s.jpg"></a></li>
<li><a href="#disp-3"><img src="/cmp/parts/web-album/pic3-150s.jpg"></a></li>
<li><a href="#disp-4"><img src="/cmp/parts/web-album/pic4-150s.jpg"></a></li>
<li><a href="#disp-5"><img src="/cmp/parts/web-album/pic5-150s.jpg"></a></li>
<li><a href="#disp-6"><img src="/cmp/parts/web-album/pic6-150s.jpg"></a></li>
<li><a href="#disp-7"><img src="/cmp/parts/web-album/pic7-150s.jpg"></a></li>
<li><a href="#disp-8"><img src="/cmp/parts/web-album/pic8-150s.jpg"></a></li>
<li><a href="#disp-9"><img src="/cmp/parts/web-album/pic9-150s.jpg"></a></li>
</ul>
</div>
<div id="display">
<div id="disp-1"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic1-300s.jpg"></div></a></div>
<div id="disp-2"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic2-300s.jpg"></div></a></div>
<div id="disp-3"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic3-300s.jpg"></div></a></div>
<div id="disp-4"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic4-300s.jpg"></div></a></div>
<div id="disp-5"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic5-300s.jpg"></div></a></div>
<div id="disp-6"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic6-300s.jpg"></div></a></div>
<div id="disp-7"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic7-300s.jpg"></div></a></div>
<div id="disp-8"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic8-300s.jpg"></div></a></div>
<div id="disp-9"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic9-300s.jpg"></div></a></div>
</div>
<div id="anchor"></div>

CSS

#thumbnail {
width:  100%;
height: 100%;
margin:  0;
padding: 0;
background-color: #fff;
}
#thumbnail ul {
margin: 30px 0 0 30px;
padding: 0;
list-style: none;
}
#thumbnail ul::before {
content: "";
display: block;
width: 100%;
height: 0;
line-height: 0;
margin-bottom: -30px;
}
#thumbnail ul::after {
clear: both;
content: "";
display: block;
line-height: 0;
}
#thumbnail li {
float: left;
margin-top: 30px;
}
#thumbnail li + li {
margin-left: 30px;
}
#thumbnail li:nth-child(4),
#thumbnail li:nth-child(7) {
clear: left;
margin-left: 0;
}
#thumbnail img {
width: 80%;
transition: all .1s
}
#thumbnail img:hover {
width: 100%;
margin: -10%;
transition: all .2s;
}
#display > div {
position: fixed;
z-index: -1;
top:  0;
left: 0;
width:  100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
opacity: 0;
transition: all .2s;
}
#display > div:target {
z-index: 1;
opacity: 1;
transition: all .4s;
}
#display a {
display: block;
width:  100%;
height: 100%;
cursor: default;
}
#display .close {
position: absolute;
top:  50%;
left: 50%;
margin-top:  -150px;
margin-left: -150px;
}
#display .close::after {
content: "✕ 閉じる";
display: inline-block;
position: absolute;
top: 0;
left: 100%;
padding: 5px;
color: #fff;
font-weight: bold;
word-break: keep-all;
white-space: nowrap;
background-color: rgba(0, 0, 0, .2);
cursor: pointer;
}
#anchor {
position: fixed;
width: 0;
height: 0;
line-height: 0;
}

メニューのサンプル 3

メニューのサンプルです。

実際の表示

コード

HTML

<ul id="menu">
<li id="item1"><a href="">ITEM 1</a></li>
<li id="item2"><a href="">ITEM 2</a></li>
<li id="item3"><a href="">ITEM 3</a></li>
<li id="item4"><a href="">ITEM 4</a></li>
<li id="item5"><a href="">ITEM 5</a></li>
</ul>

CSS

#menu {
margin: 0;
padding: 0;
line-height: 1;
list-style: none;
}
#menu::after {
clear: both;
content: "";
display: block;
line-height: 0;
}
#menu li {
float: left;
position: relative;
z-index: 1;
}
#menu li + li {
margin-left: 5px;
}
#menu li::before,
#menu li::after {
content: "";
display: block;
position: absolute;
z-index: -1;
line-height: 0;
}
#menu li::before {
bottom: 0;
width: 100%;
height: 2px;
}
#menu li::after {
top: 0;
left: 0;
width: 2px;
height: 100%;
}
#menu li:hover::before {
bottom: calc(100% - 2px);
transition-property: bottom;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu li:hover::after {
left: calc(100% - 2px);
transition-property: left;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu li:hover a {
transition-property: color;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu a {
display: block;
margin: 0;
padding: 0.75em 1em;
color: #333;
font-weight: bold;
text-decoration: none;
}
#item1::before,
#item1::after {
background-color: #dd3333;
}
#item2::before,
#item2::after {
background-color: #dd9933;
}
#item3::before,
#item3::after {
background-color: #81d742;
}
#item4::before,
#item4::after {
background-color: #8224e3;
}
#item5::before,
#item5::after {
background-color: #52C0D4;
}
#item1:hover a {
color: #dd3333;
}
#item2:hover a {
color: #dd9933;
}
#item3:hover a {
color: #81d742;
}
#item4:hover a {
color: #8224e3;
}
#item5:hover a {
color: #52C0D4;
}

メニューのサンプル 2

メニューのサンプルです。

実際の表示

コード

HTML

<ul id="menu">
<li id="item1"><a href="">ITEM 1</a></li>
<li id="item2"><a href="">ITEM 2</a></li>
<li id="item3"><a href="">ITEM 3</a></li>
<li id="item4"><a href="">ITEM 4</a></li>
<li id="item5"><a href="">ITEM 5</a></li>
</ul>

CSS

#menu {
margin: 0;
padding: 0;
line-height: 1;
list-style: none;
}
#menu::after {
clear: both;
content: "";
display: block;
line-height: 0;
}
#menu li {
float: left;
position: relative;
z-index: 1;
}
#menu li + li {
margin-left: 5px;
}
#menu li::before {
content: "";
display: block;
position: absolute;
z-index: -1;
bottom: 0;
width: 100%;
height: 5px;
line-height: 0;
}
#menu li:hover::before {
bottom: 100%;
transition-property: bottom;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu li:hover a {
transition-property: color;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu a {
display: block;
margin: 0;
padding: 0.75em 1em;
color: #333;
font-weight: bold;
text-decoration: none;
}
#item1::before {
background-color: #dd3333;
}
#item2::before {
background-color: #dd9933;
}
#item3::before {
background-color: #81d742;
}
#item4::before {
background-color: #8224e3;
}
#item5::before {
background-color: #52C0D4;
}
#item1:hover a {
color: #dd3333;
}
#item2:hover a {
color: #dd9933;
}
#item3:hover a {
color: #81d742;
}
#item4:hover a {
color: #8224e3;
}
#item5:hover a {
color: #52C0D4;
}

メニューのサンプル 1

メニューのサンプルです。

実際の表示

コード

HTML

<ul id="menu">
<li id="item1"><a href="">ITEM 1</a></li>
<li id="item2"><a href="">ITEM 2</a></li>
<li id="item3"><a href="">ITEM 3</a></li>
<li id="item4"><a href="">ITEM 4</a></li>
<li id="item5"><a href="">ITEM 5</a></li>
</ul>

CSS

#menu {
margin: 0;
padding: 0;
line-height: 1;
list-style: none;
}
#menu::after {
clear: both;
content: "";
display: block;
line-height: 0;
}
#menu li {
float: left;
position: relative;
z-index: 1;
}
#menu li + li {
margin-left: 5px;
}
#menu li::before {
content: "";
display: block;
position: absolute;
z-index: -1;
bottom: 0;
width: 100%;
height: 5px;
line-height: 0;
}
#menu li:hover::before {
height: 100%;
transition-property: height;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu li:hover a {
color: #fff;
transition-property: color;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu a {
display: block;
margin: 0;
padding: 0.75em 1em;
color: #333;
font-weight: bold;
text-decoration: none;
}
#item1::before {
background-color: #dd3333;
}
#item2::before {
background-color: #dd9933;
}
#item3::before {
background-color: #81d742;
}
#item4::before {
background-color: #8224e3;
}
#item5::before {
background-color: #52C0D4;
}

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>
<!-- 消してもいい部分 ここまで -->

WordPress で p タグが消えるのを解決する方法

WordPress の記事を書くのに HTML タグを手打ちしてるんですが、その記事を公開して表のウェブページで見ると <p> が出力されてないのです。なんじゃこりゃ。

もちろんデータベースには <p> タグがそのまま保存されています。 PS Disable Auto FormattingRaw HTMLTinyMCE Advanced 、 function.php に remove_filter('the_content', 'wpautop'); を追加する、を試しましたが、まぁそもそも勝手に <p> タグ挿入するのやめて! っていうような話であったり、 <p> タグが消えなくしてくれるはずのプラグインも仕事してくれなかったり。

で、ふと気付きました。 <p> タグ内で改行すればいいんです。ちょっとウザいですが簡単です。

ダメな書き方

<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

いい書き方

<p>
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
</p>

小説家になろうの作品ページの Twitterカードを作る方法

概要

固定されたツイート

小説家になろうの自分の作品を Twitter で宣伝したいのですが、宣伝するなら目立つのがよいわけで、それならってことで画像を添付しようかってなります。でもここは1歩進んで Twitterカードを表示しようと考えたわけです。

Twitterカードから飛ばしたい先は小説家になろうの自分の作品ページで、 Twitterカードの記述を設置する場所は自分のホームページとかになりますから、ちょっとややこしくて、自分のホームページにリダイレクトの JavaScript を記述します。 .htaccess は上手くいかないので。

Twitterカードとリダイレクト

下のような記述になります。 <body> タグとかないですが、下のが全てです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="説明文( 68 文字まで)">
<meta name="twitter:image" content="画像の URL">
<meta name="twitter:card" content="カードの種類「 summary_large_image 」 「 summary_small_image 」">
<meta name="twitter:site" content="Twitter のユーザ名">
<script>
window.location.href = "飛ばしたいページの URL";
</script>
</head>
</html>

例えば僕は下のようにして Twitterカードを表示しています。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="twitter:title" content="⚔イオの冒険?">
<meta name="twitter:description" content="?世界を見る旅へ出た青年は同じ目的を持つ2人の少女に出会い共に歩み始める。世界をめぐる中で彼らを待っているのは様々な初めての体験だった。">
<meta name="twitter:image" content="http://yayoi-thyme.com/image/default-site-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@camellia">
<script>
window.location.href = "https://ncode.syosetu.com/novelview/infotop/ncode/n0041ed/";
</script>
</head>
</html>