Hatena Blog Tags
はてなブログ トップ
Flexbox
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

Flexbox

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
月影•2ヶ月前

【CSS入門】Flexboxの使い方を完全解説！display: flex;の仕組みと具体例

第6章：モダンなレイアウトを実現するFlexbox かつてのWeb制作では、要素を横に並べるために「float」というプロパティを使っていましたが、今やその手法は不要です。現代の標準は、より直感的で強力な「Flexbox」。これを使えば、複雑なレイアウトも数行のコードで実現できます。 Flexboxの基本概念：コンテナとアイテム Flexboxを使いこなすための第一歩は、親子関係を理解することです。Flexboxは、以下の2つの要素で構成されます。 Flexコンテナ（親要素）： 外側の箱。ここに「並べ方」の命令を出します。 Flexアイテム（子要素）： 中身の箱。親の命令に従って並びます。 1…

#HTML#CSS#Flexbox

関連ブログ

OPTiM TECH BLOG•5ヶ月前

レイアウト構築の基本を理解しよう ~ 横スクロールが起きない！？ Flex脱却編 ~

はじめまして！ DXビジネス開発部の澤です。普段は医療系プロダクトのPjMやエンジニアまた技術広報として活動しています。 本記事は、OPTiM TECH BLOG Advent Calendar 2025 Day 1 の記事です！ 11月30日に開催されたフロントエンドカンファレンス関西で「レイアウト構築の基本を理解しよう ~ 横スクロールが起きない！？ Flex脱却編 ~ 」というタイトルで5分間のLTをさせていただきました。本記事では、発表で時間の都合上触れられなかった背景や詳細な解説も含めてお伝えします。 はじめに フロントエンド開発で、こんな経験はありませんか？ overflow: a…

#frontend#HTML#CSS#Flexbox#Advent Calendar 2025
月影•6ヶ月前

CSS Flexboxの使い方解説：justify-contentとalign-items

CSSレイアウトの決定版！Flexboxで「横並び」を自在に操る CSSでレイアウトを組むとき、特に「要素を横並びにする」のに苦労した経験はありませんか？ かつてのCSSレイアウトは、floatプロパティなどを使って要素を横並びにするのが一般的でしたが、これらは本来レイアウトのために設計されたものではありませんでした。そのため、しばしば複雑で予期せぬ挙動（例：親要素の高さがなくなる）を引き起こす「ハック」的な手法に頼る必要がありました。 こうした問題をすべて解決するために登場したのが、Flexbox（Flexible Box Layout Module）です。Flexboxは、要素を一行（また…

#CSS#Flexbox#カードレイアウト
dorapon2000’s diary•1年前

左右を固定幅の要素に挟まれた可変幅の要素の長い文字列を省略したい

この記事は巷であふれている「flex: 1; + text-overflow: ellipsis; の組み合わせが罠だから min-width: 0; をつけよ」という記事になります。 それを知った今検索すると、嫌でも目に付く内容なのですが、実装しているときはまったく気づくことができず沼っていました。 作りたい対象をタイトルにして、自分も記録に残します。 この記事中のソースコードは GitHub にあげています。 github.com 実現したい UI 最終的なコード <!-- index.html --> <div class="element"> <div class="left-cont…

#CSS#Flexbox
主婦のスキマ学び日記•1年前

Webレイアウトに使う「float」「flexbox」「grid」の違い

WEB制作の学習中でflexboxがよく分からない…floatとの違いは何？grid難しい！ そうなっていませんか？私も難しいと感じたので、色々調べました。 この記事ではこの3つのWEBレイアウトに使用する手法の違いについてまとめています。 float: 文章の回り込み用 flexbox: 1次元のレイアウトに最適 grid: 2次元のレイアウトに最適 まとめ float: 文章の回り込み用 「float」は、元々テキストの回り込みを作るために作られたプロパティです。画像をテキストの左側や右側に配置するような用途が得意ですが、レイアウト全体に使うのは少し難しいです。 主に回り込み（文章と画像を…

#プログラミング#float#grid
Zenet Tech Blog•2年前

初心者でも簡単に横並び！flexboxでHTMLブロック要素の配置

はじめに 解決方法 中央寄せ 左寄せ 右寄せ 活用編 おわりに 参考記事 はじめに 皆様、はじめまして。株式会社ゼネットの方です。 新人研修の中で、HTMLレイアウトの横並びに苦戦しましたが、その解決方法について簡単にご紹介いたします。 この記事が皆様のお役に立てれば幸いです。 環境：Eclipse 2018 Windows 64bit 解決方法 （結論）私も以前、floatやinline-blockなどさまざまな方法を試しましたが、最終的にはflexboxを使うことで問題を解決しました。 flexboxを使うことで、親要素と子要素の関係を理解しやすく、コードもシンプルになります。また、fle…

#HTML5#Flexbox
漂うマークアップエンジニア•4年前

オジサン、CSSで要素を横並びにする方法について色々と考察する

HTMLコーダー諸兄は要素の横並びをCSSでスタイリングする場合、どうされているだろうか。 フロート？フレックスボックス？グリッド？ 今年でIE11のサポートが終了し、よりモダンなCSSで案件対応ができるようになった2022年、改めて要素を横並びにする方法について考察してみたい。 ちなみにオジサンがHTMLコーダード新人の頃はtableタグを使う方法が主流であった。SEO対策でサマリー属性にキーワード仕込んだり、余白調整で透明gif画像を使ったりしていたのである。メルマガ等では最近まで使われていたようだ。閑話休題。 さて、以下のデザインカンプを見ていただきたい。 デザインカンプと呼べるかどうか…

#HTMLコーディング#CSS#HTMLコーディング初心者
フリーランス　技術調査ブログ•5年前

tailwindcssのflexboxのレイアウトを触ってみる

参考ページ tailwindcss.com 記事一覧を作ってみる <section class="mt-16"> <h2 class="text-center mt-8 mb-8">記事一覧</h2> <div class="flex justify-center space-x-16 ml-4 mr-4"> <div class="w-1/4 border"> <img src="image1.jpg" class="w-96"> <h3 class="p-2 text-center">タイトル</h3> <p class="p-4">ここに文章が入ります。ここに文章が入ります。ここに文章が…

#tailwindcss
たけるのプログラミング•5年前

GitHub Pagesを使ってみた！

結構前にherokuを使ったことがあり、同じことができるサービスないかなとネットをみていたら「GitHub Pages」というサービスがあったので使ってみました。無料で静的サイトを公開することができ、JavaScriptも動作するようです。自分ははてなブログに来る前、独自ドメイン&レンタルサーバーでサイトを運営していたので、このサービスが無料であることが驚きです。 作ったサイト shota232423.github.ioNBAオタクの私が、オススメのNBAプレイヤーを紹介しているサイトです。CSSのFlexboxが便利すぎました。 webdesign-trends.net 使い方で参考になるサ…

#GitHub Pages