|
お疲れ様です。
ライフマップ開発チームの大城です。
初めの記事を上げてからだいぶ時間が経ってしまいました...お恥ずかしい限りです。
本日はBootstrapの使い方を説明したいと思います。
簡単にオシャレなWebサイトが作成できるので、デザインできないよ〜なんて悩んでる方はぜひBootstrapを使ってみてください。
なんだか難しい...とか、これ間違ってるよ！等あればコメントでご指摘いただけると助かります。m（＿＿）m
# 準備
作業場所の作成
まずは作業するディレクトリを作成しましょう。
後々絶対やって良かった！と思うはずなので、お勧めです。
後々絶対やって良かった！と思うはずなので、お勧めです。
ディレクトリ構成はこんな感じになります。
~/Developments/bootstrap
┗index.html
HTMLファイル1個だけですね。
HTMLテンプレートファイル作成
次はBootstrapが使えるHTMLファイルを作成しましょう。
公式ドキュメントにスターターテンプレートが用意されているので、そのまま使っちゃいます。
https://getbootstrap.jp/docs/5.0/getting-started/introduction/#%E3%82%B9%E3%82%BF%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88
公式ドキュメントにスターターテンプレートが用意されているので、そのまま使っちゃいます。
https://getbootstrap.jp/docs/5.0/getting-started/introduction/#%E3%82%B9%E3%82%BF%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88
わかりやすいように、使わない部分を省いたものを載せておきます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSSファイル読み込み -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Bootstrap JSファイル読み込み -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>これで準備は完了です！
実際にブラウザで開いてみて、『Hello, world!』と表示されているか確認してください。
こんな感じで、今回は終わりたいと思います。
短くてしょーもない内容ですが、Bootstrapは便利で使いやすいよ！って事を伝えたかったので、許してください。（；；）
続きは次回、Bootstrapを使って簡単なWebサイトを作るところから書きたいと思います。
大抵はドキュメントのサイドメニューにある『Components』カテゴリにあるので、自分で試してみたい！という方はドキュメント見た方が楽しいかもです。
それではまた次回〜
大城でした。
0 件のコメント:
コメントを投稿