gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSSのgapプロパティーでも余白を指定できます。CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウで再生する なお、この記事では要素間の空白部分のことをmarginの訳語としての「余白」との混乱を避けるため、「アキ」と呼ぶことにします。この記事内だけの用法です。 gapプロパティーの使い方 gapプロパティーはFlexbo
Flexboxで画像や要素が小さくなる(潰れる)時の対処方法！ | 模写修行メディア
例えば、画像の幅を100pxに指定しているのに、100pxより小さく表示されてしまうケースです。 <div class="user-voice"> <div class="user-voice-icon"> <img src="img/user-voice-icon.png" width="500" height="500" alt="..." /> </div> <p class="user-voice-text">テキスト...</p> </div> .user-voice { display: flex; } .user-voice-icon { width: 100px; flex-shrink: 0; /* これで小さくならない */ } user-voice-iconに100pxだけを指定しても、user-voice-textの文章が長いと、画像が小さく表示されてしまいます。
CSS GridとFlexboxの使い分け | 第1回 テキスト量が変化する要素を並べる
CSS GridとFlexboxの使い分け 第1回 テキスト量が変化する要素を並べる いくつかの実務でよく扱う特徴的なレイアウトをCSS GridとFlexboxの両方で作り、使い分けるための勘所を身に付けましょう。1回目はテキスト量が変化する要素を並べるレイアウトを取り上げます。 はじめに 2020年現在、CSS Gridはすでに多くのブラウザで利用できるようになっています。そうなったことで、CSS GridやFlexboxをどう使い分けたらよいのかと悩んでいる方を見かけることがあります。筆者は、過去に何度かCSS GridやFlexboxに関する記事を書いています。そして実務でもCSS GridとFlexboxを使う機会が多くあります。 本記事では、これまでの筆者の経験をもとに、どのようにCSS GridとFlexboxを使い分けているのかを解説します。 なお、記事がフォーカスするのは
【Flexbox】孫要素まで高さを揃える方法と、うまく行かない時の対処法（追記あり）｜あたおか
Wordpress等で記事の一覧をFlexboxで横並びにすることはよくあると思います。 デザインカンプなどでは「良い感じ」の文字量で作られていることが多いので気にならなくとも、実際に運用が始まった後に「記事毎にタイトルの長さが違っているので高さが揃わず気持ち悪い」ということはよくあると思います。 自分でも良く忘れるのでので、備忘録も兼ねて。 完成形まず、目指すべき完成形はこんな感じです。 分かりやすいようにタイトル部分に背景色を付けましたが、タイトル部分の高さが揃っているのでボタンの位置もそろっており、細かいことを言ってくるクライアントやディレクターも満足してくれるでしょう。 このタイトル部分の高さが記事によって異なることで良く陥りがちなレイアウト崩れがこちら。 タイトル行くらいであれば1行～2行で収まるのでそこまで気にならないかもしれませんが、例えば商品説明などが入る場合は参考画像の比
🐛よくハマったFlexboxのバグまとめ｜たかもそ／Web Creator.
Flexbox はレイアウトを組むのに非常に便利ですが、バグがとても多いことでも有名です。最新のブラウザでも次々と新しいバグが報告されており、すベてを紹介するのは大変なので、自分がよくハマったバグをまとめます。 なお、ベンダープレフィックスは省略しているので注意してください。 flex-flow: column wrap; がはみ出るdisplay プロパティに inline-flex を指定していたり、position プロパティに absolute を指定して絶対配置している場合、flex-flow プロパティに column wrap を指定すると Flex コンテナからはみ出てしまいます。 バグが発生するブラウザ ・Chromium Edge ・Firefox ・Chrome ・Safari ・Opera ・iOS Safari ・Android 30 以降 <div class=
Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用
Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います！ これからの CSS レイアウトは Flexbox で決まり！ Flexbox 対応ブラウザー前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari 用に -webkit- のベンダープレフィックスが必要です。IE については 11 から正式に対応。 そしておなじみの日本でのブラウザーシェア情報。2015 年 7 月では IE11 が 32.86%でトップです。Flexbox に対応していない IE9 は 3.17%。制作するサイトに応じて Flexbox を取り入れるか検討しましょう。 2 カラム一番基本的な Web サイトのレイアウトである、2
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf
flexboxでリキッドレイアウト（固定＋可変）にする方法
flexboxでリキッドレイアウト（固定＋可変）にする方法 このエントリーでは、flexboxでリキッドレイアウトを表現する方法をお伝えします。可変カラム＋固定カラムが横並びになるレイアウトにするとき使えるスタイルです。 リキッドレイアウトとは リキッドレイアウトは、可変カラムと固定カラム構成の名称です。ブラウザのサイズやデバイスの違いを柔軟に表示する概念です。 2カラム、あるいは3カラム構成からなるレイアウトが一般に見られるのではないでしょうか。 たとえば、サイドメニューが固定幅で、メインコンテンツが可変幅などが代表的です。 flexboxのリキッドレイアウトが使えるケース レスポンシブデザインに最適固定、可変する要素があるときフォームのラベルと入力要素が並ぶとき 使い方（2カラム） 2カラムレイアウトを例にHTML/CSSを記述します。各々のレイアウトに置き換えてご覧ください。 <di
【CSS入門】flexboxの基本と使い方をプロがわかりやすく解説！ ｜東京のWeb制作会社｜株式会社クーシー
デザインカンプの見た目通りのWebサイトを作成しても、テキスト量や要素の増加によってレイアウトが崩れることがあります。 「再現度を保ちつつ、レイアウトの崩れない柔軟なサイトを作成することはできないのでしょうか？」 そんなお悩みを今回はCSSプロパティのFlexbox（フレックスボックス）を用いて解決していきます。 Flexboxはレイアウトの設定によく用いられるfloatに比べて、横並び/センター揃え/等間隔配列など、行と列を同時に制御することができる優れもの。 以前まではブラウザによって挙動が違ったりサポートしていなかったりとクロスブラウザによる問題がありましたが、最近ではサポートが進み安定して使用できるようになりました。これから利用頻度が上がっていくだろうFlexboxについて実例を交えてご紹介します。 Flexboxの基本 まず基本の設定からです。 Flexboxコンテナー(親要素)
CSSだけでサイドバーを固定・スクロール追従する方法（JavaScript不要）
実装方法 まずはHTML。 <div class="container"> <main class="main"> <!-- メインコンテンツ --> </main> <div class="sidebar"> <div class="sidebar__item"> <!-- 中身 --> </div> <div class="sidebar__item sidebar__item--fixed"> <!-- 固定・追従させたいエリア --> </div> </div> </div> お次は、CSS。 .container { width: 1000px; display: -webkit-flex; display: flex; } .main { display: block; width: 660px; margin-right: 20px; } .sidebar { width:
Flexboxで作るマルチカラムレイアウト【marginで余白を固定】 ｜ B-side Journal
Flexboxを使ったマルチカラムレイアウトを作る場合、カラム間に「justify-content: space-between;」で均等に余白を空ける方法がありますが、 今回は、あえて「justify-content: space-between;」を使わずに、marginを使ってpx固定の余白を入れた場合のコードを説明していきます。 こんな感じのマルチカラムレイアウトを作ります。 ↓ index.html <section id="card"> <div class="card__contents"> <article class="card__block"> <div><img src="images/card-img-01.jpg" alt=""></div> <h3>タイトル１</h3> <div> Lorem ipsum dolor sit amet, consectetur
floatやflexbox（display:flex）のリセット レスポンシブデザインの主な解除方法
レスポンシブWebデザインでサイト制作を行った場合、PCページに設定したCSSを解除しないとスマートフォンページでうまく表示できない場合があります。 主な解除方法や設定方法をメモします。 width 幅の指定スマートフォンページで横幅がはみ出している場合やブロック内におさまらない場合は、PCページの横幅指定が効いている可能性があります。 その場合は、横幅を100％に設定します。 width:100%;それでも、横幅がボックスはみ出てしまう場合は、 width:94%; のように、100％より値を小さくして調整できるか確認します。 親ボックスからはみ出てしまう場合は、box-sizingも有効な場合があります。 box-sizing: border-box;はみ出る場合は、こちらも試してみましょう。 height 高さの指定PCページで高さを指定している場合、スマートフォンページで、高さの設
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
flexbox-cheat.site
dl要素をtableのような段組レイアウトにする - 25egg：Webデザイナー備忘録