csslist
このコミットが含まれているのは:
コミット
3ba5135d3f
1
make.sh
1
make.sh
|
|
@ -13,6 +13,7 @@ cp -pv src/favicon.ico www
|
|||
cp -pv src/robots.txt www
|
||||
cp -pv src/076mute.user.js www
|
||||
cp -rpv src/images www
|
||||
cp -rpv src/styles www
|
||||
|
||||
cd src
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<title>美々のCSS素材集</title>
|
||||
|
||||
<h1>美々のCSS素材集</h1>
|
||||
|
||||
<p>汎用的な CSS 素材です。特徴は次の通りです。</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>著作權放棄のフリー素材</strong></li>
|
||||
<li>CLASS は不使用</li>
|
||||
<li>Dillo や Netsurf に概ね對應</li>
|
||||
</ul>
|
||||
|
||||
<h2>使用方法 (例)</h2>
|
||||
|
||||
<ol>
|
||||
<li>「保存用: <var>何々</var>.css」のリンクから CSS ファイルを保存する</li>
|
||||
<li>保存した CSS ファイルと同じフォルダーに HTML ファイルを作成する (HTML 解説は計畫中)</li>
|
||||
<li>作成した HTML の HEAD 要素内に <code><link rel="stylesheet" type="text/css" href="<var>何々</var>.css"></code> の樣に記述する</li>
|
||||
</ol>
|
||||
|
||||
<h2>一覧 (新着順)</h2>
|
||||
|
||||
<dl>
|
||||
<dt><a href="./styles/kiita.html">Kiita Style</a></dt>
|
||||
<dd>2023-12-31 (陰暦11月19日)</dd>
|
||||
<dd>某ウェブサイトを眞似した CSS</dd>
|
||||
<dt><a href="./styles/bibi.html">Bibi Style</a></dt>
|
||||
<dd>美々蝶々の CSS</dd>
|
||||
</dl>
|
||||
|
||||
<h2>對應する要素型</h2>
|
||||
|
||||
<p>CSS ファイルの先頭のセレクターを參照してください。尚、非對應の要素型にはウェブブラウザーのデフォルトのスタイルが適用されます。</p>
|
||||
|
|
@ -20,6 +20,8 @@
|
|||
<dl>
|
||||
<dt><a href="./webring.html">ウェブリング (リンク集)</a></dt>
|
||||
<dd>2023-12-15 (陰暦11月03日)</dd>
|
||||
<dt><a href="./csslist.html">美々のCSS素材集</a></dt>
|
||||
<dd>2023-12-31 (陰暦11月19日)</dd>
|
||||
</dl>
|
||||
|
||||
<h2>2. 文章</h2>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/* Bibi Style */
|
||||
html, body,
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
address, blockquote, p, pre,
|
||||
blockquote, p, pre,
|
||||
br, cite, code, em, kbd, samp, strong, var,
|
||||
a,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
|
|
|
|||
|
|
@ -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="../style.css">
|
||||
<title>Bibi Style - 美々のCSS素材集</title>
|
||||
<body>
|
||||
|
||||
<h1>Bibi Style</h1>
|
||||
|
||||
<p>美々蝶々で使用してゐる CSS です。</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="./style.css">保存用: style.css</a></li>
|
||||
<li>當然、美々蝶々の分量や構成に合せて設計してある</li>
|
||||
<li>見出しの文字サイズが一定 (W3M リスペクト)</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>
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
/* Kiita Style */
|
||||
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
|
||||
{
|
||||
font-size: 100%;
|
||||
font-style: normal;
|
||||
font-weight: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html
|
||||
{
|
||||
border-bottom: 395px solid #2f3232;
|
||||
background: #f5f6f6;
|
||||
padding: 48px 0 64px 10%;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
background: #fff;
|
||||
border: thin solid #fff;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
color: #212121;
|
||||
font-size: 1.0625em;
|
||||
line-height: 1.7;
|
||||
max-width: 820px;
|
||||
padding: 31px 55px 31px;
|
||||
}
|
||||
|
||||
body > :first-child
|
||||
{
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, hr
|
||||
{
|
||||
border-color: #e0e0e0;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h1, h2
|
||||
{
|
||||
border-width: 0 0 thin;
|
||||
line-height: 1.4;
|
||||
padding: 48px 0 4px;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
font-size: 1.65em;
|
||||
}
|
||||
|
||||
h2
|
||||
{
|
||||
font-size: 1.53em;
|
||||
padding-top: 48px;
|
||||
}
|
||||
|
||||
h3, h4
|
||||
{
|
||||
line-height: 1.6;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
h3
|
||||
{
|
||||
font-size: 1.29em;
|
||||
}
|
||||
|
||||
h4
|
||||
{
|
||||
font-size: 1.06em;
|
||||
}
|
||||
|
||||
h5, h6
|
||||
{
|
||||
font-size: 0.94em;
|
||||
line-height: 1.8;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
blockquote, dl, ul, ol, p, pre
|
||||
{
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
blockquote
|
||||
{
|
||||
border-left: thick solid #dfe0e0;
|
||||
background: transparent;
|
||||
color: #666;
|
||||
padding-left: 0.94em;
|
||||
}
|
||||
|
||||
dt
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd
|
||||
{
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
ol, ul
|
||||
{
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
hr
|
||||
{
|
||||
border-width: 0 0 thin;
|
||||
}
|
||||
|
||||
pre,
|
||||
pre code
|
||||
{
|
||||
background: #1d2020;
|
||||
color: #e3e3e3;
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
pre
|
||||
{
|
||||
border: thin solid #1d2020;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
font-size: 0.88em;
|
||||
}
|
||||
|
||||
body > pre
|
||||
{
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
}
|
||||
|
||||
code
|
||||
{
|
||||
font-size: 0.88em;
|
||||
background: #ebebeb;
|
||||
border-radius: 4px;
|
||||
color: #212121;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
pre kbd
|
||||
{
|
||||
background: transparent;
|
||||
color: #ebd247;
|
||||
}
|
||||
|
||||
pre var
|
||||
{
|
||||
background: transparent;
|
||||
color: #8bdf4c;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
em, strong
|
||||
{
|
||||
background: none;
|
||||
color: #010101;
|
||||
}
|
||||
|
||||
address, cite, em, var, h6
|
||||
{
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
color: #287100;
|
||||
background: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover
|
||||
{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited
|
||||
{
|
||||
background: transparent;
|
||||
color: #681da8;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
border: thin solid #e0e0e0;
|
||||
font-style: itaric;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
|
@ -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="./kiita.css">
|
||||
<title>Kiita Style - 美々のCSS素材集</title>
|
||||
<body>
|
||||
|
||||
<h1>Kiita Style</h1>
|
||||
|
||||
<p>某ウェブサイトを眞似した CSS です。</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="./kiita.css">保存用: kiita.css</a></li>
|
||||
<li>パッと見た時に「それらしく」なることを目指した</li>
|
||||
<li>元ネタと異なり、リンクに下線をつけた</li>
|
||||
<li>PRE の中限定で、KBD や VAR に色をつけた</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>
|
||||
読み込み中…
新しいイシューから参照