デザインガイドライン

もくじ

• レイアウト
• 使用する色
• 背景色
• 文字色
• 区切り線色
• フォント
• スペース
• アイコン
• リセットCSS
• CSS記述順番
• ロゴ
• 表示確認/構文チェック

レイアウト

• メニューバー
• タイトル
• サイトの説明
• もくじ
  (280px)
• メインコンテンツ
  (100%-280px)
• フィードバック
• ページトップに戻る
• フッターサイトマップ
• コピーライト

• レスポンシブウェブデザインのため、横幅660px以下の環境では｢もくじ｣の下に｢メインコンテンツ｣が表示されます。

使用する色

•  
• #121212
• [900]{サブカラー}
•  
• #323232
• [800]{メインカラー}
•  
• #505050
• [700]直線の色
•  
• #636363
• [600]
•  
• #8a8a8a
• [500]
•  
• #ababab
• [400]点線の色
•  
• #d0d0d0
• [300]直線の色,点線の色
•  
• #e2e2e2
• [200]
•  
• #eeeeee
• [100]
•  
• #f7f7f7
• [050]白い背景,白文字
•  
• #ffffff
• 白い背景
•  
• #000095
• リンク
•  
• #990000
• リンク
•  
• #90CAF9
• リンク (ダークモード)
•  
• #2196F3
• リンク (ダークモード)

背景色

•  
• #323232
• メニューバー
•  
• #ffffff
• メインコンテンツ
•  
• #f7f7f7
• 見出し (h3)
•  
• #323232
• 見出し (h3) 左側の縦棒
•  
• #f7f7f7
• ページトップに戻る
•  
• #323232
• フッターサイトマップ
•  
• #121212
• コピーライト
•  
• #121212
• ダークモード

文字色

• あ
• #f7f7f7
• メニューバー
• あ
• #323232
• メインコンテンツ
• あ
• #323232
• 見出し (h3)
•  
• なし
• 見出し (h3) 左側の縦棒
• あ
• #323232
• ページトップに戻る
• あ
• #f7f7f7
• フッターサイトマップ
• あ
• #f7f7f7
• コピーライト
• あ
• #f7f7f7
• ダークモード
• あ
• #000095
• ハイパーリンク

区切り線色

•  
• #505050

• ---

•  
• #ababab

• ---

•  
• #d0d0d0

• ---

フォント

• font-family (全体・想定)
• ■ Microsoft Windows
  メイリオ
  ■ Apple‎ Macintosh (Mac)
  San Francisco
  ■ Apple‎ iPhone
  San Francisco
  ■ Google Android
  Roboto
• font-family (全体)
• -apple-system,
  BlinkMacSystemFont,
  "Helvetica Neue",
  "メイリオ",Meiryo,
  "ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic ProN",
  "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro",
  Arial,
  sans-serif;
• font-family (等幅・想定)
• ■ Microsoft Windows
  Consolas
  ■ Apple‎ Macintosh (Mac)
  Courier
  ■ Apple‎ iPhone
  Courier
  ■ Google Android
  不明
• font-family (等幅)
• Consolas,
  "MS Gothic",
  Courier,
  monospace;
• font-size

•  
• 661px以上
• 660px以下
• 410px以下
• 全体
• 17px
• 19px
• 18px
• h1
• 32px
• 26px
• 25px
• h2
• 19px
• 23px
• 22px
• h3
• 17px
• 19px
• 18px

• line-height
• 1または1.6

スペース

• 660px～411pxの場合
• 文字のサイズ：約3cm
  文字の上下のスペース：約3cm

アイコン

• 
• ：見出し
• 
• ：外部リンク
• 
• ：矢印
• 
• ：矢印
• 
• ：メール
• 
• ：ページトップに戻る

リセットCSS

• 必ず使うタグ：html,body
  よく使うタグ：div,p,h1,h2,h3,ul,ol,li,img,br
  時々使うタグ：form,input,button
• html,body,div,p,h1,h2,h3,ul,ol,li,img,br{
  margin:0;
  padding:0;
  border:0;
  border-collapse:collapse;
  list-style:none;
  background:#ffffff;
  color:#323232;
  vertical-align:baseline;
  overflow-wrap:break-word;
  word-wrap:break-word;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","メイリオ",Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Arial,sans-serif;
  font-size:17px;
  font-weight:normal;
  line-height:1;
  letter-spacing:0.04em;
  -webkit-text-size-adjust:100%;
  }
• form,input,button{
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  appearance:none;
  -webkit-appearance:none;
  }

CSS記述順番

• clear
  content
  counter-increment
  position
  display
• top
  left
  right
  bottom
• width
  height
• margin
  padding
  border
  border-collapse
  border-radius
  -webkit-border-radius
  outline
• text-indent
  list-style
• box-shadow
  -webkit-box-shadow
  transform
  -webkit-transform
• background
  background-color
  background-image
  background-position
  background-repeat
  color
• vertical-align
  text-align
  text-decoration
• white-space
  overflow
  text-overflow
  overflow-wrap
  word-wrap
  word-break
• font-family
  font-size
  font-weight
  line-height
  letter-spacing
• appearance
  -webkit-appearance
  -webkit-text-size-adjust

ロゴ

• 
• text
• UD デジタル 教科書体 NP-B
• 104px
• text内の●
• UD デジタル 教科書体 NP-B
• 20px
• text.sakura.ne.jp
• UD デジタル 教科書体 NP-B
• 20px
• textとtext.sakura.ne.jpのスペース
• 15px
• textの左右のスペース
• 17px

表示確認/構文チェック

• 表示確認
• Google Chrome (Windows)
• Firefox (Windows)
• Microsoft Edge (Windows)
• Safari (iPhone)
• Google Chrome (Android)
• 構文チェック
• Markup Validation Service
• CSS Validation Service