読者です 読者をやめる 読者になる 読者になる

4日目 BootStrapでホームページを1日で作る

スポンサーリンク
広告

 

■Bootstrap

昨今は、大変便利なBootStrapという、一言で言うとHTML/CSS/JavaScript らへんをまるっと含んだテンプレートが提供されている。無料で使用できるものも多い。 (一言じゃないな。)それを使うと、HTMLとかCSSとかを書かずに、さくっと Webアプリケーションを作ることができるのだ。 私は、まずは一からHTMLやCSSを書いて、ホームページを作ってみよう、とか 考えていたが、そんなことせずともBootStrapを使えば1日で美しいホームページが できてしまう。  
・参考 ひと味違うBootStrap無料テンプレートまとめ http://morizyun.github.io/blog/twitter-bootstrap-templates/ お湯を書ければ3分でカップヌードル、というように聞こえるが、 とはいえ、始めたばかりの初心者にはそう簡単には行かない。 なぜか? 実際にはまった経験から、初心者がハマる理由を以下に挙げてみる。
 

①自分が作ってみたいHPのイメージが固まっていない

作曲するとき、音楽が頭でなっていない状態でいきなり作曲ソフトに むかってみても、なかなかいい曲はいきなりはできない。パワーポイント で資料を作るときも、アウトプットイメージが頭にないままでは 時間がかかる、という人は多いのではないだろうか。 そんなとき、やっぱりノートに向かってペンを手に持って描いてみる といったプロセスが有効だ。(もちろんキャンバスに向かわないと イメージが浮かばない、といった類の人もいる) ホームページも、作りたいイメージができていないと、迷走すると思う。 まずは、お絵かきしてイメージを固めることがいいのではないだろうか。
 

②テンプレート選びに時間をかけていない

テンプレートだから、適当に選んで、ぽん! とできそうに思ってしまい がちだが、1でいったような自分が作ってみたいHPのイメージを思い浮かべつつ それを実現できて、かつかっこいいデザインを探すのは、思ったよりも 時間がかかる。私は、かっこよさそうなテンプレートを1つダウンロード してみて、いらない部品をHTML上でコメントアウトしてみたり、 画像を変えてみたりした後に、やっぱり違うなと感じて別のテンプレート を探した。
 

③文字や画像を差し替えればすぐだ、と思いがち

実際、文字や画像を差し替えればすぐ、なのだが、差し替えるべき文字や 画像がどこにあるか、を「特定する」のには案外基礎知識が要る。 特に、HTMLやCSSのみならず、最近はJavaScriptJqueryなどが ふんだんに使われているテンプレートが多いので、ファイル構成や 指定の仕方だけでも結構複雑になっている。

しかしながら、①~③を覚悟の上で、そのあたりは少々産みの苦しみを 味わいつつ、BootStrapを使って最短でアウトプットを出しつつ勉強するのが やはり効率的だとやってみて実感している。  

 

■Glyphicon(Font Awsome)

・グリフィコンとは、平たく言うと、シンプルでスタイリッシュなロゴを 標準で実装してくれているということである。 http://fortawesome.github.io/Font-Awesome/examples/

・ロゴは、画像として、<img>タグで挿入しないといけなかったが、 <i>タグを使って、既に用意されたアイコン名を指定するだけで、 様々なロゴを使うことができる。illustratorでかっこいい ボタンの画像を作ることができなくても、これを使えばちょっと かっこいいかんじのボタンを入れることができる。 これにより、デザイナーにお願いして画像を作ってもらうといった 手間が省けるのだ。 今日は以上。