From 5b2f00f34c9e9b1d125c3e1c19d5b7bf5fb9e10d Mon Sep 17 00:00:00 2001 From: akkun11 Date: Sun, 11 Jun 2023 21:50:04 +0900 Subject: [PATCH] =?UTF-8?q?=E7=B4=8D=E5=93=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- LICENSE | 0 README | 34 ++++++++ develop.html | 63 ++++++++++++++ frame/icon.png | Bin 0 -> 1378 bytes frame/icon_mirror.png | Bin 0 -> 1880 bytes frame/main.css | 196 ++++++++++++++++++++++++++++++++++++++++++ index.html | 1 + template.html | 66 ++++++++++++++ 8 files changed, 360 insertions(+) create mode 100644 LICENSE create mode 100644 README create mode 100644 develop.html create mode 100644 frame/icon.png create mode 100644 frame/icon_mirror.png create mode 100644 frame/main.css create mode 100644 index.html create mode 100644 template.html 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 0000000000000000000000000000000000000000..a4ea01769af43f45a52181b55bb3f576661a3c3a GIT binary patch literal 1378 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 * { + 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 @@ + + + + + タイトル + + + + +
+
+

トップページへのリンク

+ +
+
+
+

+ 記事タイトル +

+
+ + + + +
+ +
+
+ 目次 + + +
+ +
+ +
+ +