パーツデザイン一覧Parts Design

リンクリストについてHow to Use

レイアウトは3パターンあります。それぞれ<ul class="linklist">に特定のclassを追記することで切り替わります。

large

• 青説明文説明文説明文説明文説明文説明文
• 赤説明文説明文説明文説明文説明文説明文
• 黄説明文説明文説明文説明文説明文説明文
• 緑説明文説明文説明文説明文説明文説明文
• グレー説明文説明文説明文説明文説明文説明文
• 黒説明文説明文説明文説明文説明文説明文

medium

• 青説明文説明文説明文説明文説明文説明文
• 赤説明文説明文説明文説明文説明文説明文
• 黄説明文説明文説明文説明文説明文説明文
• 緑説明文説明文説明文説明文説明文説明文
• グレー説明文説明文説明文説明文説明文説明文
• 黒説明文説明文説明文説明文説明文説明文

small

アイコンの背景について

アイコンの背景はCSSで色を変えています。

• 青
• 赤
• 黄
• 緑
• グレー
• 黒
• Instagram
• Bluesky

<span class="icn">に特定のclassを追記するとアイコンの背景色が変更できます。

背景のclass

• 青：icn_blue
• 赤：icn_red
• 黄：icn_yellow
• 緑：icn_green
• グレー：icn_grey
• X：icn_x
• Instagram：icn_inst
• Bluesky：icn_blsk

色ごとにグループ分けしたり、1色に統一してシンプルにするのもおすすめです。

アイコン画像について

アイコン画像は全てMingCute Iconbeta様よりダウンロードしました。
128pxのPNG画像を白色に加工しています。

色の設定についてColor

テキストや背景色はroot.cssで設定しています。使い方はこちら

見出し・テキストText

h2見出しin English

見出しの下にテキストがくるとこんな感じのレイアウトになります。

h3見出し

見出しの下にテキストがくるとこんな感じのレイアウトになります。

h4見出し

見出しの下にテキストがくるとこんな感じのレイアウトになります。

h5見出し

見出しの下にテキストがくるとこんな感じのレイアウトになります。

リンクLink

リンクの色の見本です。
文章の途中にリンクを入れるとこんな感じになります。

aタグをdivタグで囲い、divタグに「btn」のclassをつけるとボタンになります。

リストList

• リストの見本です。
• リストの中にリストを作成するとこんな感じになります↓
  • リストの中のリストの見本です。
  • リストの中のリストの見本です。
• リストの見本です。

1. リストの見本です。
2. リストの中にリストを作成するとこんな感じになります↓
   1. リストの中のリストの見本です。
   2. リストの中のリストの見本です。
3. リストの見本です。

区切り線Line

↓区切り線<hr>を使用するとこんな感じになります。

↑区切り線<hr>を使用するとこんな感じになります。

テーブルTable

コンタクトフォームForm

*は必須項目です。

※フォームはデザインのみです。動作に必要なコード・ファイルは含まれておりません。

更新履歴News

作品Works

テキスト

• テキスト1のタイトル

  作品のキャプションなどを入れる欄です。

• テキスト2のタイトル

  作品のキャプションなどを入れる欄です。

ギャラリー