135 行
2.8 KiB
HTML
135 行
2.8 KiB
HTML
<!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>
|
|
|
|
</html>
|