紫の雨ソースコード

・倫子さん「切ないイメージのページで、黒背景でないもの。画像有り。」

自動改行“しない”で作成しています。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。
<ol>～</ol>タグの中に<li>～</li>タグを使ってリンクを貼ると自動で番号が振られたリンクになります。また、リンクタグの中にclass="mr"といれるとリンク背景が白い丸になります。ご自由に使用してください。
素材画像は空に落ちるさまの紫陽花よりお借りしています。

HEAD

@import url('https://fonts.googleapis.com/css?family=Arsenal');

@font-face
{
font-family: 和田研細明朝体;
src: url('https://cdn.leafscape.be/wadalab/wadalab-hosomin_web.woff2')
     format("woff2");
}

body{
font-family:"Arsenal","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#000;
background:#fff;
margin:0;
padding:0;}

@media screen and (min-width: 601px){
.wrp{
width:600px;
margin:0 auto;}

.wrp2{overflow:hidden;}

.title{
font-family:Arsenal,和田研細明朝体,sans-serif;
font-size:24px;
font-weight:bold;
background:#d4dcda;
border-top:dashed 2px #fff;
box-shadow:0 -5px 0 #d4dcda;
float:left;
writing-mode:tb-rl;
writing-mode:vertical-rl;
-moz-writing-mode:vertical-rl;
-o-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
padding:20px;
margin-top:70px;}

.text{
width:80%;
float:right;}

.act{
max-width:280px;
margin:20px auto 20px;}

header{
max-width:300px;
margin:50px auto 20px;}
}

@media screen and (max-width: 600px){
.wrp{
width:100%;
margin:0 auto;}

.title{
display:inline-block;
font-family:Arsenal,和田研細明朝体,sans-serif;
font-size:24px;
font-weight:bold;
background:#d4dcda;
border-left:dashed 2px #fff;
box-shadow:-5px 0 0 #d4dcda;
padding:20px;
margin:50px 20px 20px;}

header{
margin:50px 25px 10px;}

.act{margin:20px 20px 20px 30px;}
}

.top{
height:50px;
background:url(##画像URL##) no-repeat;
background-position:right bottom;
background-size:100px;
margin:0 auto;
padding:30px 30px 30px 0;}

.act{
text-align:left;
background:#d4dcda;
border-left:dashed 2px #fff;
box-shadow:-10px 0 0 #d4dcda;
padding:15px 10px;
line-height:200%;}

.act a{
margin:0 5px 0 0;
text-shadow:0 0 3px #fff;}

.mr{
background:#fff;
width:20px;
height:20px;
border-radius:50%;
line-height:20px;
display:inline-block;
padding:0;
text-align:center;}

.text{
line-height:200%;
font-size:13px;
padding:30px 0 10px;
margin:30px 20px;
text-align:left;}

.text p{
line-height:150%;
color:#555;
border-top:solid 1px #e7e7eb;
border-bottom:solid 1px #e7e7eb;
margin:10px;
padding:10px;
font-size:10px;}

ol{
padding:0;
margin:0;
counter-reset:number;
list-style-type: none!important;}

ol li{
position:relative;
padding:5px 5px 0 25px;
}

ol li:before{
text-align:center;
position: absolute;
counter-increment: number;
content: counter(number);
display:inline-block;
background:#fff;
color:#555;
border-radius:50%;
left:0;
width:20px;
height:20px;
line-height:20px;
top:50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);}

.ft{
text-align:right;
margin:10px;}

.ft a{color:#888;}

h1{
font-family:Arsenal,和田研細明朝体,sans-serif;
line-height:100%;
margin:10px 0 20px;
padding:0;}

h2{
font-family:Arsenal,和田研細明朝体,sans-serif;
font-size:15px;
border-top:solid 1px #fff;
margin:20px 0 0;
padding:0;}

h2 p{
display:inline-block;
position:relative;
bottom:10px;
background:#d4dcda;
padding:0 10px;
margin:0 0 0 5px;}

a{
color:#555;
text-decoration:none;
padding:0 3px;
transition:0.5s;}

a:hover{
color:#8491c3;
text-shadow:0 0 3px #8491c3;}

input[type],textarea{
height:50px;
width:80%;
font-family:"Arsenal","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#d4dcda;
color:#333;
border:solid 2px #fff;
margin:5px 10px;
padding:2px 5px;
-webkit-appearance: none;
box-shadow:none;
border-radius:5px;}

input[type=text]{
margin:5px;
height:24px;
width:80px;}

input[type=submit]{
margin:5px;
height:auto;
width:50px;
cursor:pointer;
text-shadow:none;
border:solid 1px #fff;
background:#fff;
color:#333;
font-weight:normal;
}

</style>

表紙

文章

名前変換