Bootstrap - ブログデモ
ブログとは何か？
こんにちは、Web開発者志望の方々！今日は、Bootstrapを使ってブログの楽しい世界に飛び込みます。コードを書き始める前に、ブログが実際に何であるかを少し理解する時間を取りましょう。
ブログは「weblog」の略で、個人或び小さなグループが運営する、通常は非公式なまたは対話的なスタイルで書かれた定期的に更新されるウェブサイトやウェブページのことを指します。これは、さまざまなトピックについての考え、経験、または専門知識を共有するオンラインの日記のようなものです。
私が2000年代初頭にブログを始めたことを覚えています。これは、類似の興味を持つ世界中の人々とつながる革新的な方法でした。では、Bootstrapを使って自分のブログを作成してみましょう！
Bootstrap ブログデモの設定
ステップ1: 基本的なHTML構造
まず、ブログの基本的なHTML構造を作成します。index.htmlという新しいファイルを作成し、以下のコードを追加してください：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私の素晴らしいブログ</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- ブログのコンテンツはここにきます -->
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>これで基本的なHTML構造が設定され、必要なBootstrap CSSとJavaScriptファイルが含まれます。これをブログの骨組みと考え、後で内容とスタイル（肉と筋肉）を追加します！
ステップ2: ナビゲーションバーの作成
次に、ブログにナビゲーションバーを追加します。<body>タグの直後に以下のコードを挿入してください：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">私の素晴らしいブログ</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションを切替える">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">連絡先</a>
</li>
</ul>
</div>
</div>
</nav>このコードは、ホーム、关于、連絡先のページにリンクする応答型のナビゲーションバーを作成します。navbar-expand-lgクラスは、ナビゲーションバーが大きなスクリーンでは拡張され、小さなスクリーンではハンバーガーメニュに折り畳まれるようにします。これは、ブログのコンテンツをナビゲートするためのGPSのようなものです！
ステップ3: メインコンテンツエリアの追加
次に、ブログ投稿のメインコンテンツエリアを作成します。ナビゲーションバーの後に以下のコードを追加してください：
<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<!-- ブログ投稿はここにきます -->
</div>
<div class="col-md-4">
<!-- サイドバーのコンテンツはここにきます -->
</div>
</div>
</div>このコードは、ブログ投稿（8列広い）とサイドバー（4列広い）の2つの列を持つコンテナを作成します。これは、あなたの部屋を学習エリアとリラックスエリアに分けるようなものです – それぞれが特定の目的を果たします！
ステップ4: ブログ投稿の作成
次に、サンプルのブログ投稿を追加します。ブログ投稿のコメントのところに以下のコードを挿入してください：
<article class="blog-post">
<h2 class="blog-post-title">サンプルブログ投稿</h2>
<p class="blog-post-meta">2023年1月1日 by <a href="#">マーク</a></p>
<p>これは追加のパラグラフのプレースホルダーです。これは利用可能なスペースを埋め、長いテキストの断片が周囲のコンテンツに与える影響を示すために書かれています。これを頻繁に繰り返してデモを続けるので、同じテキストが現れるのを見てください。</p>
<h3>サブヘッドライン</h3>
<p>これは追加のパラグラフのプレースホルダーです。これは利用可能なスペースを埋め、長いテキストの断片が周囲のコンテンツに与える影響を示すために書かれています。これを頻繁に繰り返してデモを続けるので、同じテキストが現れるのを見てください。</p>
<a href="#" class="btn btn-primary">もっと読む</a>
</article>このコードは、タイトル、メタ情報、パラグラフ、そして「もっと読む」ボタンを持つシンプルなブログ投稿を作成します。これは、読者に考えやアイデアを共有する手紙を書くようなものです！
ステップ5: サイドバーのコンテンツを追加
最後に、サイドバーにコンテンツを追加します。サイドバーのコメントのところに以下のコードを挿入してください：
<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">关于</h4>
<p class="mb-0">私の素晴らしいブログにようこそ！ここでは、技術、コーディング、開発者としての生活についての考えを共有しています。</p>
</div>
<div class="p-4">
<h4 class="font-italic">アーカイブ</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">2023年3月</a></li>
<li><a href="#">2023年2月</a></li>
<li><a href="#">2023年1月</a></li>
</ol>
</div>
<div class="p-4">
<h4 class="font-italic">他の場所</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>このコードは、「关于」セクション、過去の投稿のアーカイブ、そしてソーシャルメディアプロフィールのリンクを追加します。これは、ブログに個人的な触れ込みを加え、読者にあなた自身とあなたが書いた他のものを少しだけ見せます！
結論
そして、これでBootstrapの基本的なブログ構造が完成しました！もちろん、これはただの始まりです。色をカスタマイズし、更多信息を追加し、画像を含めるなど、さらに多くのことを行うことができます。重要なのは、シンプルなところから始めて、そこから築き上げていくことです。
ブログを作成することは、コードだけでなく、自分の声を世界に届けることでもあります。ですから、実験を恐れず、間違ったことを恐れず、そして最も重要なのは、楽しむことです！
ハッピーコーディング、そしてあなたのブログが他の人々をインスパイアし、教育する素晴らしいコンテンツで満たされることを祈っています！
| メソッド | 説明 |
|---|---|
| Bootstrap CDN | Bootstrap CSSとJSファイルを含めるために使用 |
| コンテナ | コンテンツを中央に配置するためのコンテナを作成 |
| 行 | 水平な列のグループを作成 |
| 列 | 別のスクリーンサイズに応じて列の幅を定義 |
| ナビバー | 応答型のナビゲーションヘッダーを作成 |
| アーティクル | 独立した、自己完結型のコンテンツのためのセマンティックなHTML5要素 |
| ボタン | クリック可能なボタンを作成 |
Credits: Image by storyset