FrontPage/FrontPageデザインガイドライン

共通

色

基本的に下記の色、及び基準色の範囲で色を使用してください。
ページ全体
背景：#fff

文字：#000

モジュール
背景：#f7f7f7

見出し背景：#707070

重要背景：#ff000010

重要：#ff0000 (red)

アクセント：#192f60

CSS

• CSSのプロパティは視覚順で記述して下さい。よく使うCSSプロパティでは以下の順です。
  → width height margin padding border border-radius background text-align →

• 文字色と文字サイズのプラグインも併用する場合は視覚順で入れ子にして下さい。
  → &color &size →

• marginで位置を調整しているcssboxはブラウザによって見え方が数ピクセルずれる場合があります。この場合はChrome最新版での見え方が綺麗になるような調整をして下さい。
  
  

アイコン

• 
  このアイコンは現在のページではなく他のページに飛ぶリンクとともに使用します。

• 
  このアイコンは同一ページ内のアンカーに飛ぶリンクとともに使用します。
  
  

モジュール

特定の目的ごとに固まっている、一つ一つのブロックを「モジュール」と呼びます。また、モジュールの左上にあるそのモジュールがどのようなものであるかを表したものを「見出し」と呼びます。

• モジュールの中でさらに要素を区切りたい場合は狭い空白を設けて分離させてください。そこからさらに区切りたい場合は水平線(----)を使用して下さい。

• 見出しの文字の前や箇条書きには✦(✦)を付けて下さい。

• モジュールには部分編集をするための「編集」リンクを設置して下さい。ただし、一度編集した後に再び編集されることがほとんどないモジュールなどは設置する必要はありません。
  
  

CSS

• 角丸(border-radius)は8pxで揃えて下さい。
  モジュールはすべての角に角丸を、見出しは左上と右下の角に角丸を適用させます。

• モジュールのpaddingは基本的に左右が8px、上下が1pxで設定して下さい。これは絶対ではなく、内容によって柔軟に対応していただければ結構です。

• モジュールの中で要素を区切る場合はそれぞれの要素にcssboxを適用させると出来ます。この時、下のcssboxでmargin-topを-4pxして下さい。

• PC画面で横に3分割になるようなモジュールを作成する場合はそれぞれのflex_boxの幅は380pxにして下さい。2分割になるようなモジュールを作成する場合はresponsive_layoutプラグインの使用を推奨します。また、モジュールのレイアウトでflexプラグインを使用する際はflex_containerにflex-around属性を付けて下さい。

コードテンプレート

標準

区切りあり