鶏口牛後な日々

なんでも作れるエンジニアを目指して奮闘中、ブログは発散中

初心者プログラマーむけBootStrapの概要とオススメできないわけ

 Bootstrapとは?

昨今は、大変便利なBootStrapという、一言で言うとHTML/CSS/JavaScript らへんをまるっと含んだテンプレートが提供されています。

元は、Twitter社が作った「Bootstrap」というテンプレートが無料で提供され出したのが始まりであるが、それを独自に改変したものを多くの人が無料・有料で提供するようになり、一般名詞のような扱いになりました。

 Bootstrapを使えば、できる人が使えば1日で美しいホームページを作ることが可能になります。

特に、デザインやフロントコーディングが得意でない人にとっては、わざわざデザイナーさんにお願いしなくて良くなるため、有効な助けになります。

 

ただし、実際に初心者プログラマー(=HTML/CSSの入門書を一冊ずつ読んだくらいのレベル)の時にこれを使おうとして挫折したことがあるので、「1日でホームページが作れる!」といった謳い文句には、いろんな補足がついていることをお伝えしたいと思います。

 

もちろん、謳い文句に乗せられて、作れちゃう人もいると思うので、嘘ではないと思います! トライするのはいいと思います!

作れちゃう人のために、ちょっとおしゃれな無料テンプレートの参考サイトを貼っておきます。

 

 

以下では、実際にやってみて、「初心者プログラマーには使いこなすのは難しいなぁ。自分でHTM+CSSを書いた方が早くできそう」と思った理由を3つ挙げてみます。 

 

初心者プログラマーは、自分が作ってみたいHPのイメージがまだ固まっていないことが多いため、当てはまるテンプレートを探すのが難しい

これは、Bootstrapつかう/使わない以前の問題かもしれないです・・・(すみません)。

私は、最初「サイトを作ってみたい!」と思っていたのですが、「じゃあどんな?」というところが詰めきれていないままに、気概だけが空回りしていたので、Bootstrapをみても、どのように適用すればいいかわかりませんでした。
逆を言えば、熟練したプログラマーというのは、自分の中に作りたいもののイメージを持てているのだと思います。 

 

知識がないのでぴったり合うテンプレート選びは案外時間がかかる

適当に選んで、ぽん! とできそうに思ってしまいがちですが、1つ目でいったような自分が作ってみたいHPのイメージを思い浮かべつつそれを実現できて、かつかっこいいデザインを探すのは、思ったよりも 時間がかかります。

私は、かっこよさそうなテンプレートを1つダウンロード してみて、いらない部品をHTML上でコメントアウトしてみたり、 画像を変えてみたりした後に、やっぱり違うなと感じて別のテンプレート を探す羽目になりました。
初心者には難しい技術をたくさん使ったテンプレートだと、結局使いこなせないということも往往にしてあるように感じました。 

 

知識がないと文字や画像を差し替えるだけでも結構面倒

実際、文字や画像を差し替えればすぐ、なのですが、差し替えるべき文字や画像がどこにあるかを「特定する」のには案外HTML/CSSの基礎知識が要ることがわかりました。特に、HTMLやCSSのみならず、JavaScriptjQueryなどは普通にふんだんに使われているテンプレートが多いので、ファイル構成や指定の仕方だけでも結構(初心者プログラマーにとっては)複雑だと感じました。
わけがわからない技術がたくさん記述されているHTML/CSSを眺めていると、入門書レベルで理解ができていたことだけでは理解できないので、だんだん嫌になってきます。
結局HTML/CSS/JS/jQueryなどの基礎的な知識をもとに、自分でわかる技術を駆使しながら、地道に勉強しながら作っていくほうが、実は近道なのでは? と思った次第です。

 
※2年後に追記

その後、HTML/CSS/JS/jQueryなどなどを色々と勉強した今は、Bootstrapは確かに使えるという実感を持っています。

特に、昨今では、レスポンシブは当たり前! という時代ですので、レスポンシブ対応を自分でやらなくても良いというのがとても助かっています。

ただ、すべてそのテンプレートだけではできなくて、デザインCSSを追加したり、jQueryを書き直したりといった作業は多少なりとも出てくるので、やはり基礎をしっかり勉強するまでは、無理にテンプレートを使わない方が良いと感じます。

 

 

〜おまけ〜 

  • Glyphicon(もしくはFont Awsome)

Bootstrapでは、グリフアイコンという、シンプルでスタイリッシュなアイコンを標準で実装してくれています。

そのため、メニューバーなどにある小さい挿絵等でよく使われています。 

自分で画像を作らなくても、これらを使うことができるので、なれてくるととても便利です。

Glyphiconのようなもので、Font Awsomeというアイコンを提供してくれているサイトもあります。

少し複雑なアイコンは有料版でないと使えない場合もありますが、無料のバリエーションもかなりあるので、使うといい感じのサイトを作ることができます。

http://fortawesome.github.io/Font-Awesome/examples/

 

アイコンは、画像として<img>タグで挿入しないといけなかったのを <i>タグというタグを使って、既に用意されたアイコン名を指定するだけで、様々な場所で使うことができます。

illustratorでかっこいい ボタンの画像を作ることができなくても、これを使えばちょっと かっこいいかんじのボタンを入れることができる。 これにより、デザイナーにお願いして画像を作ってもらうといった 手間が省けるのでした。

 

以上です。