information

サイトの説明などを書いたらどうでしょうか。ここはほにゃららほにゃららサイトです。色々あります。

動作確認はIEとsafari(iphone5)です、ガラケーではどうなってるのかわかりません。1Pに収めるよりは、メニューだけ真ん中にぽんと表示させた方が可愛いかなと思います。

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

付箋はこんなかんじでお好きに色を変えてください

HEAD

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

body{
 font-size: 12px;
 line-height: 1.5em;
 overflow-y:scroll;
 letter-spacing:2px;
 }

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

a {
 text-decoration: none;
}

a:hover { 
 color: #EEDF3E; 
 background-color: #eeeeee; 
}

#left,#migi {
 display: table-cell;
}

#left {  
 width: 40%;
 padding: 35px 0px 0px 0px; 
}

#migi {
 padding: 0px 0px 0px 10px; 
 font-size: 10px;
 width: 100px;
 vertical-align:top;
 text-align:right;
}

.arrow_box {
 padding: 20px 20px 20px 20px; 
 position: relative;
 background: #eeeeee;
 border: 2px solid #352DA7;
}

.arrow_box:after, .arrow_box:before {
 right: 100%;
 top: 50%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}

.arrow_box:after {
 border-color: rgba(255, 255, 255, 0);
 border-right-color: #eeeeee;
 border-width: 4px;
 margin-top: -4px;
}

.arrow_box:before {
 border-color: rgba(51, 0, 255, 0);
 border-right-color: #352DA7;
 border-width: 7px;
 margin-top: -7px;
}

h1{
 margin: 0px 0px 0px 0px;
 font-size:15px;
 font-family: 'Oxygen', sans-serif;
 text-align: left; 
}

.ss {
background-color: #2F3F8D;
color: #cccccc;
}

.ma {
background-color: #eeeeee;
color: #2F3F8D;
}

.menu {
 padding: 10% 10px 2px 10px; 
 font-family:'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 Meiryo, メイリオ, sans-serif;
 text-align:right;
}

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

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

</style>

BODY