アイディアノート

Information

サイトの説明などを書いたらどうでしょうか。ここはほにゃららほにゃららサイトです。色々あります。動作確認はIEとsafari(iphone5)です、ガラケーではどうなってるのかわかりません。例によってメニューだけ表示させた方がきっちりすると思います。付箋はこんなかんじでお好きに色を変えてください,リンクテスト

画像はパブリックドメインなので↓から保存して下さい

HEAD

* {
 margin:0 auto;
 padding:0 auto;
}

body{
 font-size: 12px;
  line-height: 1.7em;
 font-family:'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 Meiryo, メイリオ, sans-serif;
 overflow-y:scroll;
 letter-spacing:1px;
}

img { 
 max-width: 100%; 
 height:auto;
}

a.menu {
 text-decoration: none;
}

a.menu:hover { 
 color: #AB9760; 
  -webkit-transform: rotate(5deg);
  -moz-transform   : rotate(5deg);
  -ms-transform    : rotate(5deg);
  -o-transform     : rotate(5deg);
  transform        : rotate(5deg);
}

a {
 text-decoration: none;
}

a:hover { 
 color: #AB9760; 
}

h1{
 margin: 0px 0px -10px 50px;
 font-size:25px;
 text-align: leftt; 
 font-family: 'Homemade Apple', cursive;
  -webkit-transform: rotate(-10deg);
  -moz-transform   : rotate(-10deg);
  -ms-transform    : rotate(-10deg);
  -o-transform     : rotate(-10deg);
  transform        : rotate(-10deg);
}

h2{
 margin: -20px 0px 0px 0px;
 font-size:18px;
 font-family: 'Homemade Apple', cursive;
  -webkit-transform: rotate(-3deg);
  -moz-transform   : rotate(-3deg);
  -ms-transform    : rotate(-3deg);
  -o-transform     : rotate(-3deg);
  transform        : rotate(-3deg);
 text-align: right; 
}

h3{
 color:#000000;
 margin: 0px 0px 10px -10px;
 text-decoration: underline;
 font-size:12px;
 font-family: 'Homemade Apple', cursive;
 text-align: left; 
  -webkit-transform: rotate(-5deg);
  -moz-transform   : rotate(-5deg);
  -ms-transform    : rotate(-5deg);
  -o-transform     : rotate(-5deg);
  transform        : rotate(-5deg);
}

.ma {
background-color: #eeeeee;
color: #B7AB81;
}

.menu {
 padding-top:4px;
 padding-bottom:20px;
}

.table {
 margin:10px 0px 10px 0px;
 padding-top:30px;
 padding-bottom:20px;
 padding-right:20px;
 padding-left:20px;
 background-color: #ffffff; 
 text-align: left; 
}

@media screen and (min-width: 700px) {.all {  width:700px;}}

@media screen and (max-width: 400px) {.all { 
 width:auto;
 letter-spacing: -0.001em;
 padding: 0px 10px 0px 10px;
 text-align: justify;
 text-justify: inter-ideograph;
}

h1{
 margin: 0px 0px -10px 10px;
 font-size:15px;
 text-align: leftt; 
 font-family: 'Homemade Apple', cursive;
  -webkit-transform: rotate(-10deg);
  -moz-transform   : rotate(-10deg);
  -ms-transform    : rotate(-10deg);
  -o-transform     : rotate(-10deg);
  transform        : rotate(-10deg);
}

h2{
 margin: -10px 0px 0px 0px;
 font-size:10px;
 font-family: 'Homemade Apple', cursive;
  -webkit-transform: rotate(-3deg);
  -moz-transform   : rotate(-3deg);
  -ms-transform    : rotate(-3deg);
  -o-transform     : rotate(-3deg);
  transform        : rotate(-3deg);
 text-align: right; 
}

h3{
 color:#000000;
 margin: 0px 0px 2px -10px;
 text-decoration: underline;
 font-size:12px;
 font-family: 'Homemade Apple', cursive;
 text-align: left; 
  -webkit-transform: rotate(-5deg);
  -moz-transform   : rotate(-5deg);
  -ms-transform    : rotate(-5deg);
  -o-transform     : rotate(-5deg);
  transform        : rotate(-5deg);
}}

</style>

BODY

素材原寸大（未透過）↓

Site title

information - main - bookmark - clap

Information