mimosa

illust gallery.

gallery ver.

No.001
flesh

No.002
すみきった世界

No.003
ivy

No.004
precious

No.005
おひさま

No.006
横断中

No.007
vanilla

No.008
french

List ver.

Request

No.04 シロさん
イラストサイト用のタイトル一覧ページとイラスト展示が出来るページ

写真素材：cry
2パターン作成してみました。サムネイル表示でギャラリー風「gallery ver.」、リスト表示でタグスタイル風「List ver.」お好きな方をどうぞ。

イラスト及び写真が映えるようにテンプレートデザインは無彩色で作成しています。またPCの場合、マウスカーソルを画像に乗せるとぷるぷる震えます。

当ページは子ページで作成しています。アルバムページ等、機能ページで使用する場合は適宜改変を行ってください。

HTML

<article>
    <header>
        <h1>mimosa</h1>
        <p class="desc">illust gallery.</p>
    </header>
    
    <div class="main clearfix">
        <h2>gallery ver.</h2>
        <a href="" class="box">
            <img src="#画像_url#" />
            <p>No.001<br />flesh</p>
        </a>
        <a href="" class="box">
            <img src="#画像_url#" />
            <p>No.002<br />すみきった世界</p>
        </a>
        <a href="" class="box">
            <img src="#画像_url#" />
            <p>No.003<br />ivy</p>
        </a>
        <a href="" class="box">
            <img src="#画像_url#" />
            <p>No.004<br />precious</p>
        </a>
        <a href="" class="box">
            <img src="#画像_url#" />
            <p>No.005<br />おひさま</p>
        </a>
        <a href="" class="box">
            <img src="#画像_url#" />
            <p>No.006<br />横断中</p>
        </a>
        <a href="" class="box">
            <img src="#画像_url#" />
            <p>No.007<br />vanilla</p>
        </a>
        <a href="" class="box">
            <img src="#画像_url#" />
            <p>No.008<br />french</p>
        </a>
    </div>
    
    <div class="main clearfix">
        <h2>List ver.</h2>
        <ul>
            <li><a href=""><span>flesh</span></a></li>
            <li><a href=""><span>すみきった世界</span></a></li>
            <li><a href=""><span>ivy</span></a></li>
            <li><a href=""><span>precious</span></a></li>
            <li><a href=""><span>おひさま</span></a></li>
            <li><a href=""><span>横断中</span></a></li>
            <li><a href=""><span>vanilla</span></a></li>
            <li><a href=""><span>french</span></a></li>
        </ul>
    </div>
</article>

HEAD

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
}

.clearfix:after { 
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
}

a {
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #DFDFDF;
}

p {
    margin-bottom: 18px;
}

html:before,
html:after,
body:before,
body:after {
    content:"";
    background:#F2F2F2;
    position:fixed;
    display:block;
    z-index:5;
}
 
html:before {
    height:10px;
    left:0;
    right:0;
    top:0;
}

html:after {
    width:10px;
    top:0;
    right:0;
    bottom:0;
}

body:before {
    height:10px;
    right:0;
    bottom:0;
    left:0;
}

body:after {
    width:10px;
    top:0;
    bottom:0;
    left:0;
}

body {
    background: #FFF;
    font-family: "Cabin","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; sans-serif;
    font-size: 13px;
    line-height: 180%;
    letter-spacing: 0.5px;
    word-break: break-all;
    padding: 15px;
}

article {
    width: 720px;
    margin: 40px auto;
}

header {
    text-align: center;
    margin-bottom: 50px;
}

header::after {
    display: block;
    margin: 30px auto;
    content: '';
    width: 40px;
    height: 4px;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}

h1 {
    font-size: 40px;
    font-family: 'Arapey', sans-serif;
    letter-spacing: 8px;
    margin: 0 0 5px;
}

h2 {
    font-family: 'Arapey', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    margin: 40px 0 10px;
}

.desc {
    font-family: 'Arapey', sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
}

.main {
    margin-bottom: 30px;
}

.main p {
    line-height: 140%;
}

.main a.box {
    display: block;
    width: 180px;
    float: left;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    letter-spacing: 1px;
    -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
    border: none;
}

.main a.box:hover {
    -webkit-animation: tremble .3s ease-in-out;
	animation: tremble .3s ease-in-out;
}

@-webkit-keyframes tremble {
	15% { -webkit-transform: translateX(3px) rotate(1deg); }
	30% { -webkit-transform: translateX(-3px) rotate(-1deg); }
	45% { -webkit-transform: translateX(2px) rotate(1deg); }
	60% { -webkit-transform: translateX(-2px) rotate(-1deg); }
	75% { -webkit-transform: translateX(1px) rotate(1deg); }
	90% { -webkit-transform: translateX(-1px) rotate(-1deg); }
}
@keyframes tremble {
	15% { transform: translateX(3px) rotate(1deg); }
	30% { transform: translateX(-3px) rotate(-1deg); }
	45% { transform: translateX(2px) rotate(1deg); }
	60% { transform: translateX(-2px) rotate(-1deg); }
	75% { transform: translateX(1px) rotate(1deg); }
	90% { transform: translateX(-1px) rotate(-1deg); }
}

.main a.box img {
    width: 150px;
    height: 150px;
    border: 8px solid #F2F2F2;
    margin-bottom: 8px;
    
}

ul {
	margin: 0;
	list-style: none;
}

ul li {
	display: inline-block;
	margin: 0 0 .3em 1em;
	padding: 0;
}

ul li a {
	position: relative;
	display: inline-block;
	height: 23px;
	line-height: 22px;
	padding: 0 10px 0 15px;
	background-color: #bfbfbf;
	border-radius: 0 3px 3px 0;
	color: #fff;
	font-size: 13px;
	text-decoration: none;
	-webkit-transition: .2s;
	transition: .2s;
    margin-right: 10px;
    border: none;
}

ul li a::before {
	position: absolute;
	top: 0;
	left: -12px;
	content: '';
	width: 0;
	height: 0;
	border-color: transparent #bfbfbf transparent transparent;
	border-style: solid;
	border-width: 12px 12px 11px 0;
	-webkit-transition: .2s;
	transition: .2s;
}

ul li a::after {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 2;
	display: block;
	content: '';
	width: 6px;
	height: 6px;
	margin-top: -3px;
	background-color: #fff;
	border-radius: 100%;
}

ul li span {
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

ul li a:hover {
	background-color: #555;
	color: #fff;
}

ul li a:hover::before {
	border-right-color: #555;
}

@media screen and (max-width:780px){ 
    article {
        width: 540px;
    }
}

@media screen and (max-width:600px){ 
    article {
        width: 360px;
    }
}

@media screen and (max-width:410px){ 
    article {
        width: 230px;
    }
    
    .main a.box {
        width: 115px;
    }
    
    .main a.box img {
        width: 90px;
        height: 90px;
        border: 4px solid #F2F2F2;
    }
}
</style>

gallery ver.

List ver.

Request

More

HTML

HEAD