スポンサーリンク
昨日でてきた<div>を今日も使います。まず、下のように書きます。
</div>
本日のキモ：border:3px dashed #ff0000
これは昨日のように；(セミコロン)で区切ってはいけません。理由は後述。とにかく完成させましょう。
<div style=”border:3px dashed #ff0000″>と</div>の間に好きな文章を書きます。
魔法少女まどか☆マギカ ねんどろいど 鹿目まどか (ノンスケール ABS&PVC塗装済み可動フィギュア)
</div>
結果
中の文章が左下に寄ってしまっていますね。マウスでクリックして動かしてください。
ウソです。これは広告なので、クリックすると私が儲かってしまいます。
では、どうしましょう？こうしてください。
</div>
最初の<div style=”border:3px dashed #ff0000″>のあと改行せずに文章を続けて書く。
これが解決策です。なぜこんなことをするのでしょうか。
ブログの自動改行問題
ブログを書いているとき、Enterを押して文章を改行させれば、その通りWebで表示されます。
しかし、本来のHTMLでは改行の指示はbrタグで行います。
普通の文章と違って、brタグが出てこない場合、改行は行われません。
ブログの場合、Enterを押して文章を改行させると自動でbrタグを挿入します。それでWebでも改行されているわけです。
今回の場合、HTMLを書いているのですが、ブログはそれを知らないので<div style=”border:3px dashed #ff0000″>の後にEnterを押すと、brタグを自動挿入します。
その結果、１行下がって表示されてしまうのです。
ですから<div style=”border:3px dashed #ff0000″>の後に、改行せず続けて次の文章を書けば、１行下がりません。
参考：ブログにテーブル（表）を入れると上に余白が出来てしまう現象の解決方法 | 初心者歓迎！もしもドロップシッピング 初売上達成ガイド
これで上下はバランスよくなりました。でも、隙間がなく詰まりすぎ。
そこで、仕上げ！
</div>
結果はこんな風になります。線との間に隙間が出来ました。
ではここまでの仕組みを説明します。
border
まず、border:3px dashed #ff0000 に関して。
これはボーダーの
幅は3px(ピクセル)
線は破線
色は赤で
よろしく！という意味です。
この３つはすべてボーダーに関する指定なので、; (セミコロン)では区切りません。代わりに(半角)スペースで区切ります。間違えて全角で区切ってしまうと、間違いが目に見えないので、原因がわからず泣くことになります。
ちなみにこれは、こう書いても同じ意味です。この場合はセミコロンで区切ります。
border-width:3px;border-style:dashed;border-color:#ff0000
またborderとpaddingは別物なので、やはり ; (セミコロン)で区切ります。
padding
paddingですが、これは自分と、自分の中身との間の間隔指定です。
ちなみに、このブログで昨日出てきたmarginというのは自分と、自分の外側との間の間隔指定です。
paddingの後に数字がひとつなら、４隅ともその幅で
２個ならば最初の数字は上下の間隔、２つ目の数字が左右の間隔という意味です。
４隅全部間隔を別にしたければ４つ数字を書きます。その場合は１つ目から順に、上、右、下、左の間隔です。
数字３個の指定はありません。１個の場合、２個の場合、４個の場合のみです。
これでやっと基礎を終えました。この記事を読んでいる方はきっと本当に知りたいのはこの後のカスタマイズだと思うんです。では行きます。赤文字のところに注目。
太さを変えたいときはborder: 3pxの3を好きな数字に変えてください。
線の種類を変える
</div>
</div>
</div>
</div>
</div>
</div>
</div>
線の色を変える
</div>
</div>
#の後の6文字を0～9までの数字かa～f までのアルファベットでいろいろ代えてみてください。左の２文字が赤、真ん中の２文字が緑、右端の２文字が青に関する設定です。00が一番弱く、ff が一番強くという意味になります。
以上、駆け足でした。
関連コンテンツ
スポンサーリンク
Tomさんこんばんは
＜div。。の次に文字を囲むことに
チャレンジしまぁす＾＾
ありがとうございます
こちらこそありがとうございます。
がんばってチャレンジしてみてください
こんばんわ＾＾
すばらしい！
参考になります☆
ありがとうございます。