CSSデザイン確認表

Mato
01/01/2025
JetTheme - Typography も参照。

h2

「ではみなさん、さういふふうに川だと云はれたり、乳の流れたあとだと云はれたりしてゐた、このぼんやりと白いものが何かご承知ですか。」

h3

先生は、黒板に吊した大きな黒い星座の圖の、上から下へ白くけぶつた銀河帶のやうなところを指しながら、みんなに問ひをかけました。カムパネルラが手をあげました。それから四五人手をあげました。

h4

ジヨバンニも手をあげようとして、急いでそのままやめました。たしかにあれがみんな星だと、いつか雜誌で讀んだのでしたが、このごろはジヨバンニはまるで毎日教室でもねむく、本を讀むひまも讀む本もないので、なんだかどんなこともよくわからないといふ氣持がするのでした。

h5

ところが先生は早くもそれを見附けたのでした。「ジヨバンニさん。あなたはわかつてゐるのでせう。」

ほか、インライン装飾

  • span class="key"キーボード表示：SPACE

  • markタグ（ハイライト）は今んとこ使ってない。

  • bは強調、strongは同じデザインでフォント大。

List

  • サンプル

  • サンプル

    1. サンプルサンプル

    2. 下線がいらない部分はclass="border-0"

  • サンプル

クリックで開く

内容

ジヨバンニは勢よく立ちあがりましたが、立つて見るともうはつきりとそれを答へることができないのでした。ザネリが前の席から、ふりかへつて、ジヨバンニを見てくすつとわらひました。ジヨバンニはもうどぎまぎしてまつ赤になつてしまひました。
先生がまた云ひました。
「大きな望遠鏡で銀河をよつく調べると銀河は大體何でせう。
ブログカード代わり。一行リンク。
Favicon

怪物であそぼう - Blogger

コード

ブロック

コードを入力。
<pre> 間の改行は margin-top のようになり、<code> 間の改行は行数に反映。

プラグイン4つ＋ボタン.js（色分けと行番号。Prism.js）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src="https://shizu49.github.io/games/copy_btn.js"></script>

インライン

  • style="white-space:nowrap;"は改行禁止

  • <wbr>は改行していいところ

  • class="language-javascript"で色分けプラグイン使用

  • 色

    • ■ #ccc白

    • ■ #7ec699緑

    • ■ #f08d49オレンジ

    • ■ #cc99cdピンク

    • ■ #67cdcc水色

    • ■ #e2777a赤　HTMLタグ

Next Post Previous Post