囲み枠を並べたいのですが

こんにちは、パソコンインストラクターの川上雄大です。

囲み枠をこんな風に↓並べたいのですが･･･

といったご質問をいただきました。

もちろん、色んな方法があります。

今回は、2つをワンセットとした並べ方をお伝えします！

枠内の記事本文

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;">枠内の記事本文</div>

まずは、幅をそれぞれ240pxにしますので、style="の中に、

width:240px;

を追加します。

（→『囲い枠の幅の調節はどのようにしたらいいのでしょうか（枠の幅を狭くしたい、枠を中央にしたい・・）』）

枠内の記事本文

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;width:240px;">枠内の記事本文</div>

次に、横に並べますので、style="の中に、

float:left;

を追加します。

枠内の記事本文

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;width:240px;float:left;">枠内の記事本文</div>

枠がくっついていますので、ちょっと空けますので、style="の中に、

margin:0 5px;

を追加します。

枠内の記事本文

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;width:240px;float:left;margin:0 5px;">枠内の記事本文</div>

そして、最後に、回り込みを解除しますので、

を追加します。

すなわち、通常の枠2つに、

width:240px;float:left;margin:0 5px;

を追加し、最後に、

をする、という手順になります。

すると、このように↓、枠が並んだ状態で表示されます。（PCの場合）

枠内の記事本文

○○○
○○○
○○○
○○○
○○○

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;width:240px;float:left;margin:0 5px;">枠内の記事本文</div>
<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;width:240px;float:left;margin:0 5px;">枠内の記事本文</div>
<div style="clear:both;"> </div>
<div style="background:#ffeeee; padding:10px; border-radius: 10px; border: 2px dotted #ff0000;width:240px;float:left;margin:0 5px;">枠内の記事本文</div>
<div style="background:#ffeeee; padding:10px; border-radius: 10px; border: 2px dotted #ff0000;width:240px;float:left;margin:0 5px;">枠内の記事本文</div>
<div style="clear:both;"> </div>
<div style="background-image:linear-gradient(#f7fbfc,#d9edf2,#add9e4);background-color:#eeffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #333333; box-shadow: 5px 5px 5px #AAA;width:240px;float:left;margin:0 5px;">○○○<br>
○○○<br>
○○○<br>
○○○<br>
○○○</div>
<div style="background-image:linear-gradient(#f7fbfc,#d9edf2,#add9e4);background-color:#eeffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #333333; box-shadow: 5px 5px 5px #AAA;width:240px;float:left;margin:0 5px;">○○○<br>
○○○<br>
○○○<br>
○○○<br>
○○○</div>
<div style="clear:both;"> </div>

となります。

ただし、スマホだと、このサイズ（240pxだと）横に並びませんのでご注意をm(__)m

でも、このように、枠の幅を小さくするとどうですかね？（スマホで見た場合）

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;width:35%;float:left;margin:0 5px;">枠内の記事本文</div>
<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;width:35%;float:left;margin:0 5px;">枠内の記事本文</div>
<div style="clear:both;"> </div>
<div style="background:#ffeeee; padding:10px; border-radius: 10px; border: 2px dotted #ff0000;width:35%;float:left;margin:0 5px;">枠内の記事本文</div>
<div style="background:#ffeeee; padding:10px; border-radius: 10px; border: 2px dotted #ff0000;width:35%;float:left;margin:0 5px;">枠内の記事本文</div>
<div style="clear:both;"> </div>

枠内の記事本文

以上、囲み枠を並べるには、でした。

LIDS札幌・ライフデザインスクール
川上雄大