Private Fantasticのホームページへ

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


メニュー

🌹レッスン17🌹

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

目次

1.　お詫び
2.　ボーダーを指定する方法

1.　お詫び

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

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

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



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

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

ボーダーを指定するには、ｂｏｒｄｅｒでｓｔｙｌｅを指定します。

ボーダーの種類

  • ｂｏｒｄｅｒ－ｔｏｐ－ｓｔｙｌｅ：値（上）
  • ｂｏｒｄｅｒ－ｂｏｔｔｏｍ－ｓｔｙｌｅ：値（下）
  • ｂｏｒｄｅｒ－ｌｅｆｔ－ｓｔｙｌｅ：値（左）
  • ｂｏｒｄｅｒ－ｒｉｇｈｔ－ｓｔｙｌｅ：値（右）

値には、

  • ｎｏｎｅ（表示しない）
  • ｓｏｌｉｄ（１本線で表示する）
  • ｄｏｕｂｌｅ（２本線で表示する）
  • ｇｒｏｏｖｅ（凹へこんで見えるように表示する）
  • ｒｉｄｇｅ（凸飛び出して見えるように表示する）
  • ｉｎｓｅｔ（ボーダーにの内側が凹へこんで見えるように表示する）
  • ｏｕｔｓｅｔ（ボーダーの内側が凸飛び出して見えるように表示する）
  • ｄａｓｈｅｄ（破線で表示する）
  • ｄｏｔｔｅｄ（点線で表示する）

があります。

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

【ＨＴＭＬ】

<body>
<div id="content">
<h1>Ａ Ｈａｐｐｙ<br>Ｎｅｗ Ｙｅａｒ</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>

【ＣＳＳ】

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年）の干支は子（ね）ネズミ年ですね

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

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

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

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


TOP