色つきの枠で文章を囲みたい

色つきの枠で文章を囲みたい方のためのチップスです。

スポンサーリンク


今日は色つきの枠で文章を囲みたい方のためのチップスです。

昨日でてきた<div>を今日も使います。まず、下のように書きます。

<div style=”border:3px dashed #ff0000“>

</div>

本日のキモ:border:3px dashed #ff0000

これは昨日のように(セミコロン)で区切ってはいけません。理由は後述。とにかく完成させましょう。

&ltdiv style=”border:3px dashed #ff0000″&gt</div>の間に好きな文章を書きます。

<div style=”border:3px dashed #ff0000“>
魔法少女まどか☆マギカ ねんどろいど 鹿目まどか (ノンスケール ABS&PVC塗装済み可動フィギュア)
</div>

結果

中の文章が左下に寄ってしまっていますね。マウスでクリックして動かしてください。
ウソです。これは広告なので、クリックすると私が儲かってしまいます。
では、どうしましょう?こうしてください。

<div style=”border:3px dashed #ff0000“>魔法少女まどか☆マギカ ねんどろいど 鹿目まどか (ノンスケール ABS&PVC塗装済み可動フィギュア)
</div>

最初の<div style=”border:3px dashed #ff0000″>のあと改行せずに文章を続けて書く
これが解決策です。なぜこんなことをするのでしょうか。

ブログの自動改行問題

ブログを書いているとき、Enterを押して文章を改行させれば、その通りWebで表示されます。

しかし、本来のHTMLでは改行の指示はbrタグで行います。
普通の文章と違って、brタグが出てこない場合、改行は行われません。

ブログの場合、Enterを押して文章を改行させると自動でbrタグを挿入します。それでWebでも改行されているわけです。

今回の場合、HTMLを書いているのですが、ブログはそれを知らないので<div style=”border:3px dashed #ff0000″>の後にEnterを押すと、brタグを自動挿入します

その結果、1行下がって表示されてしまうのです。
ですから<div style=”border:3px dashed #ff0000″>の後に、改行せず続けて次の文章を書けば、1行下がりません。

参考:ブログにテーブル(表)を入れると上に余白が出来てしまう現象の解決方法 | 初心者歓迎!もしもドロップシッピング 初売上達成ガイド



これで上下はバランスよくなりました。でも、隙間がなく詰まりすぎ。
そこで、仕上げ!

<div style=”border:3px dashed #ff0000;padding:1em“>魔法少女まどか☆マギカ ねんどろいど 鹿目まどか (ノンスケール ABS&PVC塗装済み可動フィギュア)
</div>

結果はこんな風になります。線との間に隙間が出来ました。



ではここまでの仕組みを説明します。

border

まず、border:3px dashed #ff0000 に関して。

これはボーダーの
幅は3px(ピクセル)
線は破線
色は赤で

よろしく!という意味です。

この3つはすべてボーダーに関する指定なので、; (セミコロン)では区切りません。代わりに(半角)スペースで区切ります。間違えて全角で区切ってしまうと、間違いが目に見えないので、原因がわからず泣くことになります

ちなみにこれは、こう書いても同じ意味です。この場合はセミコロンで区切ります。
border-width:3px;border-style:dashed;border-color:#ff0000

またborderpaddingは別物なので、やはり ; (セミコロン)で区切ります。

padding

paddingですが、これは自分と、自分の中身との間の間隔指定です。
ちなみに、このブログで昨日出てきたmarginというのは自分と、自分の外側との間の間隔指定です。

paddingの後に数字がひとつなら、4隅ともその幅で
2個ならば最初の数字は上下の間隔、2つ目の数字が左右の間隔という意味です。
4隅全部間隔を別にしたければ4つ数字を書きます。その場合は1つ目から順に、上、右、下、左の間隔です。

数字3個の指定はありません。1個の場合、2個の場合、4個の場合のみです。

これでやっと基礎を終えました。この記事を読んでいる方はきっと本当に知りたいのはこの後のカスタマイズだと思うんです。では行きます。赤文字のところに注目。
太さを変えたいときはborder: 3pxの3を好きな数字に変えてください。

線の種類を変える

<div style=”border:3px dotted #ff0000″>
</div>
<div style=”border:3px outset #ff0000″>
</div>
<div style=”border:3px inset #ff0000″>
</div>
<div style=”border:3px double #ff0000″>
</div>
<div style=”border:3px solid #ff0000″>
</div>
<div style=”border:3px ridge #ff0000″>
</div>
<div style=”border:3px groove #ff0000″>
</div>

線の色を変える

<div style=”border:3px dashed #00ff00″>
</div>
<div style=”border:3px dashed #0000ff“>
</div>

#の後の6文字を0~9までの数字かa~f までのアルファベットでいろいろ代えてみてください。左の2文字が赤、真ん中の2文字が緑、右端の2文字が青に関する設定です。00が一番弱く、ff が一番強くという意味になります。

以上、駆け足でした。


関連コンテンツ

スポンサーリンク

「色つきの枠で文章を囲みたい」への4件のフィードバック

  1. Tomさんこんばんは
    <div。。の次に文字を囲むことに
    チャレンジしまぁす^^
    ありがとうございます

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください