CSS

margin も padding も 0 なのに、なぜか img の下に隙間が入ってしまう。何ででしょう？img の下に入る隙間、横に入る隙間の原因について、探ってみました。

きっちり計算してレイアウトを作ったのに、大きさが合わない・・・。margin が思ったように反映されない？どうして？margin の相殺を理解していないと、そんなことになったりしますよね。どんな場合に margin の相殺が起きるのか、起きないのかのまとめです。

メディアクエリと、Flexboxを使って、PC・タブレット・スマホと、3段階の画面サイズに合わせてレスポンシブWebを作ってみました。ブレイクポイントの考察、仕組み、サンプルページなど。

最近よく見かけるビューポート単位。ビューポートという概念の説明と、前から CSS でよく使われている単位のまとめです。

HTML で文章を書く際、改行を制御する CSSプロパティ、overflow-wrap (word-wrap) と word-break 、二つありますが、違いは何なんでしょう？使い方、効かない場合などをまとめました。

HTML で文章を書く際、width を無視して要素がはみ出る場合の原因について、基本の基本に立ち返って、まとめてみたいと思います。

1～3回で Flexbox について説明してきました。今回は、まとめとして、Flexコンテナ（親要素）とFlexアイテム（子要素）、それぞれに記載するプロパティを図にして、またプロパティを一覧にしてみました。

Flexアイテム（子要素）に指定するプロパティのまとめです。 flex-grow, flex-shrink, flex-basis, flex（ショートハンド）, align-self, order

Flex コンテナー（親要素）の親要素に指定するプロパティのうち、justify-content、align-items、align-content についての説明です。

並列、縦列レイアウトの切り替えがシンプルなコードで行える Flexbox が使いこなせると、レスポンシブデザインが簡単にできますね。Flexbox の基本の記述方法、Flex コンテナ（親要素）に指定するプロパティ、flex-direction、flex-wrap、flex-flow の説明です。