FormatCss - rikuryo-bukken/rikuryo-bukken.github.io GitHub Wiki
このファイルをページで読み込むと、ページの右側（画面の幅が小さいスマホなどでは下）にサイドバーを設置し、角が丸い四角で縁取るなどのデザインが可能。
body {
margin: 0;
background-color: white;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
#main_contents {
flex: 7;
}
#sub_contents {
flex: 2;
height: 100%;
position: sticky;
top: 0;
z-index: 2;
background-color: darkcyan;
}
#contents {
margin: 2% 3%;
padding: 3em;
background-color: #dcffff;
border-radius: 20px;
}
#pager {
background-color: inherit;
box-sizing: border-box;
width: 100%;
height: 100vh;
padding: 10% 2em;
}
#pager ul {
background-color: azure;
border-radius: 10px;
margin-top: 0;
margin-bottom: 10%;
list-style: none;
padding: 0.1px 0;
padding-left: 0;
}
#pager ul:last-child {
margin-bottom: 0;
}
#pager ul li {
margin: 7px 0;
}
#pager ul li a {
padding: 3px 5px;
text-decoration: none;
}
#pager ul li a:link {
color: #33007b;
}
#pager ul li a:visited {
color: #33007b;
}
#pager ul li a:active {
color: #7b0000;
}
@media screen and (max-width: 959px) {
body {
display: flex;
flex-direction: column;
}
#main_contents {
flex: none;
}
#sub_contents {
flex: none;
height: auto;
position: static;
}
#pager {
height: auto;
padding: 1.2em 2em;
}
#pager ul {
margin-bottom: 15px;
}
#contents {
padding: 5%;
}
}
@media screen and (max-width: 480px) {
#contents {
padding: 2%;
}
}default.cssとは違い、細かい説明はしない。
このformat.cssファイルを使用する際には、以下のようにhtmlファイルを記述する。
まず、（一般的には）headタグ内に、以下のようにしてcssファイルを読み込む。
<link rel="stylesheet" href="/format.css">次に、bodyタグ内は以下のようにタグを構成する。
<body>
<div id="main_contents">
<main id="contents">
＜ページの内容＞
</main>
</div>
<div id="sub_contents">
<nav id="pager">
<ul>
<li><a href="/">トップページ</a></li>
</ul>
<ul>
<li><a href="/games/">ゲーム集</a></li>
<li><a href="/sitemap/">サイトマップ</a></li>
</ul>
</nav>
</div>
</body>ページの内容が記述されるのは＜ページの内容＞の部分である。
mainタグのかわりにdivタグを用いてもよい。ただし、id="contents"は変更しないこと。
id属性がpagerのタグ内には、ulタグを追加しても削除してもよい。基本的には、1つ目のulタグにはパンくずリスト（記述の仕方は138期のページなどを参考のこと）を、2つ目のulタグにはゲーム集及びサイトマップのリンクを記述する。なお、ulタグ以外を追加するのは不可である。