中嶋悟
名前：中嶋 悟（なかじま さとる） ニックネーム：サトルン 年齢：28歳 性別：男性 職業：会社員（IT系メーカー・マーケティング部門） 通勤場所：東京都千代田区・本社オフィス 通勤時間：片道約45分（電車＋徒歩） 居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション 出身地：神奈川県横浜市 身長：175cm 血液型：A型 誕生日：1997年5月12日 趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中） 性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ 1日（平日）のタイムスケジュール 6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック 7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理 8:00 出勤準備 8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット） 9:15 出社。午前は資料作成やメール返信 12:00 ランチはオフィス近くの定食屋かカフェ 13:00 午後は会議やマーケティング企画立案、データ分析 18:00 退社 19:00 帰宅途中にスーパー寄って買い物 19:30 夕食＆YouTubeやNetflixでリラックスタイム 21:00 ブログ執筆や写真編集、次の記事の構成作成 23:00 読書（比較記事のネタ探しも兼ねる） 23:45 就寝準備 24:00 就寝
はじめに：flexとinline-flexの基本を押さえる
flexとinline-flexは、ウェブ制作で基本となる「フレックスボックス」という仕組みの要素です。flexはブロックレベルのボックスとして機能し、周囲の要素を自動的に改行して広がります。対して、inline-flexはインラインレベルのボックスで、隣接するテキストや要素と同じ行の中に収まる性質があります。この違いを理解すると、ナビゲーションバーを横長に広げたいときと、アイコン群を自然に並べたいときで、それぞれ適切な挙動を選びやすくなります。
実務では、この2つを使い分けるだけで、余計なマージンを増やさずに美しいレイアウトを作れます。flexを使うときは親要素の幅を意識し、inline-flexを使うときは周囲の文章との調和を意識すると良いでしょう。HTMLの構造を変えずに見た目を大きく変えられるのも大きな利点です。
flexとinline-flexの違いを使い分けるポイントと使い方のコツ
ここでは、現場で迷いやすいポイントを3つ挙げて解説します。ポイント1：周囲の流れとの関係。ブロック要素としてのflexは、親ボックスが横幅いっぱいを使い、次の要素を自動的に下に押し出します。一方、inline-flexはテキストと同じ行に並ぶことが多く、文章の中にボタン群を自然に混ぜたいときや、横並びのアイコンを小さくまとめたいときに適しています。これにより、ページ全体の流れを崩さず美しく整います。
ポイント2：サイズと幅の扱い。flexは横幅を広げやすく、アイテムの並びを均等に整えるのに強いです。inline-flexは行内に収まり、周囲のテキストとのバランスを崩しにくい性質があります。この違いを理解すると、見た目と機能の両立がしやすくなります。実務では、ナビゲーションの項目を横並びにしつつ、長いメニュー名がある場合にはflexを使って折り返しを管理する、一方で小さなボタン群はinline-flexで周囲のテキストと自然に並べる、という使い分けが有効です。
ポイント3つの回を簡潔にまとめると、①周囲の流れをどう扱うか、②アイテムの並びと配置の自由度、③実務での保守性と拡張性です。flexは大きな枠組みを作るのに強く、inline-flexは本文と混ざる微細な並びに強いという性質を覚えておくと実践で迷いにくいです。
昼休みに友人と技術の話をしていて、inline-flexの話題が出ました。友人は『inline-flexは本文の中で使うと自然に横並びになるよ』と言い、それを聞いた私は『本当に小さなスペースでの並びを崩さないのが強みなんだね』と納得しました。実はinline-flexは文章のリズムに合わせやすく、UIの一部として使いやすいのです。私はこの考えを元に、デザイン案を練るときにflexとinline-flexの使い分けを意識するようになりました。結局、実用的なコツは「周囲の要素との協調」「空間の使い方」「将来の拡張性」を見据えることです。
ITの人気記事
