Miyata Blog

Style Guide

Color

Blue

Primary

#0079C9

Secondary
#0096FA
Tertiary
#005791

Green

Primary
#008736
Secondary
#00A843
Tertiary
#006629

Red

Primary
#E81F00
Secondary
#FF2200
Tertiary
#B01700

Yellow

Primary
#917200
Secondary
#B28C00
Tertiary
#6E5600

Neutral

Black
#333
White
#FFF

GrayScale

#000
#111
#222
#333
#444
#555
#666
#777
#888
#999
#AAA
#BBB
#CCC
#DDD
#EEE
#F1F1F1
#F4F4F4
#F6F6F6
#F8F8F8
#FAFAFA
#FCFCFC
#FFF

Font

Montserrat
Roboto
Noto Sans JP

Label

small

テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト

regular

テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト

large

テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト

noRounded

テキスト
テキスト

Tab

Pager

1 2 3 10

Breadcrumb

Card

small

regular

Slideshow

CTA Button

ButtonボタンButtonボタンButtonボタンButtonボタンButtonボタンButtonボタンButtonボタンButtonボタン

Form

radio

必須

Text｜テキスト

textbox

必須

Text｜テキスト

checkbox

任意

Text｜テキスト

select

任意

Text｜テキスト

Wizard

入力
確認
完了

Article

Title

テキスト

読了までの時間 ： 約10分

テキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

タグ1 タグ2
dummy

H2

大見出し

キャプションキャプションキャプションキャプションキャプションキャプション

本文テキスト本文テキスト テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文

H3

中見出し

キャプションキャプションキャプションキャプションキャプションキャプション

本文テキスト本文テキスト テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文

H4

小見出し

キャプションキャプションキャプションキャプションキャプションキャプション

本文テキスト本文テキスト テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文

Table of content

ImageCol1

dummy
出典：example.com

ImageCol2

dummy
キャプションキャプションキャプション
dummy
キャプションキャプションキャプション

ImageCo2l-withText

dummy

小見出し

テキスト本文テキスト本文テキスト本文テキストテキスト本文テキスト本文テキスト本文テキストテキスト本文テキスト本文テキスト本文テキスト

  • テキスト

    テキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
dummy

小見出し

テキスト本文テキスト本文テキスト本文テキストテキスト本文テキスト本文テキスト本文テキストテキスト本文テキスト本文テキスト本文テキスト

  1. 1.
    テキスト

    テキストテキストテキストテキストテキストテキストテキストテキスト

  2. 2.
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  3. 3.
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
dummy

小見出し

テキスト本文テキスト本文テキスト本文テキストテキスト本文テキスト本文テキスト本文テキストテキスト本文テキスト本文テキスト本文テキスト

List

  • テキスト

    テキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  1. 1.
    テキスト

    テキストテキストテキストテキストテキストテキストテキストテキスト

  2. 2.
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  3. 3.
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

Note

これは注釈です。これは注釈です。これは注釈です。 これは注釈です。これは注釈です。これは注釈です。 これは注釈です。これは注釈です。これは注釈です。 これは注釈です。これは注釈です。これは注釈です。

OGtitle

Table

データ1 データ1 データ1 データ1 データ1
データ1 テキスト テキスト テキスト テキスト テキスト
データ1 テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
データ1 テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
データ1 データ1 データ1 データ1 データ1
データ1 テキスト テキスト テキスト テキスト テキスト
データ1 テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
データ1 テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
データ1 データ1 データ1 データ1 データ1
データ1 テキスト テキスト テキスト テキスト テキスト
データ1 テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
データ1 テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト

Code

HTML
            
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>ようこそ、私のウェブサイトへ！</h1>
<nav>
  <ul>
      <li><a href="#home">ホーム</a></li>
      <li><a href="#about">私たちについて</a></li>
      <li><a href="#services">サービス</a></li>
      <li><a href="#contact">お問い合わせ</a></li>
  </ul>
</nav>
</header>

<main>
<section id="home">
  <h2>ホームセクション</h2>
  <p>ここでは、ウェブサイトの紹介や最新情報を表示します。</p>
</section>

<section id="about">
  <h2>私たちについて</h2>
  <p>私たちのチームについての情報や背景を提供します。</p>
</section>

<section id="services">
  <h2>サービス</h2>
  <p>提供しているサービスの詳細を紹介します。</p>
</section>

<section id="contact">
  <h2>お問い合わせ</h2>
  <p>私たちに連絡するための情報を提供します。</p>
  <form action="/submit" method="post">
      <label for="name">名前:</label>
      <input type="text" id="name" name="name" required>
      <label for="email">メール:</label>
      <input type="email" id="email" name="email" required>
      <label for="message">メッセージ:</label>
      <textarea id="message" name="message" required></textarea>
      <button type="submit">送信</button>
  </form>
</section>
</main>

<footer>
<p>© 2024 サンプル会社. 無断転載を禁じます。</p>
</footer>
</body>
</html>

FolderStructure

フォルダ構成

  • index.html
  • scss
    • _variable.scss
    • _color.scss
    • style.scss
  • image
    • common
      • logo.png
      • ogp.png
      • favicon.svg
    • sample
      • dummy.png
    • article
      • design
        • image01.png
      • other
        • image01.png
      • engineering
        • image01.png

Flow

STEP1
フロー1

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

STEP2
フロー2

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

STEP3
フロー3

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

Timeline

2025年1月テキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

2025年2月テキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

2025年3月テキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

About

みやた

都内の広告代理店に勤務。1995年生まれ。
発達障害（ASD）と双極性障害がある。WebデザイナーとWebエンジニアの狭間で仕事をしている。

note miyata_note