新三角カラー

information

以前より配布していました「三角カラー」のヘッダー固定verです。menuは二段でもいけると思いますが４つくらいが最適です。ヘッダーメニュー固定しています。PCとiphoneでは確認できています。リンクテストここに文章を～～～～～～～～～～～～～～～～～～～～～。長文てすと、。付箋てすとてすとてすとてすと。てすとてすと。長文てすと、てすとてすとてすと。てすとてすと。長文てすと、てすとてすとてすと。てすとてすと

BOXてすと、てすとてすとてすと。てすとてすと。長文てすと、てすとてすとてすと。てすとてすと。長文てすと、てすとてすとてすと。てすとてすと。

HEAD

</script>

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

* html body{
 overflow: hidden;
}

* html div#contents{
 height: 100%;
 overflow: auto;
}

#header {
 position: fixed !important;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: auto;
 color: #fff;
 background-color:#6BBFB7;
 text-align:center;
 padding: 10px 5px 10px 5px;
}

.arrow_box {
    position: relative;
}

.arrow_box:after, .arrow_box:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
 
.arrow_box:after {
    border-color: rgba(37, 128, 247, 0);
    border-top-color: #6BBFB7;
    border-width: 20px;
    left: 50%;
    margin-left: -20px;
}

.arrow_box:before {
    border-color: rgba(59, 245, 195, 0);
    border-width: 38px;
    left: 50%;
    margin-left: -38px;
}

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

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

a {
 text-decoration: none;
}

a:hover { 
 color:#707070;
}

a.menu {
 text-decoration: none;
 color:#eeeeef;
 margin:0px 5px 0px 5px;
}

a.menu:hover { 
 color:#707070;
 margin:0px 5px 0px 5px;
}

hr{
 border:1px solid #ffffff;
 max-width:800px;
 margin:20px 0px 20px 0px;
}

h1{
 color:#ffffff;
 text-align:center;
 font-family: 'Poiret One', 'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
  Meiryo, メイリオ, sans-serif;
 margin:15px 0px 0px 0px;
 font-size:18px;
}

h2{
 color:#6BBFB7;
 font-family: 'Poiret One', 'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
  Meiryo, メイリオ, sans-serif;
 text-align:left;
 margin:0px 0px 5px 0px;
 font-size:15px;
}

h2:before {
 content: "▲";
 padding-right:6px;
 font-size:12px;
}

.ma { 
 color: #6BBFB7;
 padding: 1px 10px 1px 10px; 
 background-color:#ffffff;
}

.table {      
 padding-top:100px;
 padding-right:20px;
 padding-left:20px;
 font-size: 12px;
 text-align: left; 
}

.box {
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;      
 padding-top:10px;
 padding-bottom:10px;
 padding-right:20px;
 padding-left:20px;
 color: #6BBFB7;
 font-size: 11px;
 line-height:1.4em;
 border:2px solid #6BBFB7;
 background-color: #fff; 
 text-align: left; 
 margin:10px 0px 10px 0px;
}

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

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

</style>

BODY

main

ふつうのはなし
01 / 02 / 03

bookmark

bookmark / bookmark / bookmark

sankaku color

information

main

bookmark