Stylesheet (Simple HTML) サンプルファイル

Home > Software > This Page

Last Update

このファイルは、Stylesheet (Simple HTML) に定義されているスタイルを確認するためのサンプルファイルです。

太字、イタリック、取り消し線、A Link

アンダーライン、マーカー

CSSで独自の色マーカーを定義しています。

見出しタグ H1 源氏物語 桐壺

どの天皇様の御代であったか、女御とか更衣とかいわれる後宮がおおぜいいた中に、最上の貴族出身ではないが深い御愛寵を得ている人があった。最初から自分こそはという自信と、親兄弟の勢力に恃む所があって宮中にはいった女御たちからは失敬な女としてねたまれた。

見出しタグ H2 源氏物語 桐壺

その人と同等、もしくはそれより地位の低い更衣たちはまして 嫉妬 （ しっと ） の 焔 （ ほのお ） を燃やさないわけもなかった。夜の 御殿 （ おとど ） の 宿直所 （ とのいどころ ） から 退 （ さが ） る朝、続いてその人ばかりが召される夜、目に見耳に聞いて 口惜 （ くちお ） しがらせた恨みのせいもあったかからだが弱くなって、

見出しタグ H3 Jane Austen Pride and Prejudice

It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife.

However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.

“My dear Mr. Bennet,” said his lady to him one day, “have you heard that Netherfield Park is let at last?”

Mr. Bennet replied that he had not.

見出しタグ H4 Jane Austen Pride and Prejudice

“But it is,” returned she; “for Mrs. Long has just been here, and she told me all about it.”
Mr. Bennet made no answer.

“Do not you want to know who has taken it?” cried his wife, impatiently.
“_You_ want to tell me, and I have no objection to hearing it.”

表のサンプル

枠線あり

<table>
    <caption>ETF価格推移(終値) S&P500(1547), NF_TOPIX(1306)<caption>
    <tr>
        <th>S&P500(1547)</th>
        <td>9635</td>
    </tr>
    …以下省略

枠線なし

<table class="noborder">
    <caption>ETF価格推移(終値) S&P500(1547), NF_TOPIX(1306)<caption>
    <tr>
        <th>S&P500(1547)</th>
        <td>9635</td>
    </tr>
    …以下省略

ソースコード pre、引用 blockquote、インラインコード code

hello.c

#include <stdio.h>
void main() {
    printf("Hello World !\n");
}

夏目漱石 吾輩は猫である

　吾輩は猫である。名前はまだ無い。
　どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

The eval() vs. exec() built-in functions; the former is for expressions, the latter is for statements

<pre class="title">hello.c</pre>
<pre>
#include <stdio.h>
void main() {
    printf("Hello World !\n");
}</pre>

<blockquote class="title">夏目漱石 吾輩は猫である</blockquote>
<blockquote>　吾輩は猫である。名前はまだ無い。<br />
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
</blockquote>

<p>The <code>eval()</code> vs. <code>exec()</code> built-in functions; the former is for expressions, the latter is for statements</p>
        

折りたたみ要素 details summary

open属性をつけると、デフォルトでウィジェットを開いた状態で表示します。また、stylesにwidth: fit-contentを指定することで、外周ボックスを文字列の長さぴったりに収められます。

<details open class="border" style="width: fit-content;">
    <summary>折りたたみ要素で作成した「もくじ」</summary>
    <ul>
        <li><a href="">項目 1</a></li>
        <li><a href="">項目 2</a></li>
        <li><a href="">項目 3</a></li>
    </ul>
</details>

open属性を付けない場合は、デフォルトでヴィジェットは閉じて表示されます。

<details>
    <summary>jsonファイルを読み込むPythonスクリプト例を表示する</summary>
    <pre>
import json

with open('sample.json') as f:
data = json.load(f)

print(json.dumps(data, indent=4))</pre>
</details>

import json

with open('sample.json') as f:
    data = json.load(f)

print(json.dumps(data, indent=4))

リスト dl、用語 dt、用語の説明 dd

<dl>
    <dt>PER</dt>
    <dd>株価が利益の何倍かを示す指標</dd>
    <dt>PBR</dt>
    <dd>株価が純資産の何倍かを示す指標</dd>
</dl>

PER

株価が利益の何倍かを示す指標

PBR

株価が純資産の何倍かを示す指標

ROE

自己資本に対する利益率

順序なしリスト ul、項目要素 li

<ul>
    <li>第1族元素
        <ul>
            <li>H 水素</li>
            <li>Li リチウム</li>
            <li>Na ナトリウム</li>
        </ul>
    </li>
    <li>第2族元素
        <ul>
            <li>Be ベリリウム</li>
            <li>Mg マグネシウム</li>
        </ul>
    </li>
</ul>

• 第1族元素
  • H 水素
  • Li リチウム
  • Na ナトリウム
• 第2族元素
  • Be ベリリウム
  • Mg マグネシウム

順序ありリスト ol、項目要素 li

<ol>
    <li>第1族元素
        <ol type="A">
            <li>H 水素</li>
            <li>Li リチウム</li>
            <li>Na ナトリウム</li>
        </ol>
    </li>
    <li>第2族元素
        <ol type="i">
            <li>Be ベリリウム</li>
            <li>Mg マグネシウム</li>
        </ol>
    </li>
</ol>

1. 第1族元素
   1. H 水素
   2. Li リチウム
   3. Na ナトリウム
2. 第2族元素
   1. Be ベリリウム
   2. Mg マグネシウム