flex

要素を中央に寄せることは頻繁にあります。 やり方もケースバイケースです。   今回の記事では、要素を中央に寄せるためのテクニックをまとめてみました。 一元的な記事ですので、状況に応じて参考に ...

ヘッダーに関する記事が増えてきたので、まとめ記事を作ってみました。 よく使うCSSや初心者がよくつまづくエラーを一挙に紹介します。   ヘッダーの作成はある程度パターンが決まっておりますので ...

Web制作を勉強中のみなさん、こんにちは。 今回は、grid で並べた要素の順番を変える方法を紹介します。   gridで横並びにした要素があるとします。 その要素をスマホサイズで縦並びにす ...

今回のテーマは　flex　です。 ヘッダーにおいて、ロゴとナビゲーションの高さを中央でそろえる方法を紹介します。 ロゴが左にあって、右側にナビゲーションがある。 というのはヘッダーのよくあるパターンで ...

プログラミングを勉強中のみなさん、こんにちは！ 今回は、flex-direction:column; で要素を縦並びにして、中央でそろえる方法を紹介します。 目次 flex-direction中央でそ ...

今回は、flexを使うときの便利なテクニック、「align-items」を紹介します。 以前私がハマってしまったのが、高さが異なる要素を並べたとき、自動で高さがそろってしまったことです。 高さはバラバ ...

今回は、flexで横並びにした要素を、縦並び、要するに１カラムにする方法を紹介します。 PCの画面サイズで、flexを使用してブロック要素を横並びにしたとします。 そして、レスポンシブデザインにおける ...

今回はレスポンシブデザインを作成する際に、避けては通れない、２カラムを１カラムにする方法を紹介します。 よくあるパターンです。   PC表示で写真とテキストが横並びになっているレイアウトを、 ...

今回は flex を使用した２カラムレイアウトの方法を紹介します。 初心者の方や「どうやるんだっけ・・・」と忘れてしまった方が参考になるかと思います。 それでは見ていきましょう。 目次 コード比率を変 ...