皆さんこんにちは、カラーオンです。
今回はウェブサイト作成スキルの第3回目です。
今回からはカラーオンがこれまで実際にウェブサイトを作成する際に活用したウェブ技術、コンセプトをご紹介していきます。
まずはじめは今をときめく（？） Bootstrap です。
2015年10月にカラーオンのウェブサイトもリニューアルいたしまして、Bootstrapを導入しました。
これはレスポンシブウェブデザインに対応したデザインテンプレートで、Dreamweaverに組み込まれるようになりました。
コンテンツの各要素をブロックで管理し、そのブロックの位置を横幅に合わせて変化させる仕組みをCSSで設定できるようになっています。
JavascriptによってModal Windowを表示させたり、アコーディオンやスライドショーなども搭載することができるようになっています。さらには、それらをサイト用途に合わせてカスタマイズすることが可能で、カスタマイズの幅が広いのとも特徴です。
レイアウトメリットとしては、一つのコンテンツを作成すればスマホ、タブレット、標準ワイドのPC、横長ディスプレイのPCなど様々なスクリーンに対応したコンテンツとして表示されますので、スマホ用サイトを用意する必要がありません。
スマホサイトでは現行まだFlashを搭載することができません。SafariにFlash Playerが導入されていないからです。その為AdobeはEdge AnimaterというソフトでFlashのようなコンテンツをJavascripstで作成できるようにしています。こちらはBootstrapとの相性も良く、Bootstrapを使用して動的コンテンツを掲載することも可能です。
Bootstrapをダウンロードすると、ナビバー、メインコンテンツ、フッターがセットされたhtmlファイル、CSSファイル、Javascriptファイルが同梱されています。
またAdobeのDreamweaverではテンプレートからBootstrapを導入することができ、各ファイルがセットされた構成ファイルで作成をスタートすることができます。
ウェブサイトの活用はこれからまだまだ伸びていきます。Bootstrapは無料で使用でき、スマホファーストのサイト作りが可能です。スマホサイトとパソコンサイトの２つを作成する必要がなくて手間が省ける、現段階でとても有効なデザインテンプレートです。
Bootstrapを導入したカラーオンのサイトはこちらから。
ブラウザの幅がモバイル（767px以下）、タブレット（768px以上、991px以下）、デスクトップ（992px以上、1199px以下）、デスクトップ（1200px以上）でレイアウトが切り替わるようになっています。
Color-on カラーオン/ポジティブ感情を引き出す色彩活用
幅を４つに区分してレイアウトを変更していますが、もちろん２つ以上の区分で同じレイアウトを採用することも可能です。タブレット以上の幅で同じレイアウトにして、スマホのみ別なレイアウトにすることが可能です。
プログラミングを専門としていないカラーオンが導入できるほど扱いやすいテンプレートです。htmlやcssはわかるけれども、Javascriptは良くわからないという方、初めてBootstrapを導入される方は是非カラーオンにお問い合わせください。