共通で使う

css_common.css
リセット、色設定などのPC/スマホ共通で使うcssファイル。一部ファイル内でmedia属性によるPC・タブレット・スマホの切り分け有り
css_column.css
コラム設定のcss定義。ファイル内でmedia属性によるPC・タブレット・スマホの切り分け有り
css_caption.css
見出しテキストの設定cssファイル。ファイル内でmedia属性によるPC・タブレット・スマホの切り分け有り
css_form.css
フォーム用部品。必要がないケースもあるのでcss_common.cssから外してある。
css_pages.css
各ページで使う定義css。media属性による切り分けあり。記載量が多いページは別途cssファイルを用意する場合もあり。

PC向けセット

css_pc_import.css
インポートファイル。
css_pc_layout.css
レイアウトとページをまたぐ共通定義を決めるcssファイル
css_pc_pages.css
個別ページで使うcssファイル

スマホ向けセット

css_m_import.css
インポートファイル。
css_m_layout.css
役割はPC用と同じ。
css_m_pages.css
役割はPC用と同じ。

タブレット向けセット

css_t_import.css
インポートファイル。
css_t_layout.css
役割はPC用と同じ。
css_t_pages.css
役割はPC用と同じ。

フォルダ構造

index.html
 ┣common
 ┃ ┣ css … 各種cssファイル(※1)
 ┃ ┣ img
 ┃ ┃ ┣ common … 共通要素(リンクアイコンとか)
 ┃ ┃ ┣ layout … レイアウトで使う
 ┃ ┃ ┗ page_image … 各ページで使う画像(※2)
 ┃ ┗js
 ┃
 ┣ page_dir … コンテンツごとにフォルダ
 ┃ ┣ img
 ┃ ┣ css
 ┃ ┣ index.html
 ┃ ┣ indexA.html
 ┃ ┗ indexB.html


※1 cssファイルはwordpressに移植を考え、頭にcss_を付ける
※2 wpでは1フォルダに画像を納めるので、画像ファイル名はすべてユニークであることを心がける。
なおwpに移植しない場合はコンテンツごとのフォルダ/imgに画像を納める。

デザイニングナスカはwebデザインなどのweb系、およびDMデザインなどの平面デザインを行っています。

安く、手早く、それなりに。をコンセプトとしてデザイン活動を行っています。
デザイニングナスカという言葉は創立時に多くの知り合いの方のアイデアを元に作った造語です。
この名前をずっと長く使えるように頑張っていきたいと思っています。
サイトメニューを見る ページトップに戻る

Twitter Facebook mail