囲み枠を並べたいのですが | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:

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

 

 

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

 

 

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

 

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

 

 

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

 

枠内の記事本文
枠内の記事本文

 

 

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

<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>

<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>

<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>

<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;">&nbsp;</div>

 

を追加します。

 

 

 

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

 

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

 

を追加し、最後に、

 

<div style="clear:both;">&nbsp;</div>

 

 

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

 

 

 

すると、このように↓、枠が並んだ状態で表示されます。(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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</div>

 

 

枠内の記事本文
枠内の記事本文
 
枠内の記事本文
枠内の記事本文
 

 

 

 

 


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

 

Instagram

 


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

 

 

 

 

川上雄大

 

川上 雄大☆パソコンインストラクターさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント