Garden

https://alicex.jp/○○○/

●
●

メニューは3つまで横に収まるように設定しています。4つ以上の場合は自動で2段になるか、あるいはお好みの場所で改行してください。

Information

●
●

First

○○を扱う××サイトです。当サイトの文章や画像の無断転載はご遠慮ください。

Name

サイト名

URL

https://alicex.jp/〇〇〇/
(un) link free

Master

お名前 - Mail, Res, Twi

About this template

画像はパブリックドメインのものを加工して作っているので、こちらからDLしてください。

表示サンプル -- リンク文字／アクセント文字
罫線

<div class="sendbox"></div>で囲んでいただいたエリアのフォームは以下の通り表示されます。

Name

Message

Souce code

HEAD

<style>
/*--------------- フォント ---------------*/
@import 'https://fonts.googleapis.com/css?family=Dosis:400,700';
/*--------------- 初期値 ---------------*/
*{ margin: 0; padding: 0; box-sizing: border-box;}
body{
color: #111;
font-size: 12px;
font-family: 'Dosis', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
line-height: 2;
letter-spacing: 1.9px;
word-break:break-all;
background-color: #eee;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a{
text-decoration: none;
color: #dc3522;
}
a:hover{ color: #d9e021;}
/*--------------- レイアウト ---------------*/
#wrap{ background-color: #fff;}
.container,section{
width: 400px;
max-width: 85%;
margin: auto;
padding: 50px 0 2em;
}
header{ text-align: center;}
footer{
background-color: #d9e021;
color: #fff;
text-align: center;
padding: 1em 0;
}
footer a{ color: #fff;}
footer a:hover{ color: #dc3522;}
.topimg{
width: 150px;
height: 150px;
background: url(画像のアドレス) repeat center center;
background-size: 100px;
border: 1px solid #d9e021;
border-radius: 50%;
margin: auto;
}
.topimg2{
width: 65px;
height: 65px;
background: url(画像のアドレス) repeat center center;
background-size: 55px;
border: 1px solid #d9e021;
border-radius: 50%;
margin: auto;
}
.maru{
color: #dc3522;
text-align: center;
line-height: 2em;
margin: 3em 0;
}
/*--------------- メニュー ---------------*/
nav{
text-align: center;
margin: 1em 0;
}
nav a{
display: inline-block;
width: 90px;
color: #111;
font-size: 14px;
border-bottom: 1px solid #d9e021;
margin: 0 10px;
}
nav a:hover{
border-bottom: 1px solid #dc3522;
}
/*--------------- テーブル ---------------*/
.table{ display: table;}
.row{ display: table-row;}
.cell{ display: table-cell;}
.item{
display: inline-block;
width: 100px;
text-align: center;
line-height: 1.5em;
background-color: #f3f3f3;
margin: 2px 1.5em 2px 0;
}
/*--------------- 見出し、文字 ---------------*/
h1{
line-height: 1em;
margin: 10px 0 0 0;
}
.url{
position: relative; top: ;
color: #ddd;
font-size: 9px;
line-height: 1em;
}
h2{ text-align: center;}
h3{
position: relative;
margin: 3em 0 0.5em 0;
}
mark{
background: linear-gradient(transparent 60%, #d9e021 60%);
}
/*--------------- 装飾 ---------------*/
hr{
border: none;
height: 1px;
border-top: 1px dotted #ccc;
}
/*--------------- フォーム ---------------*/
.sendbox input[type=text], .sendbox textarea, .sendbox input[type=submit]{
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
font-family: 'Dosis', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
background-color: #f3f3f3;
margin: 0 0 0.5em 0;
padding: 2px 4px;
}
.sendbox input[type=text]{
width: 150px;
}
.sendbox textarea{
width: 100%;
height: 6em;
}
.sendbox input[type=submit]{
display: block;
width: 80px;
color: #0076a3;
text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
text-align: center;
background: url(画像のアドレス) repeat center center;
background-size: 55px;
border: 1px solid #d9e021;
margin: auto 0 auto auto;
}
</style>

BODY - トップページ
BODY - 子ページ