[2カラム] HTML5+CSS3で作成したテンプレートのご紹介
画像をクリックすると実際のページをご覧いただけます。
オーソドックスな2カラムのテンプレートです。PCのブラウザだけでなく、タブレットやスマートフォンにも対応させたレスポンシブWebデザインです。また、本文とサイドは「Flexbox」を使用していますので、order 指定で簡単に本文とサイドを入れ替えられます。指定箇所はCSSに記載しています。カラー 象牙色 と 桜色 は左メニュー、紫水晶 と 灰黄緑 は右メニューにしました。








このテンプレートはフラットデザインで仕上げています。オーソドックスな2カラムのテンプレートで、シンプルな見やすい構成になっております。PCのブラウザだけでなく、タブレットやスマートフォンにも対応させたレスポンシブWebデザインです。また、本文とサイドは「Flexbox」を使用していますので、order 指定で簡単に左右(本文とサイド)を入れ替えられます。カラー palegreen と lightpink は左メニュー、skyblue と lemonyellow は右メニューにしました。Flexboxってとても簡単で便利ですね。








ビジネス向けにデザインしています。メニューを大きめにして見やすいデザインになっております。サイトのコンテンツを的確に伝えられるよう設計しました。
sp-2b_h5c3sp-2e_h5c3sp-2m_h5c3sp-2k_h5c3
ビジネスでもプライベートでもマッチするデザインにしました。大きめのメニューでわかりやすい設計にしています。スマートフォンにも対応させたインターフェイスをご使用になれます。
sp-2lor_h5c3sp-2lbu_h5c3sp-2lma_h5c3sp-2lgr_h5c3
右メニューの2カラムテンプレートです。メインカラムを横幅可変に設定し、ワイドな画面にもスリムな画面にも対応しております。またPCブラウザ以外のタブレットやスマートフォンにも対応させてみました。実際のページでブラウザの横幅を狭めると確認できます。
sp-2r_frosty_whitesp-2r_ivorysp-2r_silver_pinksp-2r_lavender_ice
[2カラム] 左メニューテンプレートのご紹介
画像をクリックすると実際のページをご覧いただけます。
ビジネス向けにデザインしています。特に会社案内のようなサイトに最適です。大きめのメニューでわかりやすい設計にしました。
sp-2bsp-2esp-2msp-2k
左メニューのオーソドックスなテンプレートです。パステル調のカラーで柔らかなやさしい雰囲気に仕上げています。
sp-2legsp-2lpisp-2llbsp-2lye
ビジネス向けにデザインししています。サイトのコンテンツを的確に伝えられるよう、トップと左側にメニューを配置しました。インパクトのあるカラーを4種類ご用意しました。
sp-2casp-2dgsp-2l_masp-2l_co
左メニューのオーソドックスな2カラムのテンプレートです。トップヘージには、バナー広告などをいくつか配置することを想定し、ビジネス用としてデザインしてみました。
sp-b2b_lsp-b2r_lsp-b2gn_lsp-b2gy_l
[2カラム] 右メニューテンプレートのご紹介
画像をクリックすると実際のページをご覧いただけます。
右側にメニューを配置したオーソドックスな2カラムのテンプレートです。サイトのコンテンツを的確に伝えられるよう設計しています。
sp-2brsp-2lgsp-2r_pursp-2r_blu
ビジネス向けにデザインしています。特に会社案内やショップサイトなどに適しています。カラーはインパクトのあるビビット調に仕上げてみました。
sp-2carsp-2ogrsp-2r_mbsp-2r_ob
和風をイメージしたパーツを使用してデザインしています。オーソドックスな右メニューの構成で、使いやすく仕上げています。カラーは左から紺色、梅紫、海松色(みるいろ)、千草色でどれも日本の伝統色です。
sp-2l_konirosp-2l_umemurasakisp-2l_miruirosp-2l_chigusairo
画像を一切使用せずに作成しています。小規模サイト向けにデザインしました。カラーは左から紺碧(こんぺき)、葡萄色(えびいろ)、桑茶(くわちゃ)、常磐色(ときわいろ)でどれも日本の伝統色です。
sp-2ri_konpekisp-2ri_ebiirosp-2ri_kuwachasp-2ri_tokiwairo
画像をクリックすると実際のページをご覧いただけます。