囲み枠を横に並べて表示するには

こんにちは、パソコンワンポイントレッスン！

PCインストラクターの川上です。

先日、ワクワクバージョン２♪（金谷さん命名案）のことで、枠の幅や配置の記事を書いたのですが･･･

『見出し付き囲い枠-その２』の幅の調節は？（枠の幅を狭くしたい、枠を中央にしたい・・）

そこで、またまた新たなご質問をいただきました^^!

13. おじゃまします
囲い枠サイズ変更、とっても知りたい情報でした。
ありがとうございます！

この囲い枠を横に２つ並べて表示したいのですが、どうすれば良いのでしょうか？

やまのじさん

特に、２カラムの方は、記事本文に幅の余裕がありますから、こういったご要望があるのですね。

はい～、それではこの方法につきましては、来週４月１３日（月）の札幌eni（えにい）のランチ会にて、お話することとします･･･

なんて、言ったら叱られますね（笑）

だって、過去に私はこういった記事『ブログにはどこまで書けばいいのか？』書いてますから～^^;

あ、これは、さりげなく、来週のランチ会に私がゲストで出ますよ～、というかる～い宣伝でした～～（苦笑）

では、気を取り直して、説明いたしますね！

まず、
通常の囲み枠をまず２つ、幅を縮めたのを作ります。
（ここでは、幅のサイズを200pxにしています。）

それぞれの囲み枠の前後に

<div style="width:200px;">と</div>を付け加えます。

すると、いったん縦に並びますね。

■タイトルはこちら■

本文はこちら！
改行後の本文はこちら（ここは削除してください。）

■タイトルはこちら■

本文はこちら！
改行後の本文はこちら（ここは削除してください。）

<div style="width:200px;"><div style="background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #000066; padding:10px; font-size:1em;">本文はこちら！<br>
改行後の本文はこちら（ここは削除してください。）</div></div>
<div style="width:200px;;"><div style="background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #000066; padding:10px; font-size:1em;">本文はこちら！<br>
改行後の本文はこちら（ここは削除してください。）</div></div>

それでは、２つの囲み枠を横に並べます。

さきほど、前後に入れた

<div style="width:200px;">に

float:left;
（フロート　コロン　レフト　セミコロン）

をそれぞれ追加してあげます。

このように↓

<div style="float:left;width:200px;">

（画像だとこんな感じ↓）

（実際だとこんな感じ↓）

■タイトルはこちら■

本文はこちら！
改行後の本文はこちら（ここは削除してください。）

■タイトルはこちら■

本文はこちら！
改行後の本文はこちら（ここは削除してください。）

<div style="float:left;width:200px;"><div style="background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #000066; padding:10px; font-size:1em;">本文はこちら！<br>
改行後の本文はこちら（ここは削除してください。）</div></div>
<div style="float:left;width:200px;"><div style="background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #000066; padding:10px; font-size:1em;">本文はこちら！<br>
改行後の本文はこちら（ここは削除してください。）</div></div>

そして、その後に、この横並びを解除する

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

を入れてあげます。

すると、そのあとは、普通の状態に戻ります。

例えば、こんな感じに横に並べることもできます。

（画像だとこんな感じ↓）

（実際だとこんな感じ↓）

■タイトル■

１．ここに本文
２．ここに本文
３．ここに本文

■タイトル■

１．ここに本文
２．ここに本文
３．ここに本文

<div style="float:left;width:200px;"><div style="background-image:linear-gradient(#f7d7e4,#eca6b3,#de5c70,#d94057);background-color:#d94057; border:1px solid #d94057; padding-left:10px; font-size:1.16em;border-top-left-radius:6px;border-top-right-radius:6px;width: auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;"><font style="color:#ffffff; font-weight:bold;text-shadow: 1px 1px 3px #000;">■タイトル■</font></div><div style="background:#ffffff;border:1px solid #d94057; padding:10px; font-size:1em;border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;">１．ここに本文<br>２．ここに本文<br>３．ここに本文</div></div>

<br>

<br>

そうそう、フロートで横に流すことができるんです～！！

これ、やっぱり、コメントやメッセージでの返信では解説無理です、ね（笑）

＜参考＞
あ、過去に、『画像の横に文字を表示させるには』といった記事でも「フロート」使っています。ご参考まで。

＜追記＞
スマホ（iPhone5）で横に並べるには、

<div style="float:left;width:130px;">

一つの枠の幅を130pxにするとよいですね。
（iPhone6だと150pxで並びます。）

■タイトル■

本文はこちら！
改行後の本文はこちら（ここは削除してください。）

■タイトル■

本文はこちら！
改行後の本文はこちら（ここは削除してください。）

<div style="float:left;width:130px;"><div style="background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトル■</font></div><div style="border:1px solid #000066; padding:10px; font-size:1em;">本文はこちら！<br>

改行後の本文はこちら（ここは削除してください。）</div></div>

以上、アメブロ便利技でした。

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

囲み枠｜見出し付枠｜色コード｜メニューバー