Bulma-column-layout-sizes
提供：Dev Guides
Bulma-列のレイアウトとサイズ
説明
Bulmaでは、コンテナに_column_クラスを追加することにより、列レイアウトを非常に簡単に構築できます。
_columns_コンテナー内に_column_クラスを追加して、以下の例に示すように、Webページに同じ幅の各列を作成します。
_ 注-コーディンググラウンド出力ウィンドウのサイズを変更して、ウィンドウサイズに応じて発生する変更を確認します。_
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Columns Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Column Layout
</span><br><br>
<div class = "columns">
<div class = "column">
<p class = "has-text-black has-background-info">First column</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info">Second column</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info">Third column</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info">Fourth column</p>
</div>
</div>
</div>
</section>
</body>
</html>次のように出力が表示されます-
列サイズ
Bulmaは、単一の列のサイズを変更するために次のクラスを提供します-
- 四分の三
- 3分の2です
- 半分です
- 三分の一 *四分の一
上記の列サイズを使用して簡単な例を作成しましょう-
* 注*-コーディンググラウンド出力ウィンドウのサイズを変更して、ウィンドウサイズに応じて発生する変更を確認します。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Columns Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Column Sizes
</span><br><br>
<div class = "columns">
<div class = "column is-three-quarters">
<p class = "has-text-black has-background-info">is-three-quarters</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-grey-lighter">Auto</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-grey-lighter">Auto</p>
</div>
</div>
<div class = "columns">
<div class = "column is-two-thirds">
<p class = "has-text-black has-background-info">is-two-thirds</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-grey-lighter">Auto</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-grey-lighter">Auto</p>
</div>
</div>
<div class = "columns">
<div class = "column is-half">
<p class = "has-text-black has-background-info">is-half</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-grey-lighter">Auto</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-grey-lighter">Auto</p>
</div>
</div>
<div class = "columns">
<div class = "column is-one-third">
<p class = "has-text-black has-background-info">is-one-third</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-grey-lighter">Auto</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-grey-lighter">Auto</p>
</div>
</div>
<div class = "columns">
<div class = "column is-one-quarter">
<p class = "has-text-black has-background-info">is-one-quarter</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-grey-lighter">Auto</p>
</div>
</div>
</div>
</section>
</body>
</html>次のように出力が表示されます-
12列システム
Bulmaは、コンテナ内で_12列_に分割されたレスポンシブグリッドシステムを提供します。
- is-2
- is-3
- is-4
- is-5
- is-6
- is-7
- is-8
- is-9
- is-10
- is-11 *is-12
以下の例は、上記の12列クラスの使用法を示しています-
* 注*-コーディンググラウンド出力ウィンドウのサイズを変更して、ウィンドウサイズに応じて発生する変更を確認します。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Columns Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
12 Columns System
</span><br><br>
<div class = "columns">
<div class = "column is-2">
<p class = "has-text-black has-background-info has-text-centered">is-2</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info has-text-centered">Remaining 10 columns</p>
</div>
</div>
<div class = "columns">
<div class = "column is-3 ">
<p class = "has-text-black has-background-info has-text-centered">is-3</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info has-text-centered">Remaining 9 columns</p>
</div>
</div>
<div class = "columns">
<div class = "column is-4 ">
<p class = "has-text-black has-background-info has-text-centered">is-4</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info has-text-centered">Remaining 8 columns</p>
</div>
</div>
<div class = "columns">
<div class = "column is-5 ">
<p class = "has-text-black has-background-info has-text-centered">is-5</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info has-text-centered">Remaining 7 columns</p>
</div>
</div>
<div class = "columns">
<div class = "column is-6 ">
<p class = "has-text-black has-background-info has-text-centered">is-6</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info has-text-centered">Remaining 6 columns</p>
</div>
</div>
<div class = "columns">
<div class = "column is-7 ">
<p class = "has-text-black has-background-info has-text-centered">is-7</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info has-text-centered">Remaining 5 columns</p>
</div>
</div>
<div class = "columns">
<div class = "column is-8 ">
<p class = "has-text-black has-background-info has-text-centered">is-8</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info has-text-centered">Remaining 4 columns</p>
</div>
</div>
<div class = "columns">
<div class = "column is-9 ">
<p class = "has-text-black has-background-info has-text-centered">is-9</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info has-text-centered">Remaining 3 columns</p>
</div>
</div>
<div class = "columns">
<div class = "column is-10 ">
<p class = "has-text-black has-background-info has-text-centered">is-10</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info has-text-centered">Remaining 2 columns</p>
</div>
</div>
<div class = "columns">
<div class = "column is-11 ">
<p class = "has-text-black has-background-info has-text-centered">is-11</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info has-text-centered"> Remaining 1 column</p>
</div>
</div>
</div>
</section>
</body>
</html>次のように出力が表示されます-
オフセットと狭い列
Bulmaは、レスポンシブグリッドシステムの要素の間隔を調整するためのオフセットクラスを提供します。 offetを_.is-offet-x_として使用できます。xは列クラスの名前であり、_is-narrow_修飾子を使用して狭い列を使用してコンテナー内の必要なスペースを取得します。
オフセット（_is-offset_クラスを使用）およびナロー（_is-narrow_クラスを使用）列を使用して簡単な例を作成しましょう-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Columns Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Offset
</span><br><br>
<div class = "columns is-mobile">
<div class = "column is-half is-offset-one-quarter">
<p class = "has-text-black has-background-info has-text-centered">is-half is-offset-one-quarter</p>
</div>
</div>
<div class = "columns is-mobile">
<div class = "column is-three-fifths is-offset-one-fifth">
<p class = "has-text-black has-background-info has-text-centered">is-three-fifths is-offset-one-fifth</p>
</div>
</div>
<div class = "columns is-mobile">
<div class = "column is-4 is-offset-8">
<p class = "has-text-black has-background-info has-text-centered">is-4 is-offset-8</p>
</div>
</div>
<div class = "columns is-mobile">
<div class = "column is-11 is-offset-1">
<p class = "has-text-black has-background-info has-text-centered">is-11 is-offset-1</p>
</div>
</div>
<br>
<span class = "title">
Narrow Column
</span>
<div class = "columns">
<div class = "column is-narrow">
<div class = "box has-background-info" style="width: 200px;">
<p class = "title is-5">Narrow column</p>
<p class = "subtitle">Column has 200px width</p>
</div>
</div>
<div class = "column">
<div class = "box has-background-info">
<p class = "title is-5">Flexible column</p>
<p class = "subtitle">Column takes remaining available space</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>次のように出力が表示されます-
