ホームページ制作のサポートチャンネル『じおちゃん』IT・ホームページ・制作用素材の情報サイトニュースホームページ制作フリー写真素材マーケティングITjQuery・cssスマホアプリ息抜きホームhtmlレイアウト調整はfloatじゃなくてこれからはCSS3のFlexboxを使って時短化!2016.08.23htmlGeoDesignレイアウト調整はfloatじゃなくてこれからはCSS3のFlexboxを使って時短化!ツイートシェアGoogle+はてブPocketCSSレイアウトでカラムを作る時、floatを使って調整していると思います。これからはfloatを使う機会が激減してくるかもしれません。新しいCSS3の要素でflexboxというプロパティが発表されています。どのように使えるか、基本となる部分のみを解説していきたいと思います。対応しているブラウザflexboxとは?IE10の開発者ガイドでの説明を引用するとこんな感じです。ウィンドウのサイズがさまざまに変化する場合にも要素の相対的な位置とサイズを一定に保つ場合に、特に役立ちます。位置とサイズを正しく設定するのが難しいフロートへの依存を軽減できます。floatでのレイアウトを軽減して簡単にレイアウトできるようにしよう!というのが主たる目的のようですね。Flexboxの基本概念Flexboxコンテナ(親要素)Flexboxモデルを使う為には、コンテナーを用意する必要があります。用意と言っても、コンテナ要素となるdivなりに「display:flex」と定義するだけで、Flexboxコンテナとして使うことが出来ます。このコンテナの中に入る要素は、下記で説明するFlexboxアイテムとなります。Flexboxアイテム(子要素)Flexboxコンテナ内に入る要素はFlexboxアイテムとなります。Flexboxアイテムになる要素は様々なプロパティが使用できるようになります。class=”flexbox”><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>1.flexboxコンテナを定義する親となる要素に下記のように定義しましょう。flex;}2.Flexboxの様々なプロパティflexboxには様々なプロパティがあるので、1つづつ紹介していきます。アイテムを左から右に配置するflex-derection:rowを定義することで、左から右に向けて要素を並べてくれます。*/flex-direction:row;}アイテムを右から左に配置するflex-derection:row-reverseを定義することで、右から左に向けて要素を並べてくれます。*/flex-direction:row-reverse;}アイテムを上から下に配置するflex-derection:columnを定義することで、上から下に向けて要素を並べてくれます。center;を定義することで、中央に要素を並べてくれます。space-between;を定義することで、均等に要素を並べてくれます。上で紹介したプロパティ以外にも、高さを統一してくれるプロパティや要素からはみ出した要素を制御するプロパティなど、多くあります。対応しているブラウザ対応しているブラウザは、下記のブラウザのバージョンで対応しています。4.4以上のバージョン3年程前から、話題になりはじめていたFlexboxですが、対応しているブラウザと使われているブラウザに開きがあったため、なかなか普及しませんでしたが、今はほぼブラウザが対応しているのでFlexboxが使われる事が多くなってくるのではと思います。いいねしよう!最新記事をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。上に表示された文字を入力してください。WordPressで、人気がある記事をランキング形式で表示したいお問い合わせのURLが完了ページまで同じだけどアナリティクスで遷移計測する方法!RECOMMENDこちらの記事も人気です。Fontの使い方〜指定方法jQuery・css2014.10.29スタイルシートを使って背景画像をフルスクリーンで表示する。html2015.8.21WordPressで使うイメージをレスポンシブにする方法ABOUTこの記事をかいた人GeoDesignホームページは、情報収集が得意なメディアです。集めたデータを活用することで、ホームページの改善だけではなく、リアルマーケティングや、新商品開発に発展するまでにできるのです。成果の見えるホームページを運用したい。デジタルマーケッターになれる広報担当者を育成したい。自社メディアでブランド力の強化と、顧客創造を図りたい。こんな欲求をかかえるあなた。したらウェブサイトから成果が上がるのかわからない簡単に運用できるシステム、時間ロス・コストロスを減らしたいこんな悩みをかかえるあなた。二等辺三角形を書く方法色々。写真をコミック風(漫画)イラストに加工したい!さらに+αも。