コンテンツを横並びにさせる方法
こんちわ！コーダーのコダと申します。4月にマークアップエンジニアとして入社しました。今回が初投稿となりますが、よろしくお願いします。それでは、本日はHTML/CSSを使ったデザインについて書いていきたいと思います。今回はコーディングでよく行うコンテンツを横並びさせる方法を紹介したいと思います！
早速ですが皆さん、下記のコンテンツを「横並び」にしたい場合、どのようにCSSを書きますか？ここでは主に下記に絞って紹介したいと思います。
目次
横並びに利用される主な方法を3つ紹介
- floatを使用した横並び
- flexboxを使用した横並び
- gridを使用した横並び
上記3つが横並びによく利用されるプロパティです。それぞれ解説していきますが、それではまずfloatから見ていきましょう！
floatを使用した横並び
floatとは、簡単には、縦に並んでいた要素を横並びにすることのできるプロパティともいえます。正確にはちょっと違いますが、ややこしくなってしまうので、一旦「floatは要素を横並びにする」機能を持っていると覚えてください。floatの持つ正式な機能については、後で詳しく紹介します。
値の種類
横並びにする際に使用するfloatプロパティの値は、leftとrightの2つです。要素を横並びにする際に、要素を左に寄せたいときはleft、右に寄せたいときはrightを使用します。
float: left;
float: left;を指定すると、縦に3つ並んでいた要素が左から順番に横並びになります。
float: right;
float: right;を指定すると、縦に3つ並んでいた要素が右から順番に横並びになります。
後に続く要素の回り込みを解消する方法
回り込みを解消するには、どうしたらいいのでしょうか。ここで登場するのが「clearプロパティ」です。まずは、clearプロパティについて紹介します。
CSS clearプロパティについて
clearプロパティは、floatをかけることによって起こってしまう、要素の回り込みを解消するためのプロパティです。clearプロパティの値には、以下の3種類があります。
- left
- CSSで、float: left;をかけた要素に続く要素が、左寄せで回り込むことを解消する。
- right
- CSSでfloat: right;をかけた要素に続く要素が、右寄せで回り込むことを解消する。
- both
- CSSでfloatをかけた要素に続く要素の回り込みを解消する。clearプロパティでは、ほとんどの場合、bothの値を選択します。ですので、clearにはbothと覚えてしまっても構いません。
基本的にはfloatをかけた要素に続く最後の要素に「clear:both;」をかけるか、floatをかけた要素の親要素に「clearfix」というクラスを設け、擬似要素afterを作成し、「content:”;」「display:block;」「clear:both;」を指定して回り込み解除を行うのが一般的です。
floatまとめ
- 回り込ませたい要素にfloatをかける。
- 左に寄せたいのか右に寄せたいのかレイアウトによって使い分け。
- clear:both;を続く最後の要素か、親要素にかけ回り込みの解除を行う。
- ブラウザで問題がないか確認。
- 練習して使いこなせるようになる！
flexboxを使用した横並び
HTMLの書き方は、横並びにしたい子要素を親要素で囲むだけ。親要素は「Flexコンテナー」、子要素は「Flexアイテム」と呼ばれることもあります。上記で紹介したfloatと違い、各要素に「float」や解除の「clear:both;」を行わなくていいので非常に楽です。
子要素を横並びにするには、親要素に 「display: flex;」と1行追加すればOKです。
よく使われているプロパティ
よく検索されている定番のプロパティをご紹介します。このプロパティは、すべて親要素に追加してください。
flex-wrap
折り返しを指定する値。Flexboxで横並びにした状態で、幅を狭めていくと子要素が縦に長くなってしまいます。 これを回避するために、flex-wrapを使いましょう。子要素を折り返して複数行に表示できます。flex-wrapの値には下記のようなものがあります。
- nowrap(初期値)
- 子要素を折り返しせず、1行に配置
- wrap
- 子要素を折り返し、複数行に上から下へ配置
- wrap-reverse
- 子要素を折り返し、複数行に下から上へ配置
flex-direction
並び順を指定する要素。子要素の配置を変えたいときは、flex-directionを使用します。flex-directionの値には下記のようなものがあります。
- row(初期値)
- 子要素を左から右へ配置
- row-reverse
- 子要素を右から左へ配置
- column
- 子要素を上から下へ配置
- column-reverse
- 子要素を下から上へ配置
また、子要素に「order:任意の順番数」を指定することで任意の順番に子要素を配置することができます。
justify-content
横位置を指定するプロパティ。値には下記のようなものがある。
- flex-start(初期値)
- 左揃えで配置
- flex-end
- 右揃えで配置
- center
- 中央揃えで配置
- space-between
- 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
- space-around
- 両端の子要素も含め、均等に間隔をあけて配置
align-items
縦位置を指定するプロパティ。値には下記のようなものがある。
- flex-start(初期値)
- 要素内上に配置
- flex-end
- 要素内下に配置
- center
- 要素内中央揃えで配置
flexboxまとめ
- 横並びにしたい子要素を親要素で囲むだけなので楽
- 記述は親要素に「display: flex;」と1行追加すればOK。
- 横や縦の位置の調整も楽ちん。
- 更に順番も指定可能。
.tocBlock{
padding: 16px 24px 24px ;
border: 1px solid #666 ;
max-width:500px ;
margin: 0 auto ;
}
.tocTitle{
text-align: center ;
margin-top: 0px ;
font-size: 1.6rem ;
border-bottom: 1px solid #b0b0b0 ;
padding-bottom: 16px;
}
.tocTitle::before{
content: "\eebe";
font-family: "remixicon";
font-size: 1.8rem ;
position: relative;
top: 3px;
margin-right: 6px;
}
.tocH2List{
margin-top: 24px ;
font-size: 2rem ;
counter-reset: listnum ; /* カウンターをリセット */
}
.tocH2{
margin-top: 24px ;
display: block ;
position: relative ;
padding-left: 32px ;
line-height: 1.2;
}
.tocH2 a{
border: none !important ;
/* border-bottom: 1px dashed #888 ;
padding-bottom: 2px; */
}
.tocH2::before{
counter-increment: listnum ; /* counter-resetと同じ文字列 */
content: counter(listnum) '.'; /* カウントした数に応じて番号を表示 */
font-size: 1.44rem;
font-family: 'Montserrat', sans-serif ;
display: block ; /* ブロックレベル要素にする */
position: absolute ; /* 絶対位置指定 */
top: 16px ; /* 上部を中央に */
left: 0 ; /* 左端に配置 */
transform: translateY(-50%) ; /* 垂直方向に-50%移動 */
width: 2.24rem ;
/* 幅を指定 */
/* height: 1.44em ; */
/* 高さを指定 */
font-weight: 500;
text-align: center;
/* border: #666 1px solid; */
}
.tocH3List{
margin-top: 12px ;
display: block;
}
.tocH3{
padding-left: 16px;
margin-top: 8px ;
}
.tocH3 a{
font-size: 1.28rem ;
border: none ;
}
.tocH3::before{
display: inline-block ;
content: '' ;
width: 8px;
height: 1px;
background-color: #888;
position: relative;
top: -5px ;
margin-right: 12px ;
}
gridを使用した横並び
Grid Layout(display: grid)は、CSSでレイアウトを組む手法の1つで、要素を格子状に並べて配置することができます。Grid Layoutでは列数と行数をあらかじめ指定し、水平線と垂直線が交差してできたエリアにアイテムを配置していくことでレイアウトを組んでいきます。
列数と行数の指定はアイテム全体を囲った親要素に対して「display: grid」を指定した後、「grid-template-columns」「grid-template-rows」プロパティを指定することで可能です。
gridまとめ
記事作成の目的は達成できたので説明は省きますが、個人的に要素を重なり合わせたようなレイアウトを行う時に便利な気がします。
/**
* 問題：
* 四則演算を行うメソッドを持ったオブジェクトを
* クロージャーを用いて作成してみてください。
*
* 四則演算を行うメソッド（plus, minus, multiply, divide）
* を実行すると以下のようにコンソールに出力されます。
*
* const calc = calcFactory(10); // 初期値を10として設定
* calc.plus(5); // 出力結果 "10 + 5 = 15"
* calc.minus(3); // 出力結果 "15 - 3 = 12"
* calc.multiply(3); // 出力結果 "12 x 3 = 36"
* calc.divide(2); // 出力結果 "36 / 2 = 18"
*
* ※前に行った計算結果をもとに四則演算を行います。
* ※四則演算は"+","-","*","/"を数値ではさんで計算を行います。
*/
//この引数i1はどの内部スコープからも参照可能。
function calcFactory(i1){
//計算結果を関数calcFactoryに返却
return{
plus :function (i2){
let result = i1 + i2;
console.log(`${i1} + ${i2} = ${result}`);
//引数に変数を代入することもできる。
//引数i1は外部に存在するため、どのスコープからでもアクセス可能。
//それにより今回の計算結果を次の計算(minus以降のオブジェクト)の初期値として渡せる。
i1 = result;
},
minus :function (i2){
let result = i1 - i2;
console.log(`${i1} - ${i2} = ${result}`);
i1 = result;
},
multiply :function (i2){
let result = i1 * i2;
console.log(`${i1} x ${i2} = ${result}`);
i1 = result;
},
divide :function (i2){
let result = i1 / i2;
console.log(`${i1} ÷ ${i2} = ${result}`);
i1 = result;
},
};
}
const calc = calcFactory(10); // 初期値を10として設定
calc.plus(5); // 出力結果 "10 + 5 = 15"
calc.minus(3); // 出力結果 "15 - 3 = 12"
calc.multiply(3); // 出力結果 "12 x 3 = 36"
calc.divide(2); // 出力結果 "36 / 2 = 18"
文言編集可能
- あああああああああああああああああああああああああ
- いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
- ううううううううううううううううううううううううう
- 段落と通常リストと番号リストのみ対応
文言編集可能
- あああああああああああああああああああああああああ
- いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
- ううううううううううううううううううううううううう
- 段落と通常リストと番号リストのみ対応
文言編集可能
あかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわ
あかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわあかさたなはまやらわ
引用元情報 ：
ILLUST FACTORY -illustratorの作品紹介サイト- https://wp-test02.xyz/
記事へのコメント
あかさたな
うんこ
めめん
問題ないかな。
大丈夫課！
返信も問題なし！
更に別アカウントで返信の返信も大丈夫！
2階層目で別のアカウントで返信！
3階層目もOK！
新たに第三者でコメントもOK！
コメントの問題はなさそうですね！