宮崎のホームページ制作会社Tedinc | Bootstrap

menu 0982-60-1084

TEDINC OFFICIAL BLOG

デザインのテンプレートは様々な物がありますが、今回は以前紹介したBootstrapのテンプレートを集めたサイトを紹介します。

今回は無料のテンプレートを中心に有料でも安価なテンプレートを紹介しています。

ダウンロードも簡単です。

Bootstarpとは?

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

「CSSフレームワーク」

です。

過去記事:Bootstrapをしっかり理解したい為の記事

 


startbootstrap


 

 

startbootstrap

 

URLhttp://startbootstrap.com/

コメント

ダウンロードまでが簡単で、登録などなく、そのままダウンロードして使えます。シンプルな英語でタイトルがつけられているので、用途に合わせたサイトを簡単選べます。

Preview & Downloadから気に入ったテンプレートページに飛んでダウンロードをクリックすればOK。

 

 


shapebootstrap


 

shapebootstrap

 

URL:https://shapebootstrap.net/

コメント

こちらは有料な物もありますが、無料もあります。

無料テンプレートURL:https://shapebootstrap.net/free-templates

有料の物でも$15~なのでめちゃくちゃお安いです。無料のテンプレートは登録など何もなしで簡単にダウンロードできます。

サイトのクオリティが高くスライダー、パララックスもそのまま無料で使える優れ物もあります。

 


wrapbootstrap(有料 $4〜)


 

wrapbootstrap

 

URLhttps://wrapbootstrap.com/

コメント

こちらは有料になりますが、$4〜で一番高くても$30くらいです。(ちなみに$30はかなり作りこまれているサイトで、日本円で約3500円くらいです。)

少しお金をを出しもいいからという人にはオススメです。

 


まとめ


 

いかがでしたか? 以前の記事でもBootstrapをオススメした理由を書きましたが、

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

です。

Webサイトに一番必要なものは、コンテンツや機能性です。つまり一番時間をかけなければいけない項目でもあります。

Bootstrapを使えば、Webサイト構築(デザイン・レスポンシブなど)の時間が短縮され、より中身(コンテンツ)にこだわったサイト制作できます。

そして、様々なサイトで提供されているテンプレートを使えば簡単にカッコよく機能性の高いサイト制作ができるであろうと思い紹介しました。

よければ参考にしてください。

 

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

CONTACT US

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

お問い合わせはコチラ