Flexboxはご存知でしょうか。
Fexboxはサイズが動的なデータの場合でも、コンテナー内のより効率的なレイアウト、配置、およびアイテムとスペースの分配の提供を目的としています。Flexboxは柔軟性があり、フロートやpositionを使用せずにレスポンシブレイアウトを簡単に設計できます。
など、FexboxならPhotoshopから画像を書き出す際に起こりがちな問題を解決することができますよ。
これらに当てはまる方におすすめの記事となっています。これを読めばFlexboxの使い方や概要を知ることができます。
これはCSS3のモジュールの一つであり、あらゆるデバイスに表示され、柔軟に直感的なレイアウトを作成できるよう、内部要素を自動的にスケーリングするWebレイアウトモデルです。
Flexboxは、サイズや距離も含めて、コンテナーのアイテムを均等に分散する方法をコンテナーに決定させます。
Flexboxは多くのサイトにて利用されています（ Bootstrap3のfloatに代わり、Bootstrap4もFlexboxを利用してグリッドシステムを構築しています）。
Flexboxは、純粋なCSSの問題を取り除くのに役に立つことが見込まれています。ただし、この新しいモデルを慣れるのは簡単なことではありません。
Flexboxについて詳しく説明する前に、Flexboxの構造を簡単に確認する必要があります。 以下にはFlexboxの構造図です。
Flexbox構造には、コンテナーとアイテムの2つのコンポーネントがあります。
内部の要素を囲む大きなコンポーネントです
コンテナーの子要素はアイテムと呼ばれます。
アイテムでは、コンテナーで使用する列の数を設定したり、表示順序を設定したりできます。
Flexbox構造の中では、以下にいくつか概念を理解する必要があります。
Flexboxを設定する際に、コンテナーの開始点はメインスタートで、終点はメインエンドと呼ばれます。
つまり、内部のアイテムはメインスタートからメインエンドまで表示されます（またはメインエンドまで表示できます）。
そして、その垂直寸法のクロススタート、クロスエンドは同じ意味ですが、常にメインスタート、メインエンドに垂直となります。
Main axisは、アイテムの表示方法を制御する主軸です。
Main sizeはmain axisに基づくアイテムのサイズです。
Main axisに似ているが、ain axisに垂直です。
cross axisに基づくアイテムのサイズです。
Flexboxコンテナーは最も外側の要素であり、内部に子アイテム（Flex items）を含みます。
この要素では、プロパティdisplay：flex：、またはdisplay：inline-flexを設定する必要となります。
そこでは、下記のプロパティを使用してFlex itemsのレイアウトを構成します。
row | row-reverse | column | column-reverse;main axisを設定します。デフォルトがrowであり、ほとんどの場合にはrowにします（フレックスアイテムが水平行にあります）。
nowrap | wrap | wrap-reverse; フレックスアイテムの幅を設定する時、この属性として、コンテナーの幅を超えた場合にフレックスアイテムを改行にするかどうかを指定します。
デフォルトは改行にします(nowrap)
Flex-flow は、上記の2つの属性を組み合わせたものです。
flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right … + safe | unsafe; main axis（主軸）に従ってフレックスアイテムの配置として設定されます。
stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + … safe | unsafe;cross axis（交差軸）に従ってフレックスアイテムの配置として設定されます。
flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + … safe | unsafe; cross axis（交差軸）に従ってフレックスアイテムの配置として設定されます。
親タグがFlexboxコンテナであるエレメントは、Flex itemsとして扱われます。
Flex itemsには、コンテナー内の独自のサイズと位置をカスタマイズできるように下記のプロパティがあります。
CSSのFlexboxは、floatを使用した通常のレイアウトを変える非常に便利なページレイアウトカスタマイズの1つであると言えます。
floatの不要な使用を最小限に抑えるため、サイトの小さな要素のレイアウトに適しています。
Mozilla Firefoxから推奨設定によると、Flexboxを使用して小さな領域（サイトのフレームなど）にレイアウトを設定します。
より大きなスケール（サイトの列など）にレイアウトを設定する際には、CSS Grid LayoutはCSSの中ですでに一番強力なイアウトシステムと言えます。これは2次元システムです。
つまり、一方向のシステムであるFlexboxとは異なり、列と行の両方を処理できます。
Flexboxの概要を紹介しました。 Flexboxは使いやすいと言えますが、習得するには多くの練習が必要です。
=> Flexboxを学ぶための楽しいゲームを皆さんに紹介します
dehaでは、５年ほど前から、ベトナムオフショア開発を行っています。
ベトナムでオフショア開発を行う際の費用や、エンジニアの質を知りたい方は、無料で見積もりいたしますので、お気軽にお問い合わせください。
長年運用されてきた基幹システムは、企業活動を支える重要な存在である一方で、技術的負債の蓄積、保守人材不足、クラウド対応の遅れ、ブラックボックス化など、さまざまな問題を引き起こしています。 従来のマイグレーションでは、既存システムの解析からコード変換、データ移行、テスト、カットオーバーまで、多くの工程を人手に依存していました。 こうした背景の中、注目を集めているのが「AIレガシーマイグレーション」です。 この記事ではAIレガシーマイグレーションについて、どんな特徴があるのかやその強みに着目をしていきたいと思います。 AIレガシーマイグレーションが気になる方 製造業の方 DXをすすめたい企業の方 これらに当てはまる方におすすめの記事となっています。これを読めばAIレガシーマイグレーションがどう言ったものかがわかるのはもちろん、DEHAのAIレガシーマイグレーションについてもわかりますよ。 (more…)
近年、企業のIT戦略やシステム開発において「AI Native（AIネイティブ）」という言葉が急速に注目を集めています。 この記事ではそんなAI Nativeについて、その概要やメリットなどを紹介していきます。 AI Nativeが気になる方 システム開発をお考えの方 社内にIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばAI Nativeが何かがわかるのはもちろん、導入するべき理由が丸わかりですよ。 (more…)
IFS Cloudは、スウェーデン発のグローバルERPパッケージであり、ERP、EAM（設備資産管理）、SM（サービス管理）を統合的に提供する統合プラットフォームです。 本日はそんなIFS Cloudについて主要モジュールを解説します。 IFS Cloudに興味がある方 ERPをお探しの方 製造業の方 これらに当てはまる方におすすめの記事となっています。これを読めばIFS Cloudについてわかるのはもちろん、IFS Cloudの強みまで丸わかりですよ。 (more…)
企業のDX推進が本格化する中で、ERP（基幹業務システム）の役割は単なる業務管理ツールから、経営基盤そのものへと変化しています。 その中で、世界的に注目されているクラウドERPが IFS とOracle Cloud ERPです。 どちらも世界トップクラスのERPとして高く評価されていますが、実際には設計思想や得意分野が大きく異なります。 IFS Cloudは「現場・設備・サービス」を重視したERPであり、製造業やインフラ産業との相性が非常に高いことで知られています。 一方のOracle Cloud ERPは、「財務・経営統制・グローバル管理」を重視したERPであり、多国籍企業や大企業における経営管理基盤として強みを発揮しています。 そのため、「どちらが優れているか」という単純な比較ではなく、「自社の業務や経営戦略にどちらが適しているか」を見極めることが重要になります。 この記事では、IFS CloudとOracle…
製造業や建設業、航空・防衛、エネルギー、サービス業など、複雑な業務を抱える企業にとって、ERPシステムは単なる基幹システムではなく、経営そのものを支えるインフラとなっています。 しかし近年、多くの企業で従来型ERPの限界が顕在化しています。そのような中で注目されているのが、クラウド型ERPへの移行です。 この記事では、「IFSクラウドへ移行すべき4つの理由」というテーマで、IFS Cloudがなぜ多くの企業に選ばれているのかを詳しく解説します。 IFSクラウドに興味がある方 製造業や建設業の方 従来型ERPをお使いの方 これらに当てはまる方におすすめの記事となっています。これを読めばIFSクラウドへ移行すべき理由がわかるだけでなく、経営改革の視点からIFS Cloudの価値を整理することができますよ。 (more…)
製造業を取り巻く環境は、ここ数年で大きく変化しています。原材料価格の高騰、サプライチェーンの不安定化、人手不足の深刻化、さらにはDXの加速など、企業にはこれまで以上に迅速かつ柔軟な意思決定が求められています。 こうした中で注目されているのが、企業の基幹業務を統合・最適化するERP（基幹業務システム）の再構築です。 その中で、多くの製造業が比較検討しているのが「IFS Cloud」と「SAP」です。いずれもグローバルで高い評価を受けているERPでありながら、その強みや設計思想は大きく異なります。 そのため、「どちらを選ぶべきか分からない」「自社に合うのはどちらなのか判断できない」といった悩みを抱える企業も少なくありません。 この記事では、そんなIFS CloudとSAPを「製造業」という視点から徹底比較し、それぞれの特徴や強み、導入時のポイントを分かりやすく解説します。 製造業の方 IFS CloudとSAPに興味がある方 グローバルERPの導入を検討している方 これらに当てはまる方におすすめの記事となっています。これを読めばIFS CloudとSAPの違いがわかるだけでなく、「どのような企業にどちらが適しているのか」がわかりますよ。 (more…)