JOURNALサービス紹介サービス紹介ServiceモノモードではWEBサイト制作や映像制作を中心とした自社開発のプロダクトを展開しています。BlogダウンロードしたZipファイルを解凍!テンプレート内のテキストを書き換えよう!画像の変更をしよう!CSSを書き換えて微調整もできるWEBサイトの完成!BootstrapとはTwitter社にて開発されたWEBサイト構築をよりスムーズかつ、スピーディーに仕上げる為のフレームワーク。フレームワークとはCSSのスタイリングやレイアウトが既に定義されたCSSのパッケージの様なもの。その為、HTMLとCSSの基礎知識さえあれば、デザインが苦手な人でも簡単におしゃれなWEBサイトを作成できるのが特徴です。レスポンシブデザインにも対応しているところも魅力のひとつ。ナビゲーションメニューやフォームを1から作るのってちょっと面倒だったりしますよね。bootstrapのCSSフレームワークにはそういったものが既に定義されています。Bootstrap」の使い方をご紹介します。全て無料のテンプレートになりますので、是非お試しあれ。Bootstrapのテンプレートまずはサイトにアクセス!好みのテンプレートを選択しようhttp://startbootstrap.com/まず、自分の作成したいWEBサイトのイメージに合わせてテンプレートを選びましょう。おしゃれなワンページテンプレートやレスポンシブ対応のテンプレートがすべて無料で揃っています。デザインのトレンドを抑えたオシャレなテンプレートがたくさんあって、見ているだけでも楽しい。各テンプレートのプレビューも確認できるので、自分好みのテンプレートが見つかったら、ダウンロードしましょう。Blog」というテンプレートをダウンロードしてみます。トレンドを抑えたかっこいいテンプレートがたくさん並んでいます。Blogはレスポンシブデザイン対応で、個人や会社のブログに最適なテンプレートです。WEBフォントも組み込まれていてかっこいい!ダウンロードしたZipファイルを解凍!次に、ダウンロードしたzipファイルを解凍します。Blog」のzipファイルを解凍すると、複数に分かれたフォルダが入っています。4つのHTMLファイルがあります。WEBフォントやCSSなどがまとめられたフォルダも入っていますね。次は、テンプレートを自分のサイトに合わせて情報を書き換える作業の説明をします。テンプレート内のテキストを書き換えよう!HTMLのファイルには既にテキストが書き込まれています。自分のサイトに合わせてタイトルや見出しなどのテキストを書き換えましょう。画像の変更をしよう!画像の変更はimgフォルダから行います。今回使用するテーマのimgフォルダには主に各ページに使用するカバー画像が5枚入っています。それぞれのページに表示される画像を差し替える際には、同じファイル名の画像をimgフォルダ内にて追加して上書きするか、CSS・HTMLのリンクファイル名を書き換えましょう。サイズなどを合わせておくとレイアウトの崩れなどもなく画像が変更できますよ。CSSを書き換えて微調整もできる多少のデザイン変更、レイアウト変更がしたくても対応可能なところが、Bootstrapテンプレートのいいところ。CSSフォルダ内にあるファイルを修正すれば、文字色や多少のデザイン変更を簡単に行うことができます。WEBサイトの完成!さぁ、これであなただけのWEBサイトが完成です!どうでしたか。Bootstrapを使えば、WEBデザインが苦手な人でも、HTMLとCSSの基礎的な知識があれば簡単におしゃればWEBサイトが作成できそうですね。読み込むファイルの量も多くはないので、サイトもサクサク動きます。WEBサイト作成の際には試してみてください。気になる無料テンプレートをご紹介させて頂いた記事も是非ご覧くださいな!必見!コーポレートサイト向け、無料でおしゃれなBootstrapテンプレートもご紹介しています。PocketはてブTwitterシェアあなたにオススメの記事Web制作2015.02.26ノンデザイナーに贈る、配色パターンの参考サイト10選Web制作2015.11.30完全無料で使える高品質なベクターアイコン素材まとめWeb制作2015.06.26【全部無料!】日本国内のフリー写真サイトまとめ25選!ネットショップ制作2017.01.16新生活や贈りものに!お洒落な食器のネットショップ5選HTML・CSS2017.06.15WEB入門前に、HTMLとCSSの基礎知識さらっとまとめ。CUBEのカスタマイズ<初級編>designの語源と偉大なデザイナー、経営者が残した言葉。飲食サービス紹介ServiceモノモードではWEBサイト制作や映像制作を中心とした自社開発のプロダクトを展開しています。MORERecruitテクノロジー、デザインが好きだ。