サイトリニューアルしました！

以前まではWordPressのみの運用でしたが、WordPressはブログのみにしました！

変わらず、ウェブの仕組みを学んでいきます！

初回の実験です！以下ページでボーダーにタイトル見出しを作成しました！

確認はこちら！

ソースコードは以下になります！

ーーー【HTML】ーーーーーーーーーーーーーー
<div id="test">
<p><span class="test1">T</span>est1</p>
</div>
<p>テキストボックスの装飾</p>
<div class="box1">
<span>タイトル</span>
<p>本文</p>
</div>
<br>
<div class="box1">
<span>実験ですよー！</span>
<p>本文が長くなってもpタグ内は自動で折り返してくれるので一安心！<br>改行をしたい時は、"brタグ"を使いましょう！こんな感じ<br>改行しました！</p>
</div>

ーーー【CSS】ーーーーーーーーーーーーーー
#test{
　margin:10px 0;
}
#test p {
 text-align:center;
 background:#0000ff;
 border-radius:50px;
 padding:0 2px;
 font-size:18px;
 color:#fff;
 width:100px;
}
#test span{
   color:#ffff00;
   font-size:24px;
}
.box1{
  position: relative;
  border: solid 2px #74c1f8;
  margin-top:50px;
  width:100%;
}
.box1 span {
  position: absolute;
  top: -24px;
  left: -2px;
  /*以下装飾*/
  color: white;
  background: #74c1f8;
  padding:2px 10px;
}
.box1 p{
  width:90%;
  margin:10px auto;
}

装飾方法は様々で迷いますね。。。

練習の館は、更新しますので暇な時は除いて見て下さい！

引き続き、頑張ります！