制作実績お見積フォームHTMLWordPressEC累計コーディング数:15028ページホーム>Web制作>CSS3のカラムを調整する方法(column-gap、column-rule)CSS3のカラムを調整する方法(column-gap、column-rule)Web制作2016年08月05日CSS3のプロパティについて解説する連載記事です。以前の記事で、columnプロパティを使って段組を指定する方法についてご紹介しました。段組の数と幅を指定する方法について解説しましたが、今回ご紹介するプロパティを使うことでカラムの詳細を指定することができます。本稿ではcolumn-gapとcolumn-ruleを使って、段組のスタイルをカスタマイズしていきましょう。columns-gapの指定方法columns-gapから見ていきましょう。カラムの間隔は、下のように記述して指定します。カラムの間隔;「カラムの間隔」を値で指定するのですが、初期値はnormal(1.0em)となっています。column-gapの具体例column-gapを使った具体例です。normal「カラムの間隔」にnormalを指定した場合です。25px「カラムの間隔」に25pxを指定した場合です。50px「カラムの間隔」に50pxを指定した場合です。次は、カラム間に区切り線を表現することができるcolumns-ruleです。指定方法は下記の通り。(区切り線の色);column-ruleは、column-rule-widthとcolumn-rule-style、column-rule-colorの3つを合わせたプロパティです。指定できる値について、下にまとめておきましょう。区切り線の幅を数値で指定します(初期値はmedium)。column-rule-widthでも指定可能。区切り線のスタイル区切り線のスタイルを指定します(初期値はnone)。column-rule-styleでも指定可能。区切り線の色を指定します(初期値はcolorプロパティの値)column-rule-colorでも指定可能。「区切り線のスタイル(column-rule-style)」で指定できる値は下記の通りです。none(初期値)hiddensoliddoublegrooveridgeinsetoutsetdasheddottedcolumn-ruleの具体例column-ruleの具体例を見ていきましょう。「区切り線のスタイル」にdoubleを指定した場合です。「区切り線のスタイル」にdottedを指定した場合です。「区切り線のスタイル」にnormalが指定してあると、幅や色が指定してあっても区切り線が表示されません。#777777;あとがきCSS3のcolumn-gapとcolumn-ruleプロパティの使い方と具体例についてご紹介しました。columnsプロパティと合わせて、上手に使っていきましょう。今すぐ無料で見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。今すぐ無料でお見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。