半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録21日目

更新日:

こんにちは、こずえです。
プログラミング学習記録21日目です。
前回に引き続きBootstrapについて学習しました。

所感: つまづいた時にGoogle大先生のありがたさを思い出しますね。

合計学習時間

前回までの時間:29.00[h]
今回の時間:3.75[h]
合計時間:32.75[h]

学習内容

読んだ記事、観た動画

  1. 【Bootstrap 4 入門】初心者は2つの使い方を覚えるだけでかなり便利にBootstrapを使えるようになる
  2. 空白ユーティリティ(Spacing)
  3. 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の確認

col-2で1行に6つカラムが表示されるところですが、marginが入ることによって6つ目が折り返しています。
レイアウトを組む際に気を付けた方がいいポイントかもしれませんね。

Bootstrapのデザインを使ってみる

「読んだ記事、観た動画」の3.を観ながらデザインを使ってみました。

Bootstrap ナビゲーションバー、ボタン、カードの確認

動画内で出てくる「panel」は4で廃止になって「card」に代わったようです。

つまづいたこと

colの中の文字が折り返しされない

以下の画像のとおりcol中の文字が折り返しされずはみ出してしまっています。

結論を先に言いますと、word-wrapプロパティを使用することで解決できます。

colの中の文字が折り返しされない

問題の切り分けと原因の予想

  • 英数字では折りし返しされない
  • 日本語では折り返しれる
  • ?だと日本語1文字よりも幅をとっている (今回は関係なさそうです)

上記から折り返しの判定がうまくいっていないのではと予想しました。
 →文字サイズ?(英数字:1バイト 日本語:2バイト)

原因と解決策

原因は、連続した英数字は1塊 (word)として扱われるためでした。
解決策として、word-wrapプロパティを使用しました。

word-wrap: break-word;

考えてみたら当然で、英語を基準にされているのですから。
ずれた予想をしてしまっていましたね。

参考にした記事

検索ワード「css 折り返し 英数字」「html ward-warp」

-プログラミング, 学習, 記録
-, , ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.