style: zote, and table
このコミットが含まれているのは:
コミット
cc4b585365
|
|
@ -13,13 +13,25 @@
|
|||
<h2>一覧 (新着順)</h2>
|
||||
|
||||
<dl>
|
||||
<dt><a href="./styles/zote.html">Zote Style</a></dt>
|
||||
<dd>2023-01-01 (陰暦11月20日)</dd>
|
||||
<dd>某ウェブサイトを眞似した CSS 第二段</dd>
|
||||
<dt><a href="./styles/kiita.html">Kiita Style</a></dt>
|
||||
<dd>2023-12-31 (陰暦11月19日)</dd>
|
||||
<dd>某ウェブサイトを眞似した CSS</dd>
|
||||
<dd>某ウェブサイトを眞似した CSS 第一段</dd>
|
||||
<dt><a href="./styles/bibi.html">Bibi Style</a></dt>
|
||||
<dd>美々蝶々の CSS</dd>
|
||||
</dl>
|
||||
|
||||
<h3>部品のみ</h3>
|
||||
|
||||
<p>他との併用を前提とした CSS です。</p>
|
||||
|
||||
<dl>
|
||||
<dt><a href="./styles/table.html">Table Style</a></dt>
|
||||
<dd>TABLE 要素の装飾</dd>
|
||||
</dl>
|
||||
|
||||
<h2>使用方法 (例)</h2>
|
||||
|
||||
<ol>
|
||||
|
|
|
|||
|
|
@ -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>2023-12-31 (陰暦11月19日)</dd>
|
||||
<dd>2024-01-01 (陰暦11月12日)</dd>
|
||||
</dl>
|
||||
|
||||
<h2>2. 文章</h2>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* Kiita Style */
|
||||
/* Kiita Style, 2024-01-01 */
|
||||
html, body,
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
blockquote, p, pre,
|
||||
|
|
@ -120,6 +120,7 @@ ol, ul
|
|||
hr
|
||||
{
|
||||
border-width: 0 0 thin;
|
||||
padding-top: 1px; /* Netsurf */
|
||||
}
|
||||
|
||||
pre,
|
||||
|
|
@ -204,6 +205,6 @@ a:visited
|
|||
img
|
||||
{
|
||||
border: thin solid #e0e0e0;
|
||||
font-style: itaric;
|
||||
font-style: italic;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
/* Table Style, 2024-01-01 */
|
||||
table, caption, thead, tbody, tfoot, tr, th, td
|
||||
{
|
||||
border: 0 none;
|
||||
border-spacing: 0;
|
||||
font-size: 100%;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
table
|
||||
{
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
th, td
|
||||
{
|
||||
border: thin solid;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
thead + tbody tr th,
|
||||
thead + tbody tr td,
|
||||
tbody + tfoot tr th,
|
||||
tbody + tfoot tr td,
|
||||
tr + tr th,
|
||||
tr + tr td
|
||||
{
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
th + th,
|
||||
th + td,
|
||||
td + th,
|
||||
td + td
|
||||
{
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
th
|
||||
{
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!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">
|
||||
<link rel="stylesheet" type="text/css" href="./table.css">
|
||||
<title>Table Style - 美々のCSS素材集</title>
|
||||
<body>
|
||||
|
||||
<h1>Table Style</h1>
|
||||
|
||||
<p>TABLE 要素の装飾用です。</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="./table.css">保存用: table.css</a></li>
|
||||
<li>色を全く指定してゐないため、他の CSS と組合せて使用可能</li>
|
||||
<li>互換性とソース記述量とを考へて最小限に装飾した</li>
|
||||
<li>實際に使用するなら色や餘白を調整すると良いかも</li>
|
||||
</ul>
|
||||
|
||||
<h2>記述見本</h2>
|
||||
|
||||
<p><a href="./bibi.html">Bibi Style</a> と組合せてゐます。</p>
|
||||
|
||||
<table summary="ザックリとしたOSの比較。各列はOSの種類を表し、各行は項目を表す。">
|
||||
<caption>ザックリとしたOSの比較</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>項目</th>
|
||||
<th>Trisquel GNU/Linux</th>
|
||||
<th>OpenBSD</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>系統</th>
|
||||
<td>Ubuntu 派生</td>
|
||||
<td>BSD の子孫</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>パッケージ管理</th>
|
||||
<td>dpkg/apt</td>
|
||||
<td>pkg_*</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>標準のGUI</th>
|
||||
<td>MATE/KDE/LXDE</td>
|
||||
<td>FVWM/CWM/TWM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>GFSDG準拠</th>
|
||||
<td>はい</td>
|
||||
<td>いいえ</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>總括</th>
|
||||
<td>100% 自由で利用しやすい OS</td>
|
||||
<td>BSD 系の簡潔な OS</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<h2>互換性に關する覚書</h2>
|
||||
|
||||
<h3>TABLE要素内の記述順</h3>
|
||||
|
||||
<p>Firefox 等は TABLE 直下の要素がどの順番で書かれてゐても適切な順で表示しますが、Dillo や Netsurf ではソースの記述順に表示されるため、次の順で記述します。</p>
|
||||
|
||||
<ol>
|
||||
<li>CAPTION</li>
|
||||
<li>THEAD</li>
|
||||
<li>TBODY</li>
|
||||
<li>TFOOT</li>
|
||||
</ol>
|
||||
|
||||
<p>尚、Dillo では記述順によらず CAPTION が TABLE の下側に表示されます。</p>
|
||||
|
||||
<h3>Borderの指定</h3>
|
||||
|
||||
<p>TABLE に border を指定すると Netsurf で CAPTION の表示が崩れるため、border は TH や TD でのみ指定します。</p>
|
||||
|
||||
<h2>附加情報</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="../csslist.html">美々のCSS素材集</a></li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
/* Zote Style, 2024-01-01 */
|
||||
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;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
background: white;
|
||||
color: #08131a;
|
||||
margin: 0 auto 96px;
|
||||
max-width: 620px;
|
||||
padding: 0 16px;
|
||||
font-size: 1.125em;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, hr
|
||||
{
|
||||
border-color: #5c6368;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
font-weight: bold;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
font-size: 1.78em;
|
||||
line-height: 1.5;
|
||||
margin-top: 72px;
|
||||
}
|
||||
|
||||
h2
|
||||
{
|
||||
border-width: thin 0 0;
|
||||
font-size: 1.56em;
|
||||
line-height: 1.29;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
h3
|
||||
{
|
||||
font-size: 1.11em;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
h4, h5, h6
|
||||
{
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
h5
|
||||
{
|
||||
background: #f5f8fa;
|
||||
color: #010101;
|
||||
font-size: 0.88em;
|
||||
}
|
||||
|
||||
h6
|
||||
{
|
||||
background: #f5f8fa;
|
||||
color: #010101;
|
||||
font-size: 0.67em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* TODO: h4-h6 */
|
||||
|
||||
dl, ul, ol, p, pre, hr
|
||||
{
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
blockquote
|
||||
{
|
||||
background: #f5f8fa;
|
||||
color: #08131a;
|
||||
padding: 0 36px;
|
||||
font-size: 0.88em;
|
||||
line-height: 2.25em;
|
||||
}
|
||||
|
||||
blockquote blockquote
|
||||
{
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre, code
|
||||
{
|
||||
font-size: 0.67em;
|
||||
background: #010101;
|
||||
color: #fff;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
pre
|
||||
{
|
||||
line-height: 1.5;
|
||||
padding: 18px 36px;
|
||||
}
|
||||
|
||||
pre code
|
||||
{
|
||||
font-size: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl, ul, ol
|
||||
{
|
||||
padding-left: 1.33em;
|
||||
}
|
||||
|
||||
ul, dt
|
||||
{
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
dt
|
||||
{
|
||||
font-weight: bold;
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
em, strong
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
em
|
||||
{
|
||||
background: transparent;
|
||||
color: #5c6368;
|
||||
}
|
||||
|
||||
strong
|
||||
{
|
||||
background: transparent;
|
||||
color: #010101;
|
||||
}
|
||||
|
||||
var
|
||||
{
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
pre var
|
||||
{
|
||||
color: #98c379;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
pre kbd
|
||||
{
|
||||
color: #c678dd;
|
||||
}
|
||||
|
||||
hr
|
||||
{
|
||||
border-width: 0 0 thin;
|
||||
padding-top: 1px; /* Netsurf */
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
background: transparent;
|
||||
color: #08131a;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover
|
||||
{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
border: thin solid #5c6368;
|
||||
font-style: italic;
|
||||
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="./zote.css">
|
||||
<title>Zote Style - 美々のCSS素材集</title>
|
||||
<body>
|
||||
|
||||
<h1>Zote Style</h1>
|
||||
|
||||
<p>某ウェブサイトを眞似した CSS です。</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="./zote.css">保存用: zote.css</a></li>
|
||||
<li>上下の餘白は元ネタより小さくした</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>
|
||||
読み込み中…
新しいイシューから参照