草鹿

site name

Welcome
当サイトは○○で××なサイトです。○○要素が含まれますので、お好きな方のみ閲覧なさってください。
詳しい注意事項はこちらを御覧ください。などなど

hitokoto

material byutahime（http://nanos.jp/singerprincess/）

＜div class="frame"＞で画像を囲むと紙に差し込んだ風に表示されます。

screen shot
対応機種から見るとこんな感じです。PC スマホ

お手数ですがHEADをこちらに変更してお使いください。

/*ページ全体の設定*/
body{
font-size:83%;
font-family: 'Architects Daughter',メイリオ ,cursive;
 /*背景色*/
background-color:#fff;
 /*文字色*/
color: #6f4b3e;}

/*リンクの設定*/
a{
color: #B29B73; /*リンク色*/
border-bottom: double 1px #F7EAD5;

/*リンクをゆっくり表示するエフェクト*/
text-decoration: none;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;}

/*選択中リンク色*/
a:active { color: #DEC598; }
 /*オンマウス時のリンク色*/
a:hover{
color: #f4a460;
border-bottom: double 1px #fff;
position: relative;
bottom: 1px;}

/*背景のグレー、余白、行間の設定*/
.layout {
text-align:center;
line-height:160%;
letter-spacing:3px;
background-color:#eee;}

/*白のメニュー枠*/
.all {
<smartphone>
width : 90% ; </smartphone> /* スマホ 幅 */
<pc_only>
width : 600px ; </pc_only> /* pc 幅 */
padding-top:5px;
background-color:#fff;}

.yohaku {
<smartphone>
font-size:11px;</smartphone> /* スマホ 文字サイズ */
<nopc>
line-height:120%;
letter-spacing:1px;
padding:6px;</nopc> /* ガラケー 行間、余白 */
<pc>padding:10px;</pc> /* pc 余白 */
text-align:left;}

/*サイトタイトルの装飾*/
.midashi {
position:relative;
padding:5px;
text-align:center;
font-size:18px;
font-family:Comic Sans MS;
color:#fff;
border-top:1px dashed #aaa;
border-bottom:1px dashed #aaa;
background:#eee;
text-shadow:1px 1px 0 rgba(255,255,255,1);
box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;}

.midashi2 {
font-size:16px;
color:#CEB792;
letter-spacing:3px;}

/*フッター*/
.footer {
text-align:center;
border-top:1px dashed #CEB792;
border-bottom:1px dashed #CEB792;}

/*画像の装飾*/
.frame {
display: inline-block;
position: relative;
overflow: hidden; /* 不要部分を消す */
padding: 6px; /* 6px だけは写真からはみ出す */
}
.frame img {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
.frame:before,
.frame:after {
content: "";
position: absolute;
z-index: 1;
width: 97px;
height: 50px;
background: #fff; /* 背景色 */
transform: rotate(-30deg);}
/* 左上 */
.frame:before {
box-shadow: 0 10px 8px -12px rgba(0, 0, 0, 0.8);
top: -24px;
bottom: auto;
right: auto;
left: -26px;}
/* 右下 */
.frame:after {
box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.7);
top: auto;
bottom: -22px;
right: -25px;
left: auto;}

/*フォームの設定*/
<pc>input,input[type="text"],input[type="number"],input[type="password"],input[type="submit"]{
  width:auto;
  padding-right:8px;
  padding-left:8px;
  margin:1%;
  color:#AEAEAE;
  background-image:none; 
  background-color:#ffffff;
  border:solid 1px #cccccc;
  font-size: 12px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);}</pc>

input,textarea,select,option{
font-family: 'Architects Daughter', 'メイリオ', Meiryo,cursive;
  color:#686868;
  background-image:none;
  background-color:#ffffff;
  border:solid 1px #cccccc;}

<pc>input, select, textarea {
font-size: 13px;
border-radius:5px;}
</pc>

/*スマホ向け、画像を画面サイズに縮小する*/
<smartphone>
img {
max-width: 100%;
height:auto;}</smartphone>

--></style>