こんばんは(._.)こなゆです。
このブログを書きながら、日々皆さんと勉強できているように感じられて嬉しいです(´艸｀*)
僅かですが、アクセス数が増えてきたので頑張ります(*'▽')
メイントピックである結婚式関係も、別途更新していきますので(^^♪
1.枠線の引き方
これは前回の記事を参考にコピペしてくださいね☆
konayuu-wedding.hatenablog.com
2.枠線の種類
前回紹介したベースの枠線↓を使いながら、アレンジしていきましょう(*'▽')
<div style="border: 5px solid #cccccc; padding: 10px;">
<p>本文入力欄</p>
</div>
角を丸くする
下記コードをHTMLに入れると…。
コピペ用コード
<div style="border: 5px solid #cccccc; ; border-radius:10px; padding: 10px;">
<p>これで角が丸くなりますね！！！</p>
</div>
これで角が丸くなりますね！！！
赤文字の「border-radius:10px」で角を丸くすることができます(*'▽')
10pxのところの数字を変えることで、角の具合を変えることができます！！
色を変える
線の色
これは前回の記事でも紹介しました。
<div style="border: 5px solid #cccccc; padding: 10px;">
<p>本文入力欄</p>
</div>
上記コードの赤文字#ccccccのところですね。ここを#00FF00などのコードに変更すれば色が変わります。
背景の色
<div style="border: 5px solid #cccccc; padding: 10px; background-color: #00FF00">
<p>本文入力欄</p>
</div>
background-color: #00FF00 というコードを追記します(*'▽')
それだけで、上記のような背景色は黄緑になります(*'▽')
線の種類
それぞれ以下のコードを使いまわせば線の種類を変えることができます(*^^)v
ただ、注意があって border: 5px solid のところにこれから紹介するコードを差し替えてください。これがあったままだと、指定した線にならず幅を広げた枠線の方が大きくなってうまく反映されません( ;∀;)
以下のコードで確認してみてください。
点線
border: 5px dottedを追加します。
<div style="border: 5px dotted #cccccc; padding: 10px;">
<p>本文入力欄</p>
</div>
破線
border: 5px dashedを追加します。
<div style="border: 5px dashed#cccccc; padding: 10px;">
<p>本文入力欄</p>
</div>
二重線
border-style: double を追加します。
<div style="border-style: double #cccccc; padding: 10px;">
<p>本文入力欄</p>
</div>
影をつける
あんまり使わないかもしれないですが、紹介しておきますね。
box-shadow: 3px 3px 3px #000000;
これを追加します。
<div style="border: 5px solid #cccccc; padding: 10px;box-shadow: 3px 3px 3px #000000">
<p>本文入力欄</p>
</div>
ちなみに、3px3px3pxと並んでいますが、それぞれ変えていくと以下のようなことになります。
1つめ 10px 3px 3px →横の影の大きさ
<div style="border: 5px solid #cccccc; padding: 10px;box-shadow: 10px 3px 3px #000000">
<p>本文入力欄</p>
</div>
2つめ 3px 10px 3px →下の影の大きさ
<div style="border: 5px solid #cccccc; padding: 10px;box-shadow: 3px 10px 3px #000000">
<p>本文入力欄</p>
</div>
3つめ 3px 3px 10px → 一番外側のぼかし？みたいなところ
<div style="border: 5px solid #cccccc; padding: 10px;box-shadow: 3px 3px 10px #000000">
<p>本文入力欄</p>
</div>
まとめ
今回は枠線の種類について説明しました！
これを見ていただければ、だいたいの枠線は引けるんじゃないでしょうか。
角を丸める・点線・二重線・背景色など色んなものがありましたね。
忘れたらまた見に来てください。笑
少しでも皆さんの参考になれば(*^^)v
