制作ノウハウ Bootstrapをマスターしよう。簡単まとめ
2016年01月08日
Bootstrapをマスターしよう。簡単まとめ
新年明けましておめでとうございます。
2016年ですね。みなさんは、今年の目標は立てましたでしょうか?
私の目標は、「会社のマイデスクを綺麗に保つ」です。
昨年の仕事納めと席替えのタイミングで、ぐちゃっとしていたデスク周りをえいっ!とスッキリさせました。
デスクを整理してから退社するようにすることで、翌日気持ちよく朝を迎えています。
::::::::::
今、bootstrapをマスターしようと、勉強中です。
というわけで、本日はbootstrapを使うメリットと注意点を簡単にまとめてみました。
■bootstrapって?
ボタンやフォーム、ナビゲーションなどがhtml・cssベースのあらかじめ用意されている、フレームワーク(テンプレート)。
フラットデザインなどのスタイルが用意されているので、htmlの知識があれば、cssを使わなくても見栄えのいいサイトデザインができます。
[メリット]
・レスポンシブデザイン対応。web開発の時間短縮に。
グリッドレイアウトがあらかじめ実装されているので、スマホ、タブレット、pcそれぞれのレイアウトに沿ったデザインを作ることができます。
横幅が適切に計算されているので、
「えっとタブレットの場合のメインカラムの横幅は・・・(電卓を取り出す)」
の作業がなくなります。
グリッドレイアウトのためにbootstrapを使い、それを元にwebサイトを組んでいく、というのも手です。
[注意する点]
・他のサイトと似たり寄ったりのデザインになる
テンプレートにはあらかじめサイトの形をしたデザインがあるので、さくっと作るには便利です。
しかし、テンプレートをそのまま使用するだけだと、bootstrapっぽいサイト、つまりオリジナリティのないサイトになってしまうのです。
bootstrapで作られたサイトは結構あるので、テンプレートのまま使うと、「あれ、このデザインどっかで見たことある・・・」という既視感を与えてしまいます。
おおまかな形や、実機での確認にはbootstrapを活用しつつ、デザインの細かいところは工夫したり、しっかりと作りこんだ方がよいと思います。
レスポンシブデザイン対応のwebサイト制作が、これからますます増えていきそうです。
使い方をマスターして慣れていきたいなと思います。
週2回・1分で読める「Web運用のヒント」をメールで
WordPressの緊急更新、Google検索の仕様変更、補助金の締切など、発注者・Web担当者が「今動くべきこと」だけを福岡の制作会社 AliveCast が要約してお送りします。登録は無料、各号から1クリックで停止できます。



