納品
このコミットが含まれているのは:
コミット
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 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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
読み込み中…
新しいイシューから参照