スタイルギャラリー

本ページでは当サイトで利用可能なスタイルを紹介します。Syntax Highlightを除き、ほとんどのデザインはCSSのみで構築されています。 InspireされたデザインはRadix UIであり、 またPaletteで利用されている配色はCustom Paletteを用いて生成されています。

利用方法

このデザインを利用するには、以下のタグをHTMLのheadタグ末尾に追加する必要があります。

<!-- 全ページ共通のスタイル -->
<link rel="stylesheet" href="/assets/common/css/palette.css" />
<link rel="stylesheet" href="/assets/common/css/main.css" />

<!-- Syntax Highlightが必要なページはhighlightjsを読み込む -->
<link rel="stylesheet" href="/assets/highlight/styles/default.css">
<link rel="stylesheet" href="/assets/highlight/styles/base16/espresso.min.css" />
<script defer src="/assets/highlight/highlight.min.js"></script>
<script defer src="/assets/common/js/syntax-highlight.js"></script>
      

Color Palette

Typography

いくつか特徴的なスタイルとして、pタグを利用した時、段落であることを示すためにtext-indentの値を1emに指定しています。

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading

h6. Heading

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga odit voluptas doloribus dolorum ipsam, magnam dicta et enim distinctio voluptates, perferendis ea? Minus maxime earum cumque quidem beatae veritatis quibusdam.

List

• Unordered List Item 01
• Unordered List Item 02
• Unordered List Item 03
• Unordered List Item 04
• Unordered List Item 05
• Unordered List Item 06
• Unordered List Item 07
• Unordered List Item 08
• Unordered List Item 09
• Unordered List Item 10

1. Ordered List Item 01
2. Ordered List Item 02
3. Ordered List Item 03
4. Ordered List Item 04
5. Ordered List Item 05
6. Ordered List Item 06
7. Ordered List Item 07
8. Ordered List Item 08
9. Ordered List Item 09
10. Ordered List Item 10

Anchor

リンクを含む文字列になります。このページのリンクはGallery Linkとなります。

Image

画像を含む紹介

複数枚の画像

Table

Blockquote

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, minus eius. Consectetur, reprehenderit. Reprehenderit corrupti nulla porro provident perspiciatis consectetur suscipit quas, dolor atque, saepe, odio omnis similique facere quam.

引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列引用文字列

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos natus pariatur deserunt. Expedita voluptate nulla, neque cum autem totam recusandae. Harum consequuntur blanditiis eos ad dolore, autem minima amet laborum!

Code Block

highlight.jsとweb workerを利用してSyntax Highlightを充てています。 highlight.jsで利用するThemeはbase16-espresssoを用いています。

import { TsGenerator } from "@himenon/openapi-typescript-code-generator/dist/api";
import * as Types from "@himenon/openapi-typescript-code-generator/dist/types";

type Option = {};

const factory = TsGenerator.Factory.create();

const generator: Types.CodeGenerator.GenerateFunction = (
  payload: Types.CodeGenerator.Params[],
  option,
): Types.CodeGenerator.IntermediateCode[] => {
  return payload.map(params => {
    return factory.InterfaceDeclaration.create({
      export: true,
      name: params.functionName,
      members: [],
    });
  });
};

const customGenerator: Types.CodeGenerator.CustomGenerator = {
  generator: generator,
  option: {},
};