【WEBデザイン】bootstrapは勉強するべき？
html、cssなど一連のマークアップ言語を覚えた後で迷うのは、次に何を学ぶべきか。
時間は有限なので選り分けが大事です。
自分にとって必要なスキルなのか、就職に有利になるのかなどを吟味しましょう。
この記事を読めば、bootstrapが自分にとって覚えるべきスキルなのか判断できるはず。
五分くらいで読めるので、ぜひ最後まで目を通してみてください。
bootstrapとは？
BootstrapはTwitter社が開発したCSSの「フレームワーク」です。
フレームワークとは、アプリやシステムを作りたいときに使う枠組みのことです。
プログラミングそのものではなく、あくまでその言語を使うための土台として使われます。
エンジニア「javascript使いたいな～でも１からいろいろ設定するの面倒くさい」
フレームワーク「javascriptでよく使うパーツとか集めておいたよ！」
みたいな感じでしょうか。
プログラミングをするときに使うことが多いです。
しかし、WEBデザインをする際にもフレームワークが使えます。
その代表格がBootstrap。
cssで形を作るために必要な部品がたくさん用意されています。
bootstrapの使い方
細かい使い方は別記事で追記します。
ざっくりとした使い方の流れは以下のとおり。
①bootstrap公式サイトからbootstrapをダウンロード。
downloadボタンから、zipファイルをダウンロード。
CSSファイルがダウンロードされます。
解凍すると中に、「bootstrap.min.css」ファイルがあります。
CDNでの使用も可能。
②適用したいhtmlに「bootstrap.min.css」をつける
あとは自作のcssを設定するようにhtmlの<head>〜</head>に追加するだけ。
各設定は下記を参照してください。
https://getbootstrap.jp/docs/4.5/getting-started/introduction/
bootstrap概要欄
bootstrapの特徴
bootstrapの最大の特徴は「グリッドシステム」
グリッドシステムとは、レイアウトを格子状に分解して配置するデザイン手法のこと。
ECサイトの商品ページなどでよく見かけます。
bootstrapのグリッドシステムを使うと、専用のクラスを付与するだけで、勝手にレスポンシブになってくれます。
ブレイクポイントも細かく用意されていて、各デバイスに沿った柔軟なデザインが可能です。
wordpressにもbootstrapのプラグインがあります。急いでる時のデザインがめっちゃ楽です。
bootstrapダサい説
デザイナー＆エンジニア「bootstrapってダサいよねw」
いつからか（２０１５年くらいか？）「bootstrapダサい」説がもてはやされるようになってしまいました。
「bootstrap ダサい」と検索すると手厳しい所感をつづったサイトがたくさん出てきます。
前にプログラマーさんの会合に参加した時、bootstrapの話題になって、かなりダサいダサい言われていました。
bootstrapがダサい原因
その原因を分析してみるに、たぶんこれ。
その①：デザインがTwitter
Twitter社が作ったので、ボタンのデザインとか色のトーンが完全にTwitter。
何を作ってもUIがTwitter化します。これはダサい……しかもCSS中身を把握していないと色を変えるのも一苦労。
確かに公式サイトの導入事例を見ると、任天堂とかSpotifyがWEBサイトに取り入れたりしているんですが、あんなにオシャレな魔改造できない。
その②：ソースコードがダサくなる
bootstrapはタグにclass名を付与することで、使用可能になります。
実際に書いてみるとこんな感じ。
<nav class="navbar navbar-expand-sm navbar-dark bg-dark mt-3 mb-3">プログラマーの人とか、コードの書き方にこだわりがある人は発狂するみたいです。
htmlに直接装飾していたころのホームページみたい。
bootstrapを覚えたほうがいいのか？
結論から述べると、「暇だったら覚える」。
html,css覚えた後でやることがなくなったら覚えてみると良いかもしれません。
プラスαの付加価値になりますし、SESの会社さんの就職面接で「bootstrapの使用有無」をかなり聞かれました。
まだ需要はあると思うのですが、SESで「bootstrapの使用有無」を聞く会社さんでデザインができるかというとかなり微妙です。
ポートフォリオに「bootstrap使えますよアピール」のために簡単な１枚ぺらのページを作っておくくらいで良いかもです。
あと、javascriptやphpの記述練習をするときに、ボタンとかを手っ取り早く作りたいなって時に知っていると便利です。
最近ハマっている、「セイト先生のWeb・IT塾」でも使われてました。
ただ、暇なときに覚えるものとしてはsassの方が重要度高いです。
sassの使い方もゆくゆく書いていきますね。
wordpressも覚えた方がよいよー
sassも付加価値高いですが、wordpressでオリジナルテーマを作りましょう。
このブログも自作テーマで作られています。
心構えからコード付きの作り方まで、順を追って説明していますので、ぜひ見てみてください。
１日１記事を読んで真似するだけでブログ１個簡単に作れます。