• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

日々学ぶウェブデザインについて、すぐに役立ちそうな情報を綴っていきます。Webデザインメモ

2016年1月08日(金曜日)  ()

Bootstrapをマスターしよう。簡単まとめ

新年明けましておめでとうございます。
2016年ですね。みなさんは、今年の目標は立てましたでしょうか?

私の目標は、「会社のマイデスクを綺麗に保つ」です。
昨年の仕事納めと席替えのタイミングで、ぐちゃっとしていたデスク周りをえいっ!とスッキリさせました。
デスクを整理してから退社するようにすることで、翌日気持ちよく朝を迎えています。

::::::::::

今、bootstrapをマスターしようと、勉強中です。
というわけで、本日はbootstrapを使うメリットと注意点を簡単にまとめてみました。

■bootstrapって?
ボタンやフォーム、ナビゲーションなどがhtml・cssベースのあらかじめ用意されている、フレームワーク(テンプレート)。
フラットデザインなどのスタイルが用意されているので、htmlの知識があれば、cssを使わなくても見栄えのいいサイトデザインができます。

[メリット]
・レスポンシブデザイン対応。web開発の時間短縮に。
グリッドレイアウトがあらかじめ実装されているので、スマホ、タブレット、pcそれぞれのレイアウトに沿ったデザインを作ることができます。

横幅が適切に計算されているので、
「えっとタブレットの場合のメインカラムの横幅は・・・(電卓を取り出す)」
の作業がなくなります。

グリッドレイアウトのためにbootstrapを使い、それを元にwebサイトを組んでいく、というのも手です。

[注意する点]
・他のサイトと似たり寄ったりのデザインになる
テンプレートにはあらかじめサイトの形をしたデザインがあるので、さくっと作るには便利です。
しかし、テンプレートをそのまま使用するだけだと、bootstrapっぽいサイト、つまりオリジナリティのないサイトになってしまうのです。

bootstrapで作られたサイトは結構あるので、テンプレートのまま使うと、「あれ、このデザインどっかで見たことある・・・」という既視感を与えてしまいます。
おおまかな形や、実機での確認にはbootstrapを活用しつつ、デザインの細かいところは工夫したり、しっかりと作りこんだ方がよいと思います。

レスポンシブデザイン対応のwebサイト制作が、これからますます増えていきそうです。

使い方をマスターして慣れていきたいなと思います。

AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン