ULALA'Sブログ

< 新しい記事

新着記事一覧(全353件)

過去の記事 >

2020年06月25日

Twitter Bootstrapと呼ばれていたそうな、、[Bootstrap4 フロントエンド開発の教科書]

テーマ：ホームページデザインのお勉強(338)

カテゴリ：フロントエンド

学生時代、学校でゲームの話題についてのホームページを
コツコツ作っていたが、今のように派手な動きや装飾はなく、
まさに「静的」なページしか作れなかったのを良く覚えている。

社会人になり、技術畑で仕事をさせてもらう機会にもたくさん恵まれたが、
javaコード書いている時とHTMLでHP作っている時がやっぱり一番楽しい
と感じる。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

Bootstrap 4　フロントエンド開発の教科書ウェブ開発の知識とコツをしっかりマスター [ 宮本麻矢 ]
価格：3608円（税込、送料無料) (2020/6/25時点)

楽天で購入

BootstrapはTwitter社が開発したCSSのフレームワーク で、
レスポンシブデザインに対応している。
(昔はTwitter Bootstrapと呼ばれていたそうな。)

自分も勉強不足だったが、 レスポンシブデザイン とは
デバイス(PC、スマホ等)の画面サイズに依存せずに
サイトを構築できる手法である、とのこと。

つまり、HTMLは変えずに
PCからのアクセスの場合はPC用のレイアウト
スマホからのアクセスならスマホ用のレイアウト
をCSS側で制御 してくれるようだ。

レスポンスというと、どうしてもリクエストからの応答、
というシステム開発の認識があるので、「サーバーサイドの仕組みか！？」
と勘違いしてしまうが、お間違いなく、フロントエンドの仕組みである。

Bootstrapで利用できるコンポーネントが、
ソースコード＋表示結果で記載されているのでイメージが付きやすい。

カルーセルによる画像のスライド表示や
アコーディオンによるコンテンツ表示の切り替えが特に面白いと思った。

どのように利用すべきかの紹介を一通り終えると、最終章手前で、
モックアップによるサイトを構築する、という章が存在するため、
Web系精通者の方はこの章をみて頂ければBootstrapの流れが分かるかと思う。

もちろん紹介している サンプルソースもダウンロードできる ので、
是非ソースコードとともに、動作を確認してみると良いかと思う。

ただし、 Bootstrap自体がjqueryを前提として作成しており、
jqueryが必要であるので、本書をしっかり理解するには、
HTML＋CSS＋js(jquery)の知識が必要 。

サンプルソースをまねて動作を確認するだけでも楽しいが、
初心者の方はコロ機会に、是非HTML＋CSS＋js(jquery)を理解して
Bootstrapをトライしてもらうと、
このフレームワークの良さがわかると思う。

【変更履歴】
2020.07.11 文章校正一部修正

お気に入りの記事を「いいね！」で応援しよう