Ray - Ikkaku

Main contents

自動改行は「しない」で制作しています。
背景はパブリックドメインのものを加工したものなのでこちらから。

HEAD

< ! - - jQueryここから- - >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 700;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

</script> < ! - - jQueryここまで - - >
<link href="https://fonts.googleapis.com/css?family=Megrim|Mrs+Saint+Delafield&display=swap" rel="stylesheet">

<style type="text/css"><!--

@font-face
{
font-family: やさしさゴシック;
src: url('https://cdn.leafscape.be/Yasashisa/YasashisaGothic_web.woff2')
     format("woff2");
}
        
body,h1,h2,h3,p{
 margin: 0;
 padding: 0;}

body{font-family: やさしさゴシック, sans-serif;
margin: 10px; /* bodyの外側の余白を指定する */
padding: 10px 10px 50px 10px; /* bodyの内側余白を指定する(上:右:下:左) */
background:#000 url(##背景画像URL##) repeat-y center center;
background-size:cover;
color: #fff;
 font-size: 13px;
 line-height: 1.6;
 word-wrap : break-word;}

::selection {
    background: #fff;
    color: #000;
}

//Firefox
::-moz-selection {
    background:#fff;
    color: #000;
}


a{ text-decoration: none;
 color: #ccc;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 tap-highlight-color: rgba(0,0,0,0);}

a:hover{
 color: #fff;}

a:active{ color: #000;}

.all{
 max-width: 500px;
 margin: auto;
padding: 0 15px 0 15px;
 margin-top: 30px; 
}

.top{ text-align: center;
padding: 100px 5px 100px;}



h1,h2,h3,{
 letter-spacing: 1px;}

h1{font-family: 'Mrs Saint Delafield';
text-align: center; 
color:#fff;
text-shadow: 
3px 3px 7px #ff69b4,
-3px 3px 7px #ff69b4,
3px -3px 7px #ff69b4,
-3px -3px 7px #ff69b4;
font-size:15px;
}

h1:before{
  content: 'Ray.';/*ここにサイト名*/
 color: #fff;
text-shadow: 
3px 3px 7px #3399ff,
-3px 3px 7px #3399ff,
3px -3px 7px #3399ff,
-3px -3px 7px #3399ff;
  font-size: 6em; /*文字サイズ*/
  display: block; /*改行するように*/
}

h2{font-family: 'Megrim';
 font-size: 150%;
 color: #fff;
 text-align: center;
 margin-bottom: 12px;}

h2:before{
  content: '-';
  color: #fff;/*色を変える*/
}

h2:after{
 content: '-';
  color: #fff;/*色を変える*/
}

h3{color:#000;
display:inline-block;
margin:.3em 0; padding:.3em .7em .2em .8em;
background:#fff; font-size:90%;}

span{color:#fff;
text-shadow: 
3px 3px 7px #ff69b4,
-3px 3px 7px #ff69b4,
3px -3px 7px #ff69b4,
-3px -3px 7px #ff69b4;}


#menu{position: fixed; /* ヘッダーを固定する */
top: 0;/* 上部から配置の基準位置を決める */
left: 0; /* 左から配置の基準位置を決める */
width: 100%; /* ヘッダーの横幅を指定する */
height: 40px; /* ヘッダーの高さを指定する */
padding: 10px; /* ヘッダーの余白を指定する(上下左右) */
background:#000;}

nav{width: 100%; /* コンテンツの横幅を指定する */
overflow: auto; /* コンテンツの表示を自動に設定（スクロール） */
 letter-spacing: 1px;
 text-align: center;
 padding: 10px 0;
}

nav a{font-family: 'Megrim';
 display: inline-block;
margin:.3em 0; padding:.3em .2em .2em .3em;
 width: 15%;
 margin: 3px;
background:rgba(0,0,0,0.5);
 color: #fff;
 text-decoration: none;}

nav a:hover{
background:#fff;
 color: #000;}

.h100{
  height: 100px;
}

hr{border:0;
height: 10px;
width: 100%;
  background-image: linear-gradient(
    hsla(0, 0%, 100%, 1),
    hsla(0, 0%, 100%, 1) 33.33%,
    hsla(0, 0%, 100%, 0) 33.33%,
    hsla(0, 0%, 100%, 0) 100%);
  background-size: 100% 3px;
  width: 40px;
display: block;}

article{ margin: 200px 0;
padding: 5px 10px;
background:rgba(0,0,0,0.3);}


p{ padding: 3px 0;
font-weight:normal;}

.color{ color: #a44;}

input[type],select,textarea{
font-family: やさしさゴシック,sans-serif;
font-size:11px;
height:auto;
margin:5px 0;
padding:3px 5px;
background:rgba(178,175,139,.3);
color:#ccc;
border-radius:0;
border:#fff solid 1px;
letter-spacing:1px;
line-height: 1.5;
box-shadow:none;
outline:none;
vertical-align:middle;
}

input[type=text]{font-family: やさしさゴシック, sans-serif;
margin-right:5px;
width:150px;
}

select{
margin-right:5px;
width:auto;
}

input[type=submit]{font-family: やさしさゴシック, sans-serif;
background:rgba(178,175,139,.3);
padding:4px 6px;
width:auto;
color:#ccc;
border:#444 solid 1px;
}


textarea{
font-family: やさしさゴシック, sans-serif;
background:rgba(178,175,139,.3);
color:#ccc;
width:98%;
padding:1%;
display;block;
height:40px;
border:#fff solid 1px;
border-radius:3px;
letter-spacing:1px;
line-height:1.5;
font-size:12px;}


--></style>

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="menu"><nav><a href="#info">info</a><a href="#source">haco</a><a href="#con">mail</a><a href="#">top</a></nav></div>
<div class="all top">
<a href="#info"><h1>U p d a t e 00/00/00</h1></a><br><br><br></div>
<div class="all">
<section id="info"><p><article><h2><span>I</span>nform<span>a</span>tion </h2>
ここは●●と××を取り扱う個人サイトです。理解の無い方は閲覧をお控えください、などなど。<br>
サイト名はヘッダー内からご変更下さい。<br>
以前作ったネオン系の別バージョンのような…？<br>日本語フォントはわりと重めなので、ご使用の際はご注意下さい。<br>
ナビゲーションは上部固定になっています。文字数少な目のコンテンツ名で4～5つくらいがきれいに並ぶかと。<br>
いい感じにコンテンツを増やしたりしてください～。<br>
＜span＞で<span>文字が光ります。</span>何か目立たせたい時にどうぞ。<br>
＜ｈ３＞で囲むと<h3>こんな感じ</h3>になります。強調したい時などにどうぞ。<br>
<center><hr></center><br>
<h3>bkm</h3><br>
リンクフリーに甘えています。エトセトラエトセトラ。<br>
<a href="#">メニュー以外のリンクサンプル</a>/<a href="#">link</a>/<a href="#">link</a><br><br></article></p></section>
</div>

U p d a t e 00/00/00

Information

こんな感じ

bkm

Main contents

HEAD

HTML

Contact

Name

Message