flex

number

【CSS】grid で並べた要素の順番を変える方法 CSSでorderを設定しよう

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

line-up

【flex】ヘッダーのロゴとナビゲーションの高さを中央でそろえる方法

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

center

【flex】flex-direction:column; の中央寄せ margin:0 auto;ではダメ!?

プログラミングを勉強中のみなさん、こんにちは! 今回は、flex-direction:column; で要素を縦並びにして、その要素群を中央に寄せる方法を紹介します。 初心者向けのメモ書きとして執筆し ...

art

【CSS】ヘッダーを固定したら、メニューが左寄せになってしまった! を解決します 

プログラミングを勉強中のみなさん、こんにちは! 今回は、ヘッダーを固定したら、メニューが左寄せになってしまった! というエラーの解決方法を紹介します。 とっても簡単ですので、是非参考にしてください。 ...

height

【CSS】flex で横並びにすると要素の高さがそろってしまう 高さがバラバラのまま並べたい を解決

プログラミングを勉強中のみなさん、こんにちは! 今回は、flexを使う際に注意点を一つ紹介します。 初心者向けのメモ書きとして執筆しておりますので、あしからず。 それでは見ていきましょう。 目次 fl ...

gap

【CSS】flexで並べた要素間の余白設定はgapが便利 

プログラミングを勉強中のみなさん、こんにちは!   今回は、flexの余白設定で使える「gap」について紹介します。   余白というと、margin や padding などを思い ...

one-column

【レスポンシブ】flexで横に並べた要素を縦並び(1カラム)にする方法

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

from-2column-to- 1column

【CSS】flexで2カラム→1カラム  レスポンシブデザインの必須レイアウト

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

flex-2columns

【CSS】flexを使った2カラムのレイアウト方法 とっても簡単です

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

© 2022 サカらいふ Powered by AFFINGER5