デザインガイドライン

もくじ

• レイアウト
• 使用する色
• フォント
• アイコン
• リセットCSS
• ロゴ
• 表示確認/構文チェック

レイアウト

• • メニューバー
  • タイトル

    サイトの説明

  • 見出し
  • もくじ
  • メインコンテンツ
    (100%-(264px+16px*3))
  • もくじ
    (264px)
  • フィードバック
  • ページトップに戻る
  • フッターサイトマップ
  • コピーライト

使用する色

• •  
  • rgb(255,255,255)
  • ベース 白い背景
  •  
  • rgb(0,62,112)
  • メイン 青い背景
  •  
  • rgb(32,33,36)
  • 黒文字
  •  
  • rgb(254,254,254)
  • 白い背景
  •  
  • rgb(249,249,249)
  • グレー背景,白文字
  •  
  • rgb(31,31,31)
  • 黒い背景
  •  
  • rgb(40,41,42)
  • 黒い背景
  •  
  • rgb(245,248,250)
  • グレー背景(追記)
  •  
  • rgb(44,119,243)
  • 青い背景(ボタン)
  •  
  • rgb(117,117,117)
  • グレー文字
  •  
  • rgb(0,0,43)
  • リンク文字
  •  
  • rgb(153,0,0)
  • リンク文字
  •  
  • rgb(206,206,206)
  • 線の色(グレー)
  •  
  • rgb(220,222,226)
  • 線の色(グレー)
  •  
  • rgb(90,90,90)
  • 線の色(グレー)

フォント

• font-family
• "Helvetica Neue"
  "ヒラギノ角ゴ ProN W3"
  "Hiragino Kaku Gothic ProN"
  "メイリオ"
  Meiryo
  Arial
  sans-serif;
• font-size
• •  
  • 661px以上
  • 660px以下
  • 全体
  • 16.2px
  • 16.2px * 1.04
  • h1
  • 16.2px * 1.5
  • 16.2px * 1.54
  • h2
  • 16.2px * 1.02
  • 16.2px * 1.06
  • h3
  • 16.2px * 1.02
  • 16.2px * 1.06
• line-height
• 1または1.6

アイコン

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

リセットCSS

• 必ず使うタグ：html,body
  よく使うタグ：div,p,span,h1,h2,h3,ul,ol,li
  時々使うタグ：form,input,button
• html,body,div,p,span,h1,h2,h3,ul,ol,li{
  margin:0;
  padding:0;
  border:0;
  border-collapse:collapse;
  outline:0;
  list-style:none;
  background-color:rgb(255,255,255);
  color:rgb(32,33,36);
  vertical-align:baseline;
  overflow-wrap:break-word;
  word-wrap:break-word;
  word-break:break-all;
  font-family:"Helvetica Neue","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Arial,sans-serif;
  font-size:16.2px;
  line-height:1;
  letter-spacing:0.01em;
  z-index:0;
  -webkit-text-size-adjust:100%;
  }
• form,input,button{
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  background-color:rgb(254,254,254);
  color:rgb(32,33,36);
  vertical-align:baseline;
  font-family:"Helvetica Neue","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Arial,sans-serif;
  font-size:16.2px;
  line-height:1;
  letter-spacing:0;
  -webkit-text-size-adjust:100%;
  appearance:none;
  -webkit-appearance:none;
  }

ロゴ

• 
• 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)
• 構文チェック
• The W3C Markup Validation Service
• HTMLのチェックツール
• • https://validator.w3.org/nu/?doc=https%3A%2F%2Ftext.sakura.ne.jp%2Fmemo%2Fdesign-example%2F&showsource=yes
• W3C CSS 検証サービス
• CSSのチェックツール
• • https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Ftext.sakura.ne.jp%2Fmemo%2Fdesign-example%2F&profile=css3svg&usermedium=all&warning=1&lang=ja
• スキーマ マークアップ検証ツール
• 構造化データのチェックツール
• • https://validator.schema.org/#url=https%3A%2F%2Ftext.sakura.ne.jp%2Fmemo%2Fdesign-example%2F