納品
このコミットが含まれているのは:
コミット
5b2f00f34c
|
@ -0,0 +1,34 @@
|
||||||
|
➤ はじめに
|
||||||
|
imoyokanさんへ、依頼品のCSSとサイトテンプレートです。
|
||||||
|
https://scratch.mit.edu/discuss/post/6736707/
|
||||||
|
依頼を受けてから7ヶ月間も放置してごめんなさい...。
|
||||||
|
(サボり癖で片付けられる問題ではない)
|
||||||
|
|
||||||
|
➤知っておくべきこと
|
||||||
|
・JavaScript未使用です!
|
||||||
|
scriptタグもありません。
|
||||||
|
(これに起因する問題もある)
|
||||||
|
・文字コードは UTF-8、改行コードはLFになっています。
|
||||||
|
|
||||||
|
➤ 使い方
|
||||||
|
サイトのルートに /frame 以下をコピー
|
||||||
|
新しいページに template.html をコピーして書いていく
|
||||||
|
template.html に
|
||||||
|
・ページタイトルやアイコン
|
||||||
|
・サイトタイトル
|
||||||
|
・ヘッダー固定リンク
|
||||||
|
・本文終わりの四角い枠の中身
|
||||||
|
・フッター
|
||||||
|
などを設定するといいかも。
|
||||||
|
|
||||||
|
➤バグ
|
||||||
|
・枠で囲ってある範囲よりブラウザサイズが小さくなると崩れる
|
||||||
|
・圧倒的レトロ要素不足。ただのシンプルなサイトになった。
|
||||||
|
・一分環境で枠線の中に少しだけ隙間ができる
|
||||||
|
・コードに無駄が多い
|
||||||
|
|
||||||
|
➤今後
|
||||||
|
・メンテナンス等続けます
|
||||||
|
・欲しい機能は言ってもらえたら実装します
|
||||||
|
・「JavaScript使ってもいいよ!」だったら使います
|
||||||
|
・目次の自動生成機能
|
|
@ -0,0 +1,63 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>imoyokanさんへ</title>
|
||||||
|
<link rel="stylesheet" href="/frame/main.css" type="text/css">
|
||||||
|
<link rel="icon" type="image/png" href="/frame/icon.png"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="_frame_container" class="_frame">
|
||||||
|
<header id="_frame_header" class="_frame">
|
||||||
|
<h1><a href="/index.html">imoyokanのブログサイト (仮)</a></h1>
|
||||||
|
<nav>
|
||||||
|
<ul id="_frame_header_links">
|
||||||
|
<li><a href="/blog">ブログ</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main id="_frame_main" class="_frame">
|
||||||
|
<div id="_frame_page_title" class="_frame">
|
||||||
|
<h1>
|
||||||
|
記事タイトル
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<!-- 書きやすさの考慮のため、インデントが下がります。 -->
|
||||||
|
<!-- 記事本文ここから -->
|
||||||
|
<h1 id="midashi1">見出し1</h1>
|
||||||
|
<p>テキスト見本</p>
|
||||||
|
<h2 id="h2">h2</h2>
|
||||||
|
<h3 id="h3">h3</h3>
|
||||||
|
<h4 id="h4">h4</h4>
|
||||||
|
<h5 id="h5">h5</h5>
|
||||||
|
<h6 id=""h6>h6</h6>
|
||||||
|
<!-- 記事本文ここまで -->
|
||||||
|
</main>
|
||||||
|
<aside id="_frame_etc" class="_frame">著者情報とかシェアボタンとか</aside>
|
||||||
|
<div id="_frame_right" class="_frame">
|
||||||
|
<div id="_frame_index" class="_frame">
|
||||||
|
<span>目次</span>
|
||||||
|
<!--
|
||||||
|
JavaScript嫌いのため、目次は自力で設定する必要があります。
|
||||||
|
リンク先hタグのaタグのclassに _frame_index_h1 ~ _frame_index_h6 まで
|
||||||
|
-->
|
||||||
|
<a href="#midashi1" class="_frame_index_h1">見出し1</a>
|
||||||
|
<a href="#h2" class="_frame_index_h2">h2</a>
|
||||||
|
<a href="#h3" class="_frame_index_h3">h3</a>
|
||||||
|
<a href="#h4" class="_frame_index_h4">h4</a>
|
||||||
|
<a href="#h5" class="_frame_index_h5">h5</a>
|
||||||
|
<a href="#h6" class="_frame_index_h6">h6</a>
|
||||||
|
</div>
|
||||||
|
<aside><nav id="_frame_nav" class="_frame">
|
||||||
|
<span>関連記事</span>
|
||||||
|
<a href="/dummy.html">ダミー記事</a>
|
||||||
|
</nav></aside>
|
||||||
|
</div>
|
||||||
|
<footer id="_frame_footer" class="_frame">
|
||||||
|
フッターです<br>
|
||||||
|
中央揃えになります
|
||||||
|
<div>子要素等も問題ありません</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
バイナリファイルは表示されません。
変更後 幅: | 高さ: | サイズ: 1.3 KiB |
バイナリファイルは表示されません。
変更後 幅: | 高さ: | サイズ: 1.8 KiB |
|
@ -0,0 +1,196 @@
|
||||||
|
@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 Pゴシック,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", "MS P明朝", "MS 明朝", 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;
|
||||||
|
}
|
|
@ -0,0 +1 @@
|
||||||
|
<a href="/develop.html">goto</a>
|
|
@ -0,0 +1,66 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>タイトル</title>
|
||||||
|
<link rel="stylesheet" href="/frame/main.css" type="text/css">
|
||||||
|
<link rel="icon" type="image/png" href="/frame/icon.png"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="_frame_container" class="_frame">
|
||||||
|
<header id="_frame_header" class="_frame">
|
||||||
|
<h1><a href="/index.html">トップページへのリンク</a></h1>
|
||||||
|
<nav>
|
||||||
|
<ul id="_frame_header_links">
|
||||||
|
<!-- ↓の形式でリンクを書いていく -->
|
||||||
|
<!-- <li><a href="/blog">ブログ</a></li> -->
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main id="_frame_main" class="_frame">
|
||||||
|
<div id="_frame_page_title" class="_frame">
|
||||||
|
<h1>
|
||||||
|
記事タイトル
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<!-- 書きやすさの考慮のため、インデントが下がります。 -->
|
||||||
|
<!-- 記事本文ここから -->
|
||||||
|
<!--
|
||||||
|
id、class等
|
||||||
|
_frame で始まるもの以外
|
||||||
|
自由に使っていい。
|
||||||
|
-->
|
||||||
|
<!-- 記事本文ここまで -->
|
||||||
|
</main>
|
||||||
|
<aside id="_frame_etc" class="_frame">著者情報とかシェアボタンとか</aside>
|
||||||
|
<div id="_frame_right" class="_frame">
|
||||||
|
<div id="_frame_index" class="_frame">
|
||||||
|
<span>目次</span>
|
||||||
|
<!--
|
||||||
|
目次は自力で設定する必要があります。
|
||||||
|
リンク先hタグのaタグのclassに _frame_index_h1 ~ _frame_index_h6 まで
|
||||||
|
-->
|
||||||
|
<!-- (example)
|
||||||
|
<a href="#midashi1" class="_frame_index_h1">見出し1</a>
|
||||||
|
<a href="#h2" class="_frame_index_h2">h2</a>
|
||||||
|
<a href="#h3" class="_frame_index_h3">h3</a>
|
||||||
|
<a href="#h4" class="_frame_index_h4">h4</a>
|
||||||
|
<a href="#h5" class="_frame_index_h5">h5</a>
|
||||||
|
<a href="#h6" class="_frame_index_h6">h6</a>
|
||||||
|
-->
|
||||||
|
</div>
|
||||||
|
<aside><nav id="_frame_nav" class="_frame">
|
||||||
|
<span>関連記事</span>
|
||||||
|
<!-- <a href="/dummy.html">ダミー記事</a> -->
|
||||||
|
</nav></aside>
|
||||||
|
</div>
|
||||||
|
<footer id="_frame_footer" class="_frame">
|
||||||
|
<!--
|
||||||
|
フッターです<br>
|
||||||
|
中央揃えになります
|
||||||
|
<div>子要素等も問題ありません</div>
|
||||||
|
-->
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
読み込み中…
新しいイシューから参照