flex

center

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

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

art

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

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

height

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

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

gap

【CSS】flexで並べた要素間の余白はgapを使おう marginより便利です 

2021/12/7    , , , , , ,

プログラミングを勉強中のみなさん、こんにちは! 今回は、flexの余白設定で使える「gap」について紹介します。 目次 余白と言えば 気づいたこと gapプロパティ まとめ 余白と言えば flexで要 ...

解錠

【レスポンシブ】flexで横並びにしたレイアウトを解除して1カラムにする方法

今回は、レスポンシブデザインのコーディングにおいて、flexを解除する方法です。 PCサイズでflexを使用してブロック要素を横並びにした。 でも、レスポンシブでスマホサイズ作成時、flexを解除して ...

【CSS】レスポンシブで2カラム→1カラム  flexで解決

今回はレスポンシブデザインを作成する際に、 2カラムを1カラムにする、という御紹介です。 イメージはできるけど、実際どんなコード使えばいいのかわからない人へ紹介します。 目次 コード 応用 コード P ...

2カラム道路

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

2021/10/27    , , , , ,

Web制作をするうえで、2カラムのレイアウトにすることは良くあると思います。 イメージはできるけど、実際どんなコード使えばいいのかわからない人へ紹介します。 目次 コード 応用 コード htmlのコー ...

© 2022 サカらいふ Powered by AFFINGER5