WEB-RSS2.0ATOM1.0さすらいのWeb制作家、MAKOCHINがつづるブログサイト。Web制作に関する知識を備忘録的に書いているだけのサイトです。ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。ご興味のある方はどうぞ。さすらいのWeb制作家。Web制作の修行に勤しむ毎日を過ごす。【CSS3】カラムレイアウトTweetPocketCSS3で作成するカラムレイアウトをご紹介します。CSS3からdisplayプロパティに「box」という値が追加されました。displayプロパティにboxが指定されていると、その要素の子要素のレイアウトを指定することが出来ます。例として下図のような3段組のカラムレイアウトを作成してみます。id=&quot;rightColumn&quot;&gt;RIGHT&lt;/div&gt;&lt;/div&gt;(1)カラムレイアウトを適応させる領域を指定し、displayプロパティの値にboxを指定します。(2)box-ordinal-groupプロパティで子要素の並び順を指定します。デフォルトの並び順は左から右なので、その順番に数字を指定します。(3)box-flexプロパティで子要素が並ぶ場合の幅の比率を指定します。子要素の幅は、box-flexプロパティで指定された数値の合計値に対しての割合で割り当てられます。使用例ではidがcenterColumnの子要素に1と指定されているので、この子要素に割り当てられる幅は使える領域の100%となります。他の子要素はwidthプロパティで幅を指定していますので、親要素の幅からその分を引いた幅がidがcenterColumnの子要素が使える幅となります。上記の例のhtmlを実際にブラウザで表示させてみると、左右の幅は変わりませんが真ん中のbox-flexを指定したカラム幅は、画面幅により可変します。上記の例で紹介した以外にも、display:boxを指定した親要素と、その子要素に対してのレイアウトに関するプロパティは以下のようにもあります。cssコメントを残す返信をキャンセルする。