こんにちは、こずえです。
プログラミング学習記録21日目です。
前回に引き続きBootstrapについて学習しました。
所感： つまづいた時にGoogle大先生のありがたさを思い出しますね。
合計学習時間
前回までの時間：29.00[h]
今回の時間：3.75[h]
合計時間：32.75[h]
学習内容
読んだ記事、観た動画
- 【Bootstrap 4 入門】初心者は2つの使い方を覚えるだけでかなり便利にBootstrapを使えるようになる
- 空白ユーティリティ（Spacing）
- Bootstrap Tutorial For Beginners – Responsive Design with Bootstrap 3 – Responsive HTML, CSS
1.は前回の復習のために読みました。
3.はBootstrapのテンプレートデザインについて解説されている動画です。
私はBootstrapバージョン4を使用しているのですが、動画はバージョン3を使用しています。
3と4で一部仕様が違っていてそのままだと動かないものもあったので、公式HPのサンプルと比較しながら進めました。
marginとpadding
前回インプットしたmarginとpaddingを実際に使用してみました。
margin、paddingともに1行の中にカラムを全て入れ、カラムサイズも全て2を指定しています。
Bootstrap marginとpaddingの確認
HTML
<div class="container">
<div class="row">
<div class="col-12 py-2">marginの確認</div>
</div>
<div class="row row-bg-color">
<div class="col-2 m-0 col-bg-color">margin:0</div>
<div class="col-2 m-1 col-bg-color">margin:1</div>
<div class="col-2 m-2 col-bg-color">margin:2</div>
<div class="col-2 m-3 col-bg-color">margin:3</div>
<div class="col-2 m-4 col-bg-color">margin:4</div>
<div class="col-2 m-5 col-bg-color">margin:5</div>
<div class="col-2 mt-2 col-bg-color">margin margin margin margin margin margin margin margin margin margin</div>
<div class="col-2 mb-2 col-bg-color">マージンマージンマージンマージンマージンマージンマージンマージンマージンマージン</div>
<div class="col-2 m-5 col-bg-color">???????????</div>
</div>
<div class="row">
<div class="col-12 py-2 ">paddingの確認</div>
</div>
<div class="row row-bg-color">
<div class="col-2 p-0 col-bg-color">padding:0</div>
<div class="col-2 p-1 col-bg-color">padding:1</div>
<div class="col-2 p-2 col-bg-color">padding:2</div>
<div class="col-2 p-3 col-bg-color">padding:3</div>
<div class="col-2 p-4 col-bg-color">padding:4</div>
<div class="col-2 p-5 col-bg-color">padding5</div>
<div class="col-2 py-2 col-bg-color">padding padding padding padding padding padding padding padding padding padding</div>
<div class="col-2 px-2 col-bg-color">パディングパディングパディングパディングパディングパディングパディングパディングパディングパディング</div>
<div class="col-2 p-5 col-bg-color">???????????</div>
</div>
</div>
CSS
.row-bg-color {
background-color: aqua;
border: solid;
}
.col-bg-color {
background-color: lightgreen;
border: solid;
border-color: red;
}
col-2で1行に6つカラムが表示されるところですが、marginが入ることによって6つ目が折り返しています。
レイアウトを組む際に気を付けた方がいいポイントかもしれませんね。
Bootstrapのデザインを使ってみる
「読んだ記事、観た動画」の3.を観ながらデザインを使ってみました。
Bootstrap ナビゲーションバー、ボタン、カードの確認
HTML
<!-- ナビゲーションバー -->
<header>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- メインコンテンツ -->
<div class="container">
<!-- ボタン -->
<div class="row">
<div class="my-2 col-md-6 col-sm-12">
<a href="#" class="btn btn-primary">Button</a>
<a href="#" class="btn btn-warning">Button</a>
<a href="#" class="btn btn-danger">Button</a>
<a href="#" class="btn btn-success">Button</a>
</div>
</div>
<!-- カード -->
<div class="row">
<div class="my-2 col-sm-6 col-md-6">
<div class="card" style="width: 100%">
<div class="card-header">card-header</div>
<img src="img/animal_inu.png" style="width: 100%;">
<div class="card-body text-danger">
<h5 class="card-title">いぬ</h5>
<p class="card-text">わんわんわんわんわんわんわんわんわんわん</p>
<a href="#" class="btn btn-primary">do something</a>
</div>
</div>
</div>
<div class="my-2 col-sm-6 col-md-3">
<div class="card" style="width: 100%">
<div class="card-header">card-header</div>
<img src="img/animal_neko.png" style="width: 100%;">
<div class="card-body text-success">
<h5 class="card-title">ねこ</h5>
<p class="card-text">にゃあにゃあにゃあにゃあにゃあにゃあにゃあにゃあにゃあにゃあ</p>
<a href="#" class="btn btn-primary">do something</a>
</div>
</div>
</div>
<div class="my-2 col-sm-6 col-md-3">
<div class="card" style="width: 100%">
<div class="card-header">card-header</div>
<img src="img/animal_usagi.png" style="width: 100%;">
<div class="card-body">
<h5 class="card-title">うさぎ</h5>
<p class="card-text">ぴょんぴょんぴょんぴょんぴょんぴょんぴょんぴょんぴょんぴょん</p>
<a href="#" class="btn btn-primary">do something</a>
</div>
</div>
</div>
</div>
</div>
動画内で出てくる「panel」は4で廃止になって「card」に代わったようです。
つまづいたこと
colの中の文字が折り返しされない
以下の画像のとおりcol中の文字が折り返しされずはみ出してしまっています。
結論を先に言いますと、word-wrapプロパティを使用することで解決できます。
colの中の文字が折り返しされない
問題の切り分けと原因の予想
- 英数字では折りし返しされない
- 日本語では折り返しれる
- ?だと日本語1文字よりも幅をとっている (今回は関係なさそうです)
上記から折り返しの判定がうまくいっていないのではと予想しました。
→文字サイズ？(英数字：1バイト 日本語：2バイト)
原因と解決策
原因は、連続した英数字は1塊 (word)として扱われるためでした。
解決策として、word-wrapプロパティを使用しました。
word-wrap: break-word;
考えてみたら当然で、英語を基準にされているのですから。
ずれた予想をしてしまっていましたね。
参考にした記事
検索ワード「css 折り返し 英数字」「html ward-warp」