皆さんこんにちは
HTMLの勉強をするときにお世話になったBootstrapについてご紹介します。
【対象】
こんな人に向いています。
・HTML CSSは初めてで勉強してみたい
・それなりに読めるけどマークアップはがっつりかけない
・それなりに見栄えの良いサイトを作りたい
・Javascript等は全くわからない
・レスポンシブの調整が面倒
と少しのHTMLの知識だけでそれなりに見栄えの良いサイトを作ることができます。
【そもそもブートストラップとは？】
難しいコードを書かなくても見栄えの良いサイトが作成できるような
いわばパッケージ化された土台ツールです。
よく使われているレイアウトやコンポーネントが用意されていて、
簡単にWEBサイトに反映することが可能です。
よくサイトを閲覧しているときに購入するボタン等、CSSで調整しなければ
いけないこともありますがBootstrapではあらかじめ用意されているものがあるので
色や文言を変えるだけでOKです。
【どうやって使うか】
こちらからBootstrap5を始めるを押します
↓
CDNを使ってBootstrap5を読み込みします。
↓
CSSのlinkをテキストエディタのファイルの<head></head>の中にコピーして貼り付けます。
↓
JSのファイルを<body></body>のいちばん下にコピーして貼り付けます。
↓
レスポンシブ用メタタグを<head></head>にコピーして貼り付けます。
下記のようになっていれば概ね問題ないかと思います。
【便利なチート】
ブートストラップには様々なコンポーネントが用意されていますがそれを覚えるのはとても大変です。
有志の方がどのような機能が備わっているのかカンニングペーパー的なものがあります。
なんとどのコードを使うとどのような見栄えのものが反映されるのかが
わかる大変便利なサイトがあるので実際にどのように変わるのか試してみてください。
コメントを残す