nlog

とめどなく流れるよだれ

Bootstrap4移行ガイドを読む（コンテンツ編）

css

Reboot - Bootstrap4移行ガイド

  • RebootはNormalizeの上で構築される。HTML要素を対象にしたBootstrapフレームワークを有効にするための下地
  • 単位を em か rem で統一
  • CSSのボックスモデルを box-sizing: border-box に変更
  • margin の相殺を避けるために margin-bottom で余白を下方向だけに設定
  • 段落には margin-bottom: 1rem で見出しには margin-bottom: .5rem を指定
  • dd 要素は margin-left: 0 にして左側の余白を削除
  • blockquote 要素は margin-left: 1rem（margin: 0 0 1rem）を指定して、他の要素と余白サイズを合わせる
  • abbr や summary 要素のようにカーソルの見た目を変更しているものがある
  • textarea 要素のリサイズが縦方向に制限するなど、フォーム部品にも独自のスタイルを当てている
  • hidden 属性をつけた要素が必ず display: none になるように変更

文字の体裁 - Bootstrap4移行ガイド

  • グローバル設定、見出し、本文、リスト、リンクなどインライン要素の文字の体裁
  • 見出しは h1 〜 h6 まで利用可能（HTML上見出しではなくとも、.h1 〜 .h6 クラスを使うことで同等の見た目にできる）
  • <small class="text-muted"> を見出しのHTMLの中に入れると、そばに小さめの補助文をつけることができる
  • 見出しをより目立たせたい場合は、h1 よりさらに大きな表示見出しを使う。表示見出しは .display-1 〜 .display-4 まで4段階ある
  • 段落を目立たせるには .lead クラスを適用
  • mark、del、s、ins、u、small、strong、em 要素にも装飾がほどこされている
  • abbr 要素は下線を追加、マウスオーバーしたときにヘルプカーソルが出るように見た目を変更
  • マークなしリストにしたい場合は .list-unstyled クラスを使う
  • 横並びリストは .list-inline とその子要素に .list-inline-item を適用して実装する
  • dl と dd 要素を横並びにした水平定義リストをつくるにはグリッドを使う
  • ブレークポイントに合わせて html 要素の文字サイズを変更することをBootstrapではおこなっていないが、やろうと思えばカスタマイズで簡単にできる

コード - Bootstrap4移行ガイド

  • 長いコードブロックのために .pre-scrollable クラスが用意されている。これは枠の最大の高さを 340px に設定し、それを超えた場合はY軸にスクロールバーを出現させる
  • 変数を示すには var 要素を使う
  • ユーザー入力を示すには kbd 要素を使う
  • プログラムからのサンプル出力を示すには samp 要素を使う

イメージ - Bootstrap4移行ガイド

  • Bootstrapの画像は .img-fluid クラスでレスポンシブになる。このクラスには max-width:100%; height:auto; が適用されている
  • .img-thumbnail というサムネイル用のクラスがあり、これは画像に丸みを帯びた1pxの境界線をつける
  • 画像の四隅を丸めるには .rounded クラスを使う
  • 画像の配置は横の配置ユーティリティクラスや文字の中央揃えクラスを使う
  • picture 要素を使う場合、.img-* クラスは picture 要素ではなく img タグにつける

テーブル - Bootstrap4移行ガイド

  • サードパーティのテーブルに影響を与えないため、テーブルの設定は .table クラスを指定した場合に反映されるように設定
  • 基本テーブルの見た目は行に横線だけが入った見た目
  • テーブルの線を消すには罫線ユーティリティクラスを指定する
  • thead 要素の色を変更するには .thead-light や .thead-dark クラスを指定する
  • 交互に色が変わるテーブルにするには table 要素に .table-striped クラスを指定する。" tbody 内" の要素の色が変わる
  • テーブルの横線に加えて縦線を追加するには、.table-bordered クラスを指定する
  • 行にマウスオーバーしたときに背景を変えるには .table-hover クラスを指定する。" tbody 内" の要素の色が変わる
  • 余白を減らして、テーブルをコンパクトな見た目にするには .table-sm クラスを指定する
  • 個々のセルや行に色付けするには、.table-primary クラスなどを指定する
  • caption 要素は要素に対してスタイルを設定済み
  • レスポンシブ対応のために、モバイルなどでウィンドウを飛び出るテーブルには、.table-responsive クラスを指定してテーブルを水平方向にスクロール可能にする
  • .table-responsive クラスは -sm などのサフィックスをつけることで、水平方向のスクロール許可のブレークポイントを指定できる

図表 - Bootstrap4移行ガイド

  • 図表の設定は .figure, .figure-img, .figure-caption クラスを指定した場合に反映されるように設定
  • キャプションの位置はテキストユーティリティクラスで変更可能

Bootstrap4移行ガイドを読む（レイアウト編）

css

概要 - Bootstrap4移行ガイド

  • Bootstrap4のレイアウトに含まれるもの
    • 包括コンテナー
    • グリッドシステム
    • メディア・オブジェクト
    • ユーティリティクラス
  • グリッドシステムにも使われる包括コンテナーは、.container クラスで指定する
  • 包括コンテナーには、レスポンシブな固定幅（ブレークポイントで幅が変わる）、全幅（常に 100% 幅）の2種類がある
  • 全幅のコンテナーは .container-fluid クラスで指定する
  • コンテナーの入れ子は可能だが、ほとんど必要ない
  • Bootstrapではメディアクエリーを使用して、ウィンドウの**幅に対して5段階のブレークポイントを決めている
    1. xs ... 基準。極小デバイス（縦向きモバイルを想定、576px 未満）
    2. sm ... 小デバイス（横向きモバイルを想定、576px 以上）
    3. md ... 中デバイス（タブレットを想定、768px 以上）
    4. lg ... 大デバイス（デスクトップを想定、992px 以上）
    5. xl ... 特大デバイス（ワイド・デスクトップを想定、1200px 以上）
  • 特定の範囲だけに指定できる
  • z-index はナビゲーション、ツールチップ、ポップオーバー、モーダルなどに使われる。Bootstrapでは段階が決まっていて、7段階。この値のカスタマイズは推奨されない
    1. $zindex-dropdown
    2. $zindex-sticky
    3. $zindex-fixed
    4. $zindex-modal-backdrop
    5. $zindex-modal
    6. $zindex-popover
    7. $zindex-tooltip

グリッド - Bootstrap4移行ガイド

  • Flexboxで構築されたグリッド
  • 行（row）が列（column）を囲む
  • グリッドのブレークポイントとコンテナ幅には px 単位を使用している。これはビューポート幅がピクセル単位であり、フォントサイズによって変化しないから
  • .col-* に列幅の番号を振らない場合、列の幅は行を列の数で割った等幅になる
  • 等幅の列には、行に対するパーセンテージで設定
  • 列の両脇には padding を使った余白が割り当てられている。これを消すには .row クラスに .no-gutters クラスを適用する
  • グリッドは入れ子にできる
  • （行幅に満たない列に対して）途中で改行を加えたい場合は、改行したい箇所に <div class="w-100"></div> を挿入する
  • Flexboxの機能を使って列の縦方向、横方向の配置を決められる
  • .order-* クラスを使用して列の視覚的順序を並び替えできる
  • .offset-* クラスを使用して列の左右に余白を適用できる
  • 小デバイス（sm）では2列にして大デバイス（lg）では4列にするなど、ブレークポイントで列の数を変更するには .col-sm-* や .col-lg-* クラスを使う
  • よりセマンティックなHTMLを書きたければ、グリッドをSassのMixinとして利用することも可能
  • グリッドも他と同じようにカスタマイズ可能だが、グリッド値は px（rem, em, % ではなく）で設定すること。

メディアオブジェクト - Bootstrap4移行ガイド

  • メディアオブジェクトとは、片方に画像、もう片方にテキストを置くようなオブジェクト
  • メディアオブジェクトを使うには .media クラスを適用する
  • テキストは .media に内包された .media-body の中に入れる
  • margin や padding などの余白は、空白ユーティリティクラスを使って空ける
  • メディアオブジェクトは入れ子にできる
  • Flexboxの機能を使って列の縦方向、横方向の配置を決められる
  • 左右の画像とテキストは、.order-* クラスを使用して視覚的順序を並び替えできる

レイアウトユーティリティ - Bootstrap4移行ガイド

  • 要素の表示・非表示などしたければ、要素の display プロパティの値を変える必要があり、これは表示ユーティリティクラスを使えばできる
  • Flexユーティリティクラスを使いたければ、要素に display: flex をもたせるために .d-flex を使う
  • margin と padding で余白を空けるには空白ユーティリティクラスを使う
  • display: none で非表示までしなくて良い場合は、代わりに可視性ユーティリティクラスを使って要素の可視性を切り替えることが可能

読むの大変。

Bootstrap4移行ガイドを読む（導入編）

css

Bootstrapはできれば使いたくない。個人で使うにもチームで使うにも巨大すぎるシステムな気がして、触りたいと思えない。

しかし中身を知らずにそう言ってばかりはいられない。それにBootstrap製の案件がいつ舞い込んでくるかわからない。

備えあれば憂いなし。まずは日本語に翻訳されたドキュメントを見ながら、Bootstrap4の概要を把握したいと思う。

はじめに - Bootstrap4移行ガイド

ダウンロード - Bootstrap4移行ガイド

  • Bootstrapを使うには、コンパイル済みファイルをダウンロードする、ソースファイルをダウンロードしてコンパイルする、CDNを使う、パッケージマネージャーを使うなどの手段がある
  • スタイルシートは標準（ bootstrap.css） のものを読み込むこともできるし、部分的にグリットだけ（ bootstrap-grid.css）読み込んだりRebootだけ（ bootstrap-reboot.css ）読み込んだりできる
  • bootstrap.min.css のように軽量版もある

ファイルの内容 - Bootstrap4移行ガイド

  • bootstrap/docs/examples/ にBootstrapの使用例が入っている

ブラウザとデバイス - Bootstrap4移行ガイド

  • 最新の安定リリース版をサポート。WindowsではIE10とIE11、Edge
  • IE10ではHTML5とCSS3が完全にはサポートされていないので、プレフィックスつきのクラスが必要
  • バグや最善の体験を提供するためにCSSハックを使っている箇所がある。これらの箇所はバリデーターで警告がでることもあるが、実際は問題ない

JavaScript - Bootstrap4移行ガイド

  • bootstrap.bundle.js およびその軽量版にはPopper.jsが組み込まれている
  • Popper.jsに依存しているのは dropdown.js、 popover.js、 tooltip.js
  • js/dist/ 内のJavaScriptファイルは alert.js や button.js など、コンポーネント別に管理されている
  • BootstrapのJavaScriptはjQueryに依存している
  • BootstrapのJavaScriptファイルをHTMLで読み込む前に、別途jQueryファイルを読み込む必要がある
  • JQueryのどのバージョンをサポートしているかは package.json を確認
  • JavaScriptはHTMLのデータ属性を使って適用される

テーマ - Bootstrap4移行ガイド

  • テーマのカスタマイズはSass変数、Sassマップ、およびカスタムCSSによっておこなう
  • カスタマイズするSassファイル（ custom.scss ）は、Bootstrapのファイルとは完全に分けて管理されることを想定
  • Sassの @import を使って部分的にスタイルを読み込むこともできるが、Bootstrapのコンポーネントにはいくつかの要件と依存関係があるので注意
  • BootstrapのSass変数には !default フラグがつけられているので、カスタマイズするSassファイルで変数の上書きがしやすい

ツールの構築 - Bootstrap4移行ガイド

  • 構築システムにNPM scriptsを利用。ローカルで実行するにはNode v8.xをインストール
  • npm run dist でコンパイル。SassとAutoprefixerとUglifyJSを実行する
  • npm test でテストを実行する
  • npm run docs でJavaScriptを構築してlintでチェック
  • ローカルでドキュメントを書くのにJekyllを使ってる。ドキュメントを更新する場合は bundle install が必要になる

webpack - Bootstrap4移行ガイド

  • Webpack 3を使ってBootstrapを組み込む方法の紹介

アクセシビリティ - Bootstrap4移行ガイド

  • Bootstrapの利用者が無茶をしなければ、WCAG2.0(A/AA/AAA)、Section 508および類似のアクセシビリティ標準を満たすことができる
  • デフォルトのカラーテーマでは色のコントラストが不十分なので、Bootstrapの利用者がアクセシビリティ要件を満たしたい場合、これを適切な値に変更しなければいけない（なので、そのままBootstrapを使えばアクセシビリティが満たせるわけではない）
  • 視覚的に非表示にする要素には sr-only クラスを使う

Bootstrap4移行ガイドを読んでる

css

Bootstrap4移行ガイドを読みはじめた。

CSSフレームワークはこれまでにSkelton、Pure.css、あとグリッドレイアウトだけに用意されたフレームワークを使ったことがある。けれど実は大きなものはほとんど使ったことがない。ときどき気になってBootstrapとかFoundationのサイトを見に行くんだけど、コードも文章も量が多くて読むのを諦め、使うのを諦める。

今回はひとつフレームワークをつくってみたくて、使う側じゃなくてつくる側の視点でBootstrap4を参考にしてみようと思う。Bootstrap4を選んだのは最大手（？）に見えたのと、今年の1月にアップデートされたばかりでコードもいい感じだろうと思ったから。今回読んでるサイトのように、日本語での解説も多いし 。

とりあえず昼読んでみた。続けて読み進められそう。複数の線を要素につけるときのセレクターとか、メディアクエリーの設定とか、参考になりそうな部分はすでにある。明日はそのへんを記事にする。

<number> データ型を基準に他のデータ型を理解する

css

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Types

 

昨日の続きで今日が最後。データ型をいくつか眺めていた。

 

まず <number> データ型がある。これは整数と小数、どちらも含む数値の型。 <number> データ型は単位を持たないただの数値である。

 

<number> データ型のあとに何かの単位をつなげれば、それはまた新しいデータ型の名前で呼ばれる。

 

たとえば、

  • degなどの角度をあらわす単位をつなげれば <angle> データ型に
  • fr単位をつなげれば <flex> データ型に
  • emやrem、pxなどの長さをあらわす単位（ただし%は除く）をつなげれば <length> データ型に
  • %単位をつなげれば <percentage> データ型に
  • dpiなどの解像度をあらわす単位をつなげれば <resolution> データ型に
  • sやmsといった時間をあらわす単位をつなげれば <time> データ型に

また、<integer> データ型は整数をあらわすデータ型だあり、これは <number> データ型に含まれる。

 

<number> データ型を使う他のデータ型では <ratio> データ型かある。メディアクエリーにおける画面比率の判定に使用される。他にも <position> データ型のオフセット値として使われたり、<transform-function> データ型に使われたりする。

 

これらを覚えていても実利はほとんどなさそうに思う。それよりも、<time> データ型で0の単位は省略できない、という点のほうが重要度は高い。

 

仮に値 0 に対してすべての単位が同じ時間を表すとしても、これは <length> ではないので、単位を省略してはいけません。0 は無効で、0s や 0ms を表しません。

https://developer.mozilla.org/ja/docs/Web/CSS/time

 

<color> データ型などを眺める

css

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Types

 

データ型をいくつか眺めていた。

 

やっぱり普段使わないものほど理解するのが難しい。<basic-shape> データ型みたいに、型自体を使う機会が少ないものはドキュメントを読んでもへーっとしかならない。...clip-path 使おう。

 

<blend-mode> データ型は乗算とかオーバーレイとか、そういうのの仕組みを勉強する意味で読んでみてよかった。短い説明だから、ここで全部は把握しきれなかったけど理解するきっかけにはなった。

 

<colo> データ型ではtransparentが色として定義されていることを発見。CSS3でアルファチャンネルが登場した際に色として再定義されたんだそうな。あと、CSS4ではrgb()やhsl()はアルファ値をとれるみたいだから、rgb(255, 0, 153, 1)みたいに書ける。

 

 

marginの相殺を検証する

css

「マージンの相殺 | MDN」を読んでる。

隣接兄弟要素の margin の相殺。よく知るやつ。あと要素の margin-top: 1em が前の要素の margin-bottom: .5em を相殺している。ばっちり相殺。

親要素と先頭・末尾の子要素の margin の相殺。これもmarginの相殺と呼ぶのか。親要素の margin を子要素の margin が相殺している。よし相殺。

空のブロックの margin の相殺。使うことはなさそうだけど、相殺されているのは確認できた。

おまけの追記

負のマージンが絡む場合には、相殺されたマージンの大きさは、一番大きな正のマージンと一番小さな（もっともマイナスの）マージンの合計値になります。

確認。親要素と先頭・末尾の子要素の margin の相殺で、親要素の正の margin と同じ値を子要素に負の margin を指定したとき、結果として親要素の下の margin が残るっていうのは気づきにくい感じがした。ただ、負の margin を基本的に使わないので遭遇する機会はあまりなさそう。

ブロックが、その margin-top とその先頭の子要素の margin-top を分けられるような、ボーダー、パディング、インラインコンテンツ、フロートの解除 (clear) のいずれも持たない場合、もしくは、ブロックがその margin-bottom とその末尾の子要素の margin-bottom を分けられるような、ボーダー、パディング、インラインコンテンツ、高さ (height)、高さの最小値 (min-height) のいずれも持たない場合、マージンは相殺されます。

確認。border と padding のようなケースでは気づかぬうちに、ということが起こりそうなんので気をつける。