【第12回】プログラミング初心者向けCSS3講座【マルチカラムについて】

こんにちは、はるおです。これからHTMLとセットで使用される言語、CSS講座を始めます。CSSはHTMLで構成された文章を装飾する(文字色、文字サイズ、位置など)ための言語です。今回の記事から数回にわたって、現バージョンのCSS3について初心者向けに解説していこうと思います。

【HMTL5講座】

【第0回】プログラミング初心者向けHTML5講座

  

 

【前回記事】

【第11回】プログラミング初心者向けCSS3講座【トランジション】

  

【次回記事】

次回記事を更新し次第リンクを貼っておきます。

本記事では、下記の内容を解説します。

 

 

 

○この記事でわかること

・マルチカラムについてわかる

  

この記事を書いている僕は、プログラミング学習歴8ヶ月。

基礎学習が終わり、最近はLP作成などの実績も少しずつ出してきております。

 

 

また、Twiiterも最近始めたのでこちらの方もフォローしていただけると嬉しいです。

 

Twitterアカウント @clearyou66

 

マルチカラムについて

 

 

 

columnとは、長文のテキストをブロック化して、複数に分けることができる部分となります。

 

column-count

マルチカラムにするテキストのグループ数を指定することができるプロパティとなります。指定方法は簡単で、数値を指定するかもしくは「auto」を指定するといった形になります。指定方法は以下の通りです。

 

column-count:

数値; 数値に指定した分だけグループを生成します。

auto; グループ数を自動的に計算して、生成します。

 

 

column-width

マルチカラムにするテキストグループの、各グループの幅を指定します。指定方法はcolumn-countと同じで、数値を指定するかもしくは「auto」を指定するといった形になります。指定方法は以下の通りです。

 

column-width:

数値; 数値に指定した分だけグループを生成します。

auto; グループ数を自動的に計算して、生成します。

 

 

columns

column-countと、column-widthを一緒に指定することができる、一括指定プロパティとなります。

 

columns: width count;

 

column-gap

マルチカラムのグループ間のスペースの広さを指定することができるプロパティとなります。また、グループの間に枠線が指定されている場合には、その枠線をちょうど良く中央に配置します。指定方法は以下の通りです。

 

column-gap:

数値; マルチカラムのグループ間のスペースの広さを指定します。

normal; ブラウザによる、標準のスペースを設けます。おすすめは1emです。

 

 

column-rule

上記でマルチカラムのグループ間に枠線があると言いましたが、こちらはその枠線の種類や幅、色などをまとめて指定するためのプロパティとなります。使用方法は以下の通りです。

 

column-rule: 枠線の太さ 枠線の種類 枠線の色;

 

また、それぞれ個別に指定していく場合の指定方法は以下に書いていきます。

 

column-rule-width

マルチカラムのグループ間の枠線の幅を指定します。指定方法については以下の通りです。

 

column-rule-width: ○px; 枠線の太さを指定します。

 

column-rule-style

マルチカラムのグループ間の枠線の種類を指定します。指定方法については以下の通りです。

 

column-rule-style:

none; 非表示。

hidden; 非表示ですが、他の線と被るときはこちらが優先されます。

dotted; 点線で表示します。

dashed; 破線で表示します。

solid; 実線で表示します。こちらは一番よくみる普通の直線です。

double; 二重線で表示します。

groove; 線がくぼんで見えるような表示をします。

ridge; 線が飛び出て見えるような表示をします。

inset; 領域自体がくぼんで見えるような表示をします。

outset; 領域自体が飛び出て見えるような表示をします。

 

ちなみにこれらの指定方法は以前の講座でやったborder-styleと同じですね。

 

column-rule-color

マルチカラムのグループ間の枠線の色を指定します。指定方法については以下の通りです。

 

column-rule-color: #色の指定; 枠線の色を指定します。

 

 

column-span

マルチカラムに対して、タイトルをつけたいとき、その要素がすべてのグループをまたいで表示させるかどうかを指定することができるプロパティとなります。指定方法については以下の通りです。

 

column-span:

none; 初期値となります。グループをまたぎません。

auto; すべてのグループをまたいで表示します。

 

 

column-fill

マルチカラムの各グループの行数に関する機能を指定します。これは、マルチカラムに高さが指定されている場合や、画像表示などにより最低限の高さが決められているときなどに使用すると便利です。使用方法は以下の通りです。

 

column-fill:

balance;

全てのグループが同じ行数になるようにテキストを調節します。ページ媒体では最後のページだけが調節されます。

balance-all;

全てのグループが同じ行数になるようにテキストを調節します。ページ媒体では全ページが調節されます。

auto; 先頭のグループから順に、高さを満たすまで詰め込みます。

 

 

 

今回の宿題

 

今日の内容に関連のある簡単な宿題を出しますので、次回の講座までにやっておきましょう。

 

宿題:マルチカラムを用いて、文章をグループ化してみよう。

 

ということで第12回のCSS3講座を終わります。

 

 

 

エディタについてはこちらの記事で説明しているので参考までにどうぞ。

【初心者必見】最強におすすめのエディタ「Atom」について徹底解説

 

 

僕の失敗=駆け出しエンジニア(プログラミング初心者)の失敗 だと思うので、僕の失敗談はすべてこれからの駆け出しエンジニアたちに還元していきたいというスタンスです。

 

また、本記事は超初心者向けに解説しているため、難しい単語や不要な説明は省略させていただいております。わからないことがあればコメント欄にて気軽にご質問ください。

 

僕のプロフィールついては以下の記事にまとめてありますので、時間がある方は見ていっていただけると嬉しいです。

 

 

WordPressで記事投稿をする方法を自己紹介で学習する【初投稿】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です