やさしい地球

特にページデザインは考えていませんが、ここに表示しても良いかと。長文テスト。てすと。わりとちまっとしています。確認はPCとiphoneです。メニュー数は５つ前後が収まりが良いかと思いますが、お好きにして下さい。

!! lalan 様より素材をお借りしています

HEAD

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

body{
 margin:0 auto;
 padding:0 auto;
 font-size: 12px;
 overflow-y:scroll;
  font-family:'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
  Meiryo, メイリオ, sans-serif;
}

#menu {
 background: #ffffff; 
 padding: 10% 0px 0px 0px;  
 font-size: 10px;
 text-align: center;
}

.photobox{
 width:200px;
 height:200px;
 background: url(#画像url#) 
 no-repeat;position:relative;
}

.photobox p{ 
 width:150px;
 position:absolute; 
 top:60px;
 left:20px;
 color:#707070;
 font-size:10px;
}

a {
 text-decoration: none;
 border-bottom: 1px dotted;
}

a:hover { 
 color: #3BCB9B; 
}

h1{
 color:#3BCB9B;
 font-size:20px;
 margin: 0px 0px 0px 0px;  
 font-family: 'Open Sans Condensed', sans-serif;
}

.title {
 background-color: #ffffff;
 color:#3BCB9B;
 font-size:17px;
 font-family: 'Open Sans Condensed', sans-serif;
}

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

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

</style>

BODY