commit 5b2f00f34c9e9b1d125c3e1c19d5b7bf5fb9e10d Author: akkun11 Date: Sun Jun 11 21:50:04 2023 +0900 納品 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..e69de29 diff --git a/README b/README new file mode 100644 index 0000000..eda58a3 --- /dev/null +++ b/README @@ -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使ってもいいよ！」だったら使います +・目次の自動生成機能 diff --git a/develop.html b/develop.html new file mode 100644 index 0000000..c8d2532 --- /dev/null +++ b/develop.html @@ -0,0 +1,63 @@ + + + + + imoyokanさんへ + + + + +

imoyokanのブログサイト (仮)

+ +

+ 記事タイトル +

+ + +

見出し1

テキスト見本

h2

h3

h4

h5

h6

+ +

+ 目次 + + 見出し1 + h2 + h3 + h4 + h5 + h6 +

+ +

+ + diff --git a/frame/icon.png b/frame/icon.png new file mode 100644 index 0000000..a4ea017 Binary files /dev/null and b/frame/icon.png differ diff --git a/frame/icon_mirror.png b/frame/icon_mirror.png new file mode 100644 index 0000000..99e705a Binary files /dev/null and b/frame/icon_mirror.png differ diff --git a/frame/main.css b/frame/main.css new file mode 100644 index 0000000..7d2e864 --- /dev/null +++ b/frame/main.css @@ -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; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..efc8faa --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +goto \ No newline at end of file diff --git a/template.html b/template.html new file mode 100644 index 0000000..9a02053 --- /dev/null +++ b/template.html @@ -0,0 +1,66 @@ + + + + + タイトル + + + + +

トップページへのリンク

+ +

+ 記事タイトル +

+ + + + +

+ +

+ 目次 + + +

+ +