宮崎のホームページ制作会社Tedinc | Bootstrapをしっかり理解したい為の記事

menu 0982-60-1084

TEDINC OFFICIAL BLOG

Bootstrapをしっかり理解したい為の記事
wrote on this November 11, 2014teruhiro hayashida

 

bootstarap

 

こんにちは。tedincのテルです。

友人に薦められた「Bootstrap」を導入したのですが、イマイチどのくらいの便利なのかが理解できていなかったので、書いていこうと思います。

Bootstrapにあるiconはサイトに統一感ができるし、タグ一つで呼び出せるので便利だ・・・・

と思っていた自分に、このような記事を見つけました。

 

ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略

 

この記事の中に


ウェブデザイナーの仕事がエンジニアによって奪われつつある

 

ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア/プログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。

象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要はなくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじったり画像パーツ作ったりしてくれるだけでいいよね」と考える企業が増えつつある。


 

・・・・・

もっと深く理解しなければ(汗)

 

まずはBootstrapとは?

 


Bootstrap


 

Bootstrapは、マルチデバイスに対応したレスポンシブWebサイトを簡単に構築するための

「CSSフレームワーク」

です。

Bootstrapであらかじめ用意されたフレームワークに則り、UI部品を組み合わせると、フラットデザインをベースにした、見栄えの良いフロントエンドの開発ができます。そのため、開発工数を大幅に削減できるだけでなく、デザインが苦手なエンジニアでも、ユーザビリティの高い画面の開発が可能になります。

前述にあった

Bootstrapがあればデザイナー不要

=デザインが苦手なエンジニアでもユーザビリティの高い画面の開発が可能

Bootstrap

 

これはCSSとHTMLの事を理解できていれば、本当に誰でも綺麗なデザインのサイトができちゃいますね。

 


まずは設置方法


 

1、まずBootstrapのトップページからファイルをダウンロードします。

2、自分のサイトの中に導入、headの中に記述してパスを通します。

 

css

<link rel=”stylesheethref=”bootstrap.css” type=”text/css“>

 

js

<script src=”bootstrap.js” type=”text/javascriptcharset=”utf-8“></script>

 

icon*注意*

Bootstrapにあるiconを使いたい場合はcssのファルダのディレクトリと同じ場所にfontを設置して使えるようになります。

bootstarap3

 

Bootstrap 3 からiconは切り離されたとのことです。Glyphicons のサイトから Bootstrap 3 用のicon集をダウンロードして設置します。

参考記事:Twitter Bootstrap 3 でアイコンを使う方法


使い方


BootstrapのメニューからComponentsのページへ進みます。

bootstarap2

サイトを構成してる様々な要素がBootstrapにはあります。(icon,buttom,nav….etc)

bootstarap4

自分はデザインに差をつける為、また強調したい文章などにiconは必須なのでいつも画像でやっていましたが、これがあれば簡単に、しかも統一性のあるiconが使えるので非常に便利と思って使っていたのですが、

何が一番素晴らしいという、と

 

レスポンシブWebレイアウト

 

Bootstrapでは場合、グリッドの列数は12に固定されています。そして、col-xs-1, col-xs-2のように「横に占める列数」を名前に含むクラスがBootstrapによって提供されています。これらのクラスをブロック要素に付与していき、要素が占める列数の合計がちょうど12になるようにレイアウトしていきます。

抜粋(Webアプリをあっという間にカッコよく! BootstrapによるレスポンシブWebレイアウト

 

これを取り入れることによって様々なデバイスから見たときのレイアウトの心配がかなり軽減されます。

 

さらにBootstrapは最近ではAppleも取り入れているフラットデザインをベースにしたサイトが基本となっています。

 

 


総括


 

これからはサイト構成の指針となるであろうと感じられる物ですね。

前日にGoogleの社長、ラリー・ペイジが

これからはさらにコンピューターの発達で、今人が行っている作業の8割くらいが機械によって行われていくだろう。イマジネーション持たない人たちは仕事がなくなる・・・

といった記事を見かけました。

Webの中の様々な変化には日々驚かされますが、より強い想像力を発揮し、自分の仕事に取り組む姿勢は忘れてはいけませんね。

TAG:

CONTACT US

お気軽にお問い合わせ下さい

お問い合わせはコチラ