このコミットが含まれているのは:
たかし 2024-01-03 11:08:33 +00:00
コミット 2569f94b50
4個のファイルの変更278行の追加1行の削除

ファイルの表示

@ -13,6 +13,9 @@
<h2>一覧 (新着順)</h2>
<dl>
<dt><a href="./styles/night.html">Night Style</a></dt>
<dd>2024-01-03 (陰暦11月22日)</dd>
<dd>黑を基本とした汎用的な CSS</dd>
<dt><a href="./styles/zote.html">Zote Style</a></dt>
<dd>2024-01-01 (陰暦11月20日)</dd>
<dd>某ウェブサイトを眞似した CSS 第二段</dd>

ファイルの表示

@ -21,7 +21,7 @@
<dt><a href="./webring.html">ウェブリング (リンク集)</a></dt>
<dd>2023-12-15 (陰暦11月03日)</dd>
<dt><a href="./csslist.html">美々のCSS素材集</a></dt>
<dd>2024-01-01 (陰暦11月20日)</dd>
<dd>2024-01-03 (陰暦11月22日)</dd>
</dl>
<h2>2. 文章</h2>

142
src/styles/night.css ノーマルファイル
ファイルの表示

@ -0,0 +1,142 @@
/* Night Style, 2024-01-03 */
html, body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
br, cite, code, em, hr, kbd, samp, strong, var,
a,
dl, dt, dd, ol, ul, li,
img
{
border: 0 solid #7d7d7d;
font-size: 100%;
font-style: normal;
font-weight: inherit;
margin: 0;
padding: 0;
}
body
{
background: #2b2b2b;
color: #f3f3f3;
margin: 1em 2.5em 3em;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6
{
font-weight: bold;
}
h1
{
font-size: 200%;
border-width: 0 0 medium;
margin-bottom: 0.5em;
padding-bottom: 0.125em;
line-height: 1.25;
}
h2, h3
{
font-size: 150%;
margin-bottom: 0.66em;
padding-top: 0.66em;
line-height: 1.25;
}
h2
{
border-width: medium 0 thin;
padding-bottom: 0.165em;
}
h3
{
border-width: thin 0 0;
}
h4
{
font-size: 112.5%;
line-height: 1.5;
margin-bottom: 0.89em;
}
h5
{
margin-bottom: 1em;
}
h6
{
font-style: italic;
}
dl, ul, ol, p, pre
{
margin-bottom: 1em;
}
blockquote, ul, ol,
dd
{
padding-left: 2em;
}
blockquote
{
border-width: 0 0 0 medium;
}
ul
{
list-style: disc;
}
strong, var
{
color: #f09199;
background: none;
}
cite,
dt,
em,
samp kbd
{
font-weight: bold;
}
pre,
code, samp, kbd
{
background: none;
color: #a0d8ef;
}
hr
{
border-width: 0 0 thin;
padding-top: 1px; /* netsurf */
margin-bottom: 1em;
}
img
{
border: thin solid;
font-style: italic;
vertical-align: bottom;
}
a
{
background: none;
color: #deb068;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}

132
src/styles/night.html ノーマルファイル
ファイルの表示

@ -0,0 +1,132 @@
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="./night.css">
<title>Night Style - 美々のCSS素材集</title>
<body>
<h1>Night Style</h1>
<p>黑を基本とした汎用的な CSS です。</p>
<ul>
<li><a href="./night.css">保存用: night.css</a></li>
<li><a href="./bibi.html">Bibi Style</a> を更に汎用化したもの</li>
<li>特徴の無いところが特徴だといへる</li>
<li>わりと綺麗かも</li>
</ul>
<h2>記述見本</h2>
<p>以下、見本です。</p>
<h3>リスト</h3>
<p>リストは次の通りです。</p>
<h4>順序なしリスト</h4>
<ul>
<li>日本語</li>
<li>英語</li>
<li>中國語
<ul>
<li>簡體</li>
<li>繁體</li>
</ul>
</li>
</ul>
<h4>順序つきリスト</h4>
<ol>
<li>朝起きる</li>
<li>寢坊する</li>
<li>急いで
<ol>
<li>着替へる</li>
<li>出掛ける</li>
</ol>
</ol>
<h4>定義リスト</h4>
<dl>
<dt>林檎</dt>
<dd>赤い果物</dd>
<dt>キウイフルーツ</dt>
<dt>マタタビ</dt>
<dd>酸つぱい果物</dd>
<dd>ネコを寄せつける</dd>
<dt></dt>
<dd>林檎に似た果物
<dl>
<dt>洋梨</dt>
<dd>西洋の梨</dd>
</dl>
</dd>
</dl>
<h3>引用</h3>
<h4>ブロック引用</h4>
<blockquote cite="https://example.com/">
<p>This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.</p>
</blockquote>
<h4>言及</h4>
<p><cite>GNUプロジェクト</cite>のウェブサイトによると GNU の撥音はヌーではなくグヌーです。</p>
<h3>色々な要素</h3>
<h4>強調</h4>
<ul>
<li><strong>STRONG による強調はこの通りです。</strong></li>
<li>EM要素による強調は、<em>こんな</em>感じです。</li>
</ul>
<h4>計算機關聯</h4>
<ul>
<li>コード斷片: <code>echo Hello.</code></li>
<li>變數: <var>$NAME</var> に名前を代入します。</li>
<li>入力/出力: <kbd>echo Hello.</kbd> と入力すると <samp>Hello.</samp> と出力されます。</li>
</ul>
<p>整形濟みテキスト (PRE) は次の通りです。</p>
<pre><samp>$ <kbd><var>script</var>=hello.sh</kbd>
$ <kbd>cat <var>$script</var></kbd></samp>
<code>#!/bin/sh
hello() {
echo Hello, <var>$1</var>.
}
hello World</code></pre>
<h4>微妙な要素</h4>
<h5>内容の區切り</h5>
<p>内容の區切りは次の通りです。</p>
<hr>
<p>使用法がわかりません。</p>
<h5>H5 見出し</h5>
<p>筆者は HTML で H5 や H6 を殆ど使用しません。</p>
<h6>H6 見出し</h6>
<p>ところで、H7 要素が存在しない。</P>
<h2>附加情報</h2>
<ul>
<li><a href="../csslist.html">美々のCSS素材集</a></li>
</ul>