Flexboxでサクッと作る！いまどきのメガメニューのマークアップ
Webサイトを効率よくレイアウトできるFlexbox。メガメニューの実装を例に、具体的な活用方法を紹介します。 ご存じの方もいるとおり、Flexboxはブラウザーサポートが増えて、はずみがついています。Flexboxなら、使いたくないCSSやJavaScriptハックを扱わずに、複雑なユーザーインターフェイスを作れます。 Flexboxはリニアレイアウトモデルを採用しており、スペースの計算をせずにコンテンツを上下左右にレイアウトできます。Flexレイアウトはコンテナ内の要素にレスポンシブに反応するので、メディアクエリの使用を減らせます。 この記事では、リニアレイアウトモデルを使い、メガナビゲーションメニューを作ります。メニューを作る中で、Flexboxでユーザーインターフェイスコンポーネントを簡単に作成し、拡張できることを体験してください。 Flexboxの特徴を詳しく解説するのではなく、
いまさら聞けないCSSレイアウトの定番手法 Flexbox再入門
floatレイアウトはすでに過去のもの。Webサイトの要素の位置を操作するならFlexboxが定番となりました。出遅れたWeb制作者のために基本を解説します。 テーブルタグが唯一のWebページをレイアウトする手法だった頃を覚えていますか？ 表形式のデータを表示するための機能をレイアウトに無理やり使っていたので、タグ名の意味と用途が異なるひどい状態でした。新しい「道具」が必要になり、「正しい」レイアウト方法としてfloatと絶対位置指定による手法が登場しました。 しかしテーブルタグ同様、floatと絶対位置指定の目的はWebサイトを整形することではありません。 主要ブラウザーがCSSで機能する頼れるレイアウトエンジン、CSSグリッドレイアウトをサポートしました。非対応のブラウザーに対する互換措置をすれば十分使えます。 互換性確保の方法は、Flexboxベースのレイアウト（W3Cが好む言い方だ
[CSS]超簡単！Flexboxでグリッドを実装する時のベースになるスタイルシート -Fukol Grids
レスポンシブに完全対応、でも面倒なブレイクポイントの設定は必要なし、すべてのブラウザを配慮したプログレッシブエンハンスメントを取り入れ、Flexboxでグリッドを実装するスタイルシートを紹介します。 ファイルサイズはわずか93bytesで超軽量、シンプルなHTMLを使って汎用性のある柔軟なグリッドを簡単に利用できます。 Flexboxを初めて導入する人も、Flexboxをガンガン使ってる人も必見です。
![[CSS]超簡単！Flexboxでグリッドを実装する時のベースになるスタイルシート -Fukol Grids](https://cdn-ak-scissors.b.st-hatena.com/image/square/c239c7907de522412302ac8e9636e3d49e91a6f2/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016103101.png)
Flexboxを使ってレスポンシブ対応の「前の記事」「次の記事」リンクを実装
2016年9月21日 CSS, Wordpress ブログ等の個別記事でよく見かける、「前の記事」「次の記事」へのリンク。これまでも実装方法やスタイリング方法は紹介されてきましたが、Flexboxを使ったらもっと楽に作れちゃうよ！ということで、その方法と、ついでにWordPressでの実装方法も紹介します。 ↑私が10年以上利用している会計ソフト！ 1. モバイル用リンクを作成 まずは小さい画面用のリンクを作成します。「モバイルファースト」と呼ばれる手法ですね。前の記事のリンクを上に、次の記事のリンクを下に並べて表示します。ここでは特に込み入った事はしないので、簡単に実装できるはずです。 HTML <div class="prev-next-link"> <a class="prev-link" href="#"> <p class="prev-next-label">前の記事</p> <
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://coliss.com/articles/build-websites/operation/css/learned-reading-the-flexbox-spec.html