[初めての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 New Year</h1>
<h3>初春のおよろこびを申し上げます</h3>
<p id="haikei">幸多き新年をお迎えのこととお慶び申し上げます
本年もよろしくお願いします>/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; border-height: 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