トリコロール

ここはサイトの趣旨や注意事項などご自由に使用してください。メニュー以外のリンクと強調線です。

下記はおまけの見出しデザインです。子ページ等にご活用ください。

midashi1

midahi2

midahi3

midahi4

source code

自動改行“しない”で作成しています。

HEAD

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

@font-face
{
font-family: Fontpoにほんご;
src: url('https://cdn.leafscape.be/nihongo/FontopoNIHONGO_web.woff2')
     format("woff2");
}

body{
font-family:"Ubuntu","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:180%;
color:#000;
background:#fff;
margin:0;
padding:0;}

@media screen and (min-width:501px){
.wrp{
max-width:500px;
margin:0 auto;}
}

@media screen and (max-width:500px){
.wrp{
width:100%;
margin:0 auto;}
}

.menu{
width:60px;
height:60px;
margin:-31px 10px 10px;
border:solid 1px #0092b7;
background:#0092b7;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
overflow:hidden;
display:inline-block;}

.menu p{
font-size:14px;
margin:0;
padding:36px 0 0 15px;
position:absolute;
width:60px;
height:60px;
color:#fff;
background:transparent;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
text-align:center;}

.menu2{
width:60px;
height:60px;
margin:-31px 10px 10px;
border:solid 1px #000;
background:#fff;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
overflow:hidden;
display:inline-block;}

.menu2 p{
font-size:14px;
margin:0;
padding:36px 0 0 15px;
position:absolute;
width:60px;
height:60px;
color:#000;
background:transparent;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
text-align:center;}

.menu3{
width:60px;
height:60px;
margin:-31px 10px 10px;
border:solid 1px #bf3a3a;
background:#bf3a3a;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
overflow:hidden;
display:inline-block;}

.menu3 p{
font-size:14px;
margin:0;
padding:36px 0 0 15px;
position:absolute;
width:60px;
height:60px;
color:#fff;
background:transparent;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
text-align:center;}

.top{
margin:0 20px 40px;
text-align:center;}

.top a{
margin:0;
padding:0;
transition:0.5s;}

.top a:hover{opacity:.6;}

.info{
margin:20px;
padding:15px;
background: -moz-linear-gradient(left top, #fff, #fff 25%, #f5f5f5 25%, #f5f5f5 50%,#fff 50%, #fff 75%, #f5f5f5 75%,#f5f5f5);
background: -webkit-linear-gradient(left top, #fff, #fff 25%, #f5f5f5 25%, #f5f5f5 50%,#fff 50%, #fff 75%, #f5f5f5 75%,#f5f5f5);
background: linear-gradient(left top, #fff, #fff 25%, #f5f5f5 25%, #f5f5f5 50%,#fff 50%, #fff 75%, #f5f5f5 75%,#f5f5f5);
-moz-background-size: 5px 5px;
-webkit-background-size: 5px 5px;
background-size: 5px 5px;
text-align:left;}

.con{margin:20px;}

strong{
border-bottom:double 3px #000;
font-weight:normal;
margin:0 1px;
padding:0 2px;}

h1{
color:#000;
font-size:22px;
font-weight:normal;
font-family:"Ubuntu","Fontpoにほんご", sans-serif;
margin:5px 0;
padding:0;
text-align:center;}

h2{
font-size:16px;
font-weight:normal;
margin:10px 0;
position:relative;
padding-left:30px;
}

h2::before,h2::after{
content:"□";
position:absolute;
}

h2::before{
left:0;
top:-3px;
color:#0092b7;}

h2::after{
left:5px;
top:3px;
color:#bf3a3a;}

h3{
font-size:12px;
font-weight:normal;
margin:10px 10px 10px 0;
padding:2px 5px;
border:solid 1px #0092b7;
background:#0092b7;
color:#fff;
display:inline-block;}

h4{
font-size:12px;
font-weight:normal;
margin:10px 10px 10px 0;
padding:2px 5px;
border:solid 1px #bf3a3a;
background:#bf3a3a;
color:#fff;
display:inline-block;}

h5{
font-size:12px;
font-weight:normal;
margin:10px 10px 10px 0;
padding:2px 5px;
border:solid 1px #000;
display:inline-block;}

a{
color:#555;
text-decoration:none;
padding:0 3px;}

a:hover{color:#000;}

</style>

本文