196 行
3.9 KiB
CSS
196 行
3.9 KiB
CSS
@charset "utf-8";
|
||
|
||
/* 全般的なフレームワークの設定 */
|
||
body {
|
||
margin: 10px;
|
||
background-image: url("/frame/icon.png");
|
||
}
|
||
#_frame_container {
|
||
display: grid;
|
||
grid-template:
|
||
"header header " 120px
|
||
"main right " auto
|
||
"etc right " auto
|
||
"footer footer " auto
|
||
/ 460px 260px ;
|
||
|
||
max-width: 720px;
|
||
margin: 0px auto 0px;
|
||
|
||
border: 10px solid black;
|
||
box-shadow: 0px 0px 20px #000;
|
||
background-color: whitesmoke;
|
||
}
|
||
#_frame_container * {
|
||
font-family: YJTop Ellipsis,ヒラギノ角ゴ ProN,Hiragino Kaku Gothic ProN,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,MS PGothic,sans-serif;
|
||
/* box-sizing: border-box; */
|
||
}
|
||
#_frame_container > * {
|
||
padding: 16px;
|
||
}
|
||
|
||
/* 雑多な部分。特に小細工はしない。 */
|
||
#_frame_etc {
|
||
grid-area: etc;
|
||
margin: 20px;
|
||
border: 1px solid black;
|
||
background-color: rgb(90, 215, 146);
|
||
}
|
||
#_frame_footer {
|
||
grid-area: footer;
|
||
background-color: #101010;
|
||
color: #bbbbbb;
|
||
display: flex;
|
||
flex-flow: column;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
/* ヘッダーに関する部分 */
|
||
#_frame_header {
|
||
grid-area: header;
|
||
background-color: #9af2ff;
|
||
overflow: hidden;
|
||
}
|
||
#_frame_header > h1 {
|
||
text-align: center;
|
||
margin: 0px;
|
||
position:relative;
|
||
height: 69px;
|
||
animation: _frame_loop 10s -25s linear infinite;
|
||
}
|
||
@keyframes _frame_loop {
|
||
0% {
|
||
transform: translateX(100%);
|
||
}
|
||
to {
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
#_frame_header > h1 > a {
|
||
color:darkcyan;
|
||
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
|
||
}
|
||
#_frame_header > h1 > a::before {
|
||
display:inline-block;
|
||
content: url(/frame/icon.png);
|
||
transform: scale(0.8);
|
||
vertical-align: middle;
|
||
padding-right: 5px;
|
||
}
|
||
#_frame_header > h1 > a::after {
|
||
display:inline-block;
|
||
content: url(/frame/icon_mirror.png);
|
||
transform: scale(0.8);
|
||
vertical-align: middle;
|
||
padding-right: 5px;
|
||
}
|
||
#_frame_header_links {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
list-style:none;
|
||
margin: 0px;
|
||
padding: 0px 10px;
|
||
}
|
||
#_frame_header_links > li{
|
||
border: 3px solid black;
|
||
border-top-left-radius: 10px;
|
||
border-top-right-radius: 10px;
|
||
padding: 3px 10px;
|
||
box-shadow: 0px 0px 10px #000;
|
||
background-color: #2b2b2b;
|
||
margin: 3px;
|
||
height: 20px;
|
||
}
|
||
#_frame_header_links > li > a {
|
||
font-weight: bold;
|
||
text-decoration: none;
|
||
color: azure;
|
||
}
|
||
|
||
/* サイドバーの設定 */
|
||
#_frame_right {
|
||
grid-area: right;
|
||
}
|
||
/* 目次 */
|
||
#_frame_index {
|
||
border: 2px solid black;
|
||
display: flex;
|
||
flex-flow: column;
|
||
margin-bottom: 15px;
|
||
}
|
||
#_frame_index > span{
|
||
padding-top: 5px;
|
||
border-bottom: 2px solid black;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
background-color: darkorchid;
|
||
}
|
||
#_frame_index > a._frame_index_h1{
|
||
padding-left: 5px;
|
||
}
|
||
#_frame_index > a._frame_index_h2{
|
||
padding-left: 10px;
|
||
}
|
||
#_frame_index > a._frame_index_h3{
|
||
padding-left: 15px;
|
||
}
|
||
#_frame_index > a._frame_index_h4{
|
||
padding-left: 20px;
|
||
}
|
||
#_frame_index > a._frame_index_h5{
|
||
padding-left: 25px;
|
||
}
|
||
#_frame_index > a._frame_index_h6{
|
||
padding-left: 30px;
|
||
}
|
||
/* 関連情報 */
|
||
#_frame_nav {
|
||
border: 2px solid black;
|
||
display: flex;
|
||
flex-flow: column;
|
||
margin-bottom: 15px;
|
||
}
|
||
#_frame_nav > span{
|
||
padding-top: 5px;
|
||
border-bottom: 2px solid black;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
background-color:dodgerblue;
|
||
}
|
||
|
||
/* 記事本文の設定 */
|
||
#_frame_main {
|
||
grid-area: main;
|
||
}
|
||
#_frame_page_title > h1{
|
||
color: rgb(0, 0, 0);
|
||
background-image: radial-gradient(#b9aeff 3px, transparent 3px);
|
||
background-size: 10px 10px;
|
||
padding-left: 15px;
|
||
border-bottom: 5px solid darkblue;
|
||
}
|
||
#_frame_main > h1 {
|
||
padding-left: 15px;
|
||
border-bottom: 1px solid gray;
|
||
}
|
||
#_frame_main > h2 {
|
||
padding-left: 15px;
|
||
border-bottom: 1px solid gray;
|
||
}
|
||
#_frame_main > h3 {
|
||
padding-left: 15px;
|
||
border-bottom: 1px solid gray;
|
||
}
|
||
#_frame_main > h4 {
|
||
padding-left: 15px;
|
||
border-bottom: 1px solid gray;
|
||
}
|
||
#_frame_main > h5 {
|
||
padding-left: 15px;
|
||
border-bottom: 1px solid gray;
|
||
}
|
||
#_frame_main > h6 {
|
||
padding-left: 15px;
|
||
border-bottom: 1px solid gray;
|
||
} |