› Ruby勉強会（Ryukyu Ruby's Rookies）と徒然なる歴史評論 › 解体屋のおじさんでも出来るかもしれない☆bootstrap編2014年04月27日
解体屋のおじさんでも出来るかもしれない☆bootstrap編
さてと、日曜日のブログを開始します、こんにちは。
本日の話題ですが「bootstrap」を行いたいと思います。
その前に、HPを作ったことの無い人向けに軽く説明。
現在(2014/4/27時点)のホームページですが、意外と「スマホとタブレット」対応されてるところは少ないです。
正確にいうとブログなどは対応されておりますが、中小零細企業での商業的/或は個人的に作っているサイトでは少ないです。
スマホで見ると画面を拡大して見たりなど、jQuery（スマホで縦に動いたり横に動いたりのプログラム）を使われてないということですね。
今の時点ではそれで良いですが、将来的にはどの端末からも見やすくする必要があり、
当然スマホから見られることも、タブレットからみられることも視野に入れないといけなくなります。
以前ですが自分の場合は「.htaccess(HPに接触したときに自動的に発動するプログラム)」を使って、スマホのみjQueryが動いている別サイト（別URL）に飛ばして、PCからの接続を不許可にしたこともありました。
ですが、これはSEO的には非推奨。
デザインとかも丸々変わってしまいますしURLとかも別ですので、どっちを推奨してんだよ？とgoogleが探知しなくなってしまいます。
というわけで、同じURLでスマホとタブレットとPCのデザインを切り替えるシステムがいる、という事になります。
そのシステムこそが「レスポンシブwebデザイン」
スマホの画面では小さくなって縦横に動いて、タブレットでは傾けるとデザインが変わり、PCでは最大値の画面で表現できる、
そういうホームページです。
具体的にはCSSクエリというプログラム（？）を使って振り分けするわけですが。
今日かくのはCSSではなくHTMLで振り分けする、もう一つのレスポンシブwebデザイン「bootstrap」を紹介したいと思います。
これもCSSで振り分けではあるのですが、特徴として「一番簡単なHTMLで振り分け」という点です。
HTMLで振り分けなら、ホームページ作ったことある人なら何とかなる可能性が高い、と。
HTML解らない人は申し訳ないですがスルーしてください。
そこからでしたら、PC向けだけのサイトを作る勉強からスタートした方が良いです。
今日は初心者以上、中級者未満のブログということです。
・・・まあ、自分も中級者になり切れてないと思いますが、ブログ書いてるのは復習もかねてるんです（＾＾；；
というわけで前置きが長くなりました。始めます。
元ネタはこちらを参考にしてください。
http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html
そして、自分がこのサイトを参考にして作り直したHTML書きます。
<body>
<section class="container">
<!-- TwitterBootstrapのグリッドシステムclass="row"で開始 -->
<div class="row">
<!-- グリッドシステムとは：合計12分割 -->
<div class="col-xs-12 col-sm-6 col-md-6" ><center>
<h1>徒然日記</h1></div><br></center>
<center>
<div class="col-xs-12 col-sm-6 col-md-6" >
<img src="images/banner1.gif" width="320" height="50" alt="" ></div>
</center>
</div>
</section>
<br>
<section class="container">
<!-- TwitterBootstrapのグリッドシステムclass="row"で開始 -->
<div class="row">
<!-- グリッドシステムとは：合計12分割 -->
<div class="col-xs-6 col-sm-4 col-md-2" ><button type="button" class="btn btn-warning" width="168">ホーム</button></div>
<div class="col-xs-6 col-sm-4 col-md-2" ><button type="button" class="btn btn-warning" width="168">事業所概要</button></div>
<div class="col-xs-6 col-sm-4 col-md-2" ><button type="button" class="btn btn-success" width="168">商品一覧</button></div>
<div class="col-xs-6 col-sm-4 col-md-2" ><button type="button" class="btn btn-success" width="168">地図</button></div>
<div class="col-xs-6 col-sm-4 col-md-2" ><button type="button" class="btn btn-primary" width="168">リンク集</button></div>
<div class="col-xs-6 col-sm-4 col-md-2"><button type="button" class="btn btn-primary" width="168">お問い合わせ</button></div>
</div>
</section>
まだ作りかけで申し訳ないですが、
これをサイトとしてみると、こうなります。
http://ikema-automobile.com/bootstrap/bootstrap/
sectionタグでスタートして、合計数12になるように分割（例 div class="col-xs-6 col-sm-4 col-md-2"）
スマホで見るなら横に二つ（6を入力）タブレットで見るなら横に三つ（4を入力）PCで見るなら6つと（2を入力）
と、ボタンに数字を（div）で割り振っております。
左を大きく見せたいなら、8と4と数字を書き換えたりとか。
これが、グリッドシステム。
スマホでもタブレットでもPCでも、ボタンの配置やコンテンツを勝手に切り替えるシステム。
サブコンテンツと書かれているところは4を振り分けておりますので、タブレットとスマホで見ると勝手に下に行きます。
HTML解る人は面白いでしょ？
こんな感じで作成していくわけです。色が気に入らないとかなら、CSSを丸ごと変えてしまえばOK。
(公式サイトにあるそうです)
このbootstrapを使えば、オリジナルのレスポンシブwebデザインも簡単に作れることになります。
今日のブログはこんな感じかな？
これにて終了いたします。
日曜日なのにPCばっかり触っている訳にはいかない（笑）
お茶します、お疲れ様です☆
( ^^) _U~~
本日の話題ですが「bootstrap」を行いたいと思います。
その前に、HPを作ったことの無い人向けに軽く説明。
現在(2014/4/27時点)のホームページですが、意外と「スマホとタブレット」対応されてるところは少ないです。
正確にいうとブログなどは対応されておりますが、中小零細企業での商業的/或は個人的に作っているサイトでは少ないです。
スマホで見ると画面を拡大して見たりなど、jQuery（スマホで縦に動いたり横に動いたりのプログラム）を使われてないということですね。
今の時点ではそれで良いですが、将来的にはどの端末からも見やすくする必要があり、
当然スマホから見られることも、タブレットからみられることも視野に入れないといけなくなります。
以前ですが自分の場合は「.htaccess(HPに接触したときに自動的に発動するプログラム)」を使って、スマホのみjQueryが動いている別サイト（別URL）に飛ばして、PCからの接続を不許可にしたこともありました。
ですが、これはSEO的には非推奨。
デザインとかも丸々変わってしまいますしURLとかも別ですので、どっちを推奨してんだよ？とgoogleが探知しなくなってしまいます。
というわけで、同じURLでスマホとタブレットとPCのデザインを切り替えるシステムがいる、という事になります。
そのシステムこそが「レスポンシブwebデザイン」
スマホの画面では小さくなって縦横に動いて、タブレットでは傾けるとデザインが変わり、PCでは最大値の画面で表現できる、
そういうホームページです。
具体的にはCSSクエリというプログラム（？）を使って振り分けするわけですが。
今日かくのはCSSではなくHTMLで振り分けする、もう一つのレスポンシブwebデザイン「bootstrap」を紹介したいと思います。
これもCSSで振り分けではあるのですが、特徴として「一番簡単なHTMLで振り分け」という点です。
HTMLで振り分けなら、ホームページ作ったことある人なら何とかなる可能性が高い、と。
HTML解らない人は申し訳ないですがスルーしてください。
そこからでしたら、PC向けだけのサイトを作る勉強からスタートした方が良いです。
今日は初心者以上、中級者未満のブログということです。
・・・まあ、自分も中級者になり切れてないと思いますが、ブログ書いてるのは復習もかねてるんです（＾＾；；
というわけで前置きが長くなりました。始めます。
元ネタはこちらを参考にしてください。
http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html
そして、自分がこのサイトを参考にして作り直したHTML書きます。
<body>
<section class="container">
<!-- TwitterBootstrapのグリッドシステムclass="row"で開始 -->
<div class="row">
<!-- グリッドシステムとは：合計12分割 -->
<div class="col-xs-12 col-sm-6 col-md-6" ><center>
<h1>徒然日記</h1></div><br></center>
<center>
<div class="col-xs-12 col-sm-6 col-md-6" >
<img src="images/banner1.gif" width="320" height="50" alt="" ></div>
</center>
</div>
</section>
<br>
<section class="container">
<!-- TwitterBootstrapのグリッドシステムclass="row"で開始 -->
<div class="row">
<!-- グリッドシステムとは：合計12分割 -->
<div class="col-xs-6 col-sm-4 col-md-2" ><button type="button" class="btn btn-warning" width="168">ホーム</button></div>
<div class="col-xs-6 col-sm-4 col-md-2" ><button type="button" class="btn btn-warning" width="168">事業所概要</button></div>
<div class="col-xs-6 col-sm-4 col-md-2" ><button type="button" class="btn btn-success" width="168">商品一覧</button></div>
<div class="col-xs-6 col-sm-4 col-md-2" ><button type="button" class="btn btn-success" width="168">地図</button></div>
<div class="col-xs-6 col-sm-4 col-md-2" ><button type="button" class="btn btn-primary" width="168">リンク集</button></div>
<div class="col-xs-6 col-sm-4 col-md-2"><button type="button" class="btn btn-primary" width="168">お問い合わせ</button></div>
</div>
</section>
まだ作りかけで申し訳ないですが、
これをサイトとしてみると、こうなります。
http://ikema-automobile.com/bootstrap/bootstrap/
sectionタグでスタートして、合計数12になるように分割（例 div class="col-xs-6 col-sm-4 col-md-2"）
スマホで見るなら横に二つ（6を入力）タブレットで見るなら横に三つ（4を入力）PCで見るなら6つと（2を入力）
と、ボタンに数字を（div）で割り振っております。
左を大きく見せたいなら、8と4と数字を書き換えたりとか。
これが、グリッドシステム。
スマホでもタブレットでもPCでも、ボタンの配置やコンテンツを勝手に切り替えるシステム。
サブコンテンツと書かれているところは4を振り分けておりますので、タブレットとスマホで見ると勝手に下に行きます。
HTML解る人は面白いでしょ？
こんな感じで作成していくわけです。色が気に入らないとかなら、CSSを丸ごと変えてしまえばOK。
(公式サイトにあるそうです)
このbootstrapを使えば、オリジナルのレスポンシブwebデザインも簡単に作れることになります。
今日のブログはこんな感じかな？
これにて終了いたします。
日曜日なのにPCばっかり触っている訳にはいかない（笑）
お茶します、お疲れ様です☆
( ^^) _U~~
追記
bootstrapのテキストエディタなんですが、sublimetextを推奨に切り替えます。
今まで自分がterapadを推奨していた理由の一つに「操作パネルが日本語だから」というのが有ります。
sublimetextは英語表記のみですので。
ですが、terapadだとHTMLに書き込むコード「UTF-8」が上手く動いてくれない。
UTF-8とは、HP上で日本語を表示するコードのことです。
これがterapadだと動かない、sublimetextだと自動的に動く、という事なので、
sublimetext推奨に切り替えます。
全部英語での操作になりますが、お互いに頑張りましょう。
さて、お出かけしてきます。
bootstrapのテキストエディタなんですが、sublimetextを推奨に切り替えます。
今まで自分がterapadを推奨していた理由の一つに「操作パネルが日本語だから」というのが有ります。
sublimetextは英語表記のみですので。
ですが、terapadだとHTMLに書き込むコード「UTF-8」が上手く動いてくれない。
UTF-8とは、HP上で日本語を表示するコードのことです。
これがterapadだと動かない、sublimetextだと自動的に動く、という事なので、
sublimetext推奨に切り替えます。
全部英語での操作になりますが、お互いに頑張りましょう。
さて、お出かけしてきます。
Posted by white_yamada at 10:23│Comments(0)
画像一覧 