[初めてのwebサイト作成レッスン17]
ボーダーを指定する方法 クリスマスカードや年賀状をwebで公開しよう


🌹レッスン17🌹

1. ボーダーを指定する方法


1. お詫び

前回レッスン16で「新年」が「信念」と入力されており表示してしまいました。ゴメンナチャイナ_(._.)_

その代わりと言っては何ですが、コード部分は、全コピOK!

ただし、「住所と名前」と「画像」はご自分でご用意くださいね。



2. ボーダーを指定する方法(WebCard)

🌻パソコンのブラウザはGoogle Chromeを使用しています。

ボーダーを指定するには、borderでstyleを指定します。

ボーダーの種類

  1. border-top-style:値(上)
  2. border-bottom-style:値(下)
  3. border-left-style:値(左)
  4. border-right-style:値(右)

値には、

  1. none(表示しない)
  2. solid(1本線で表示する)
  3. double(2本線で表示する)
  4. groove(凹へこんで見えるように表示する)
  5. ridge(凸飛び出して見えるように表示する)
  6. inset(ボーダーにの内側が凹へこんで見えるように表示する)
  7. outset(ボーダーの内側が凸飛び出して見えるように表示する)
  8. dashed(破線で表示する)
  9. dotted(点線で表示する)

があります。

例えば、前回作成したファイルを少し編集します。

【HTML】


<body>
<div id="content"> <h1>A Happy<br>New Year</h1> <h3>初春のおよろこびを<br>申し上げます</h3> <p id="haikei">幸多き新年をお迎えの事とお慶び申し上げます<br> 本年もよろしくお願いします</p> <p>令和二年元旦</p> <p>住所 名前</p> <div id="photo"> <img src="img/nezumi.png"alt="ネズミ年" width="270px" /> </div></div>

</body>

【CSS】


body {
	color: black;
	width: auto;
	height: 90%;
	margin: auto;
	padding: 10px;
	}
h1 { color: #808; text-align: center; font-size: 25px; font-family:"Comic Sans MS","Meiryo","Avenir","Corbel","Osaka",
"fantasy"; font-weight: bold; text-shadow: #f0f 10px 5px 5px; padding: 0px; }
#content{ border-top-style: solid; border-bottom-style: double; border-left-style: ridge; border-right-style: dashed; border-color: #f0f; border-width: 10px; width: 340px; max-width: 95%; height: auto; margin: 0 auto; padding: 0 10px; }
h3 { font-size: 18px; text-align: center; line-height:95%; letter-spacing: 0.3em; }
p{ font-size: 16px; text-align: center; line-height:110%; }
#haikei{ background-color: #ff9999; }
img{ max-width: 95%; }
#photo{ text-align: center; }

🌼ブラウザで確認してみます。

パソコンで見るとこんな感じ



スマホで見るとこんな感じ

タブレットで見るとこんな感じ

上記の画像のようになったかな?

上のボーダーは実線、下のボーダーは2重線、左のボーダーは凸飛び出して見える、右のボーダーは破線で描かれています。

何だかCADみたいです。(各線分の意味合いは違ってきますけどね)


★まとめ

いかがでしたか?来年(2020年)の干支は子(ね)ネズミ年ですね

その前に「X’mas」というイベントがありました(#^.^#)

画像やデザイン、文章を変えて、クリスマスカードを作ってみてもいいかも✨

次回レッスン18は、「ボーダーの種類をまとめて指定する方法」や「ボーダーの色と太さを指定する方法」をアップロードする予定です!

See you again Take care
(^.^/)))~~~bye!!



TOP