NetCommons2 へのデザイン作成、組み込み方法株式会社オープンソース・ワークショップ 2016-10-25 【目次】 I. はじめに .................................................................. 1 1. この資料について....................................................... 1 2. 目的 .................................................................. 1 3. ライセンスなど......................................................... 1 4. 著者 .................................................................. 1 5. 更新履歴 .............................................................. 1 II. NetCommons2 へのデザイン組み込み ........................................... 2 1. デザイン的概要......................................................... 2 2. ブロックについて....................................................... 2 3. class、id について ..................................................... 3 4. ブロックのグループについて............................................. 3 5. ヘッダー .............................................................. 3 6. フッター .............................................................. 4 7. スマートフォン用ハンバーガーメニュー ................................... 4 III. 問合せ先 .................................................................. 5 1. 会社情報・Web サイト ................................................... 5 2. メール ................................................................ 5 3. Web サイト ............................................................. 5 i I. はじめに 1. この資料についてこの資料は株式会社オープンソース・ワークショップが作成した NetCommons2 へのデザイン組み込み方法です。ここでいうデザイン組み込みとは、以下の作業を想定しています。  NetCommons2 を使用し、以下のアドオンを組み込んだものにデザインを追加する。  スマートフォン対応（レスポンシブ WEB デザイン）カスタマイズ https://opensource-workshop.jp/download/nc2-customize/responsive  ヘッダー幅を 100％でデザイン適用するカスタマイズ https://opensource-workshop.jp/download/nc2-customize/header-max 2. 目的この資料は以下の目的で記載しています。  NetCommons2＋株式会社オープンソース・ワークショップのアドオン機能をお使いのユーザにデザインカスタマイズの方法を提供すること。  株式会社オープンソース・ワークショップがデザインを注文する際などにデザイン会社に伝えるためのもの。 3. ライセンスなど当資料中で記載する「NetCommons」は[大学共同利用機関]情報・システム研究機構の登録商標です。 4. 著者株式会社オープンソース・ワークショップ永原篤( [email protected] ) 5. 更新履歴 2016-10-25：初版（NetCommons2.4.2.1） 1 II. NetCommons2 へのデザイン組み込み 1. デザイン的概要  NetCommons2 は table レイアウトです。（デザイナさんには嫌われますよね(笑)）  ページ表示の際、出力するタグを完全に自由に書けるわけではありません。 NetCommons2 特有の画面を表示しながら、レイアウト変更する機能があり、そのためにベースとなる HTML は変更できません。  NetCommons2 が出力するタグに合わせて、デザインを作成する必要があります。  CSS ファイルの追加は可能。NetCommons2 が出力する CSS の後に追加の CSS を読み込ませて、NetCommons2 のもともとの CSS 定義をオーバーライドしてデザインを組み込みます。  レスポンシブ対応は PC 画面の CSS 定義をレスポンシブ対応用共通 CSS でオーバーライドして行います。そのため、タブレット用、スマートフォン用の CSS 作成は不要です。 2. ブロックについて NetCommons2 では、ブロックという考え方があります。画面上の機能の 1 単位のことです。以下の赤枠で囲った部分はブロックになります。 2 3. class、id について NetCommons2 では、ブロックを 1 ページに複数、配置することができるため、ブロックにあたる部分には id 属性での指定はしないでください。 class 指定でお願いします。 4. ブロックのグループについて NetCommons2 では、ブロックをグループ化した CSS 定義を作らないでください。ブロックを 2 つまとめた CSS は組み込めないため、やめてください。 NetCommons2 では、ブロックの移動やグルーピング、各ブロックの幅指定などを管理者が GUI でできるのですが、グルーピングされたブロックには CSS を定義できません。 5. ヘッダーヘッダーの ID は以下のようになっています。画面幅 100％のヘッダー ( id="_headercolumn" ) 赤枠部分ヘッダーメニューに背景画像など指定する場合はこの ID でお願いします。画面幅 1000px のヘッダー( id="__headercolumn" ) 青枠部分メニュー項目自体はこの ID の中に含まれます。 3 6. フッターフッターの ID は以下のようになっています。画面幅 100％のフッター ( class="footer_add" ) 赤枠部分フッターメニューに背景画像など指定する場合はこの class でお願いします。画面幅 1000px のフッター( class="footer_add_cont" ) 青枠部分フッター項目自体はこの class の中に含まれます。 ※ フッターは HTML を埋め込めるので、比較的自由に記述することができます。 7. スマートフォン用ハンバーガーメニューレスポンシブ対応により、タブレットサイズ以下で参照した場合は、ヘッダーのグローバルメニューと左カラム（通常は詳細メニュー）が消えて、ハンバーガーメニューが表示されます。ハンバーガーメニューのアイコン(通常、選択時)、ハンバーガーメニューの背景デザインなどは指定があれば組み込みます。 4 III. 問合せ先 1. 会社情報・Web サイト株式会社オープンソース・ワークショップ住所：〒104-0031 東京都中央区京橋 2 丁目 8 番 4 号オックスフォードビル 2F 電話番号：03-5534-8088 ＦＡＸ：03-5534-8188 2. メール以下のメールアドレスにご質問の内容など記載してお送りください。担当者より返信致します。 [email protected] 3. Web サイト株式会社オープンソース・ワークショップの Web サイトよりお問い合わせできます。 http://opensource-workshop.jp 5