見出し付き囲い枠のその後のご質問・・・改行は<br>タグで! | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

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

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


テーマ:
こんにちは、パソコンワンポイントレッスン!

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


さきほど、このような↓ご質問をいただきましたので、記事にてご返答させていただきます。
アメブロ初心者です。
川上先生の「見出し付き囲い枠」を使わせていただきました。

これです。

<font style="padding:6px 10px; background:#ff0000; color:#ffffff; font-weight:bold;">■タイトルはこちら■</font><div style="border:1px solid #ff0000; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

この下に一行あけてから文を続けたいのですが、一行あけることができません。
一行あけたつもりでも、囲い枠すぐ下から、文字が始まってしまいます。

また、見出し付き囲い枠のしたに、もう一つ見出し付き囲い枠を作りたいのですが、うまくいきません。

1つ目の囲い枠最終線と、2つ目の見出しの上の線が、重なってしまいました。
どのようにしたら、うまくいくのでしょうか?


いつの間にか、私の「見出し付き囲い枠」ってなってますけど、決して私のものじゃないんですけど・・・('◇')ゞ
出所は京都のココですよ~^^;)


しかし、私が簡単にコピペでできますよ~

とお伝えしたせいで、このような困ったことに遭遇する場合もありますよね^^;


こういったご質問を想定していなかった私が悪いですね。
申し訳ございませんでしたm.m


しかし、
せっかくですから、ここで次のことお伝えしておきますね。

強引に改行をしたいときは、
HMMLタグで、

<br>

と入力すればよいのです!
(ただし、半角英数で入力ですよ)

そう、ビーアールタグは改行(Break)、という意味があるのです。

ですから、行間を1行空けるには、

<br><br>

と改行タグを2つ入力してあげます。


また、
行間を1行空ける場合には、この方法のほかにも、段落分けのPタグ<p>を使用すると1行の空白を作ることができます。PタグのPは段落(Paragraph)ですね。


ただし、BRタグは単体で機能しますが、段落分けのPタグは開始タグ<p>と終了タグ</p>の両方をセットにして段落のはじめと終わりに記入します。

ですので、


■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)


こちらの↑見出し付き囲い枠のコピペするソースは


<font style="padding:6px 10px; background:#ff0000; color:#ffffff; font-weight:bold;">■タイトルはこちら■</font><div style="border:1px solid #ff0000; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div><br><br>



<p><font style="padding:6px 10px; background:#ff0000; color:#ffffff; font-weight:bold;">■タイトルはこちら■</font><div style="border:1px solid #ff0000; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div></p>

をお使いくださいませ。


また、他にも別の方からご質問が・・・
この方、実際にもう使われています、ね^^!

このように↓↓↓丸みをつけたい場合はfontタグの方ではなく、spanタグにしていただいて、

中に border-radius: 10px;
(数値は任意です)

を追加するとよいですね。
(ただし、IE8以前では見れませんので、ご注意を!)


■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)


<span style="padding:6px 10px; background:#000066; color:#ffffff; font-weight:bold; border-radius: 10px;">■タイトルはこちら■</span><div style="border:1px solid #000066; padding:10px; font-size:0.9em; margin-top:2px; border-radius: 10px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div><br><br>


(↑こちらの丸みをつけたいというソースは『見出し付きの囲い枠』で追記しております。)

みなさん、いろんなバリエーションを編み出していただいて、とても嬉しいですね^^!



以上、見出し付き囲い枠のご質問でした。


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

川上 雄大☆パソコンインストラクターさんをフォロー

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

SNSアカウント