初歩の電子工作とデジカメの日記

電子工作備忘録とデジカメで撮影した写真のブログです。

CSS3のお勉強 その9　－ hr 水平線 ー

2017-05-21 11:44:12 | study
前回の記事でも使っているが、ブログ記事などでコンテンツの区切りによく使用されるプロパティ”hr”はcssを使えばいろいろな装飾ができることがわかったので、早速試した
下記の赤ラインから赤ラインの間が作成したHTMLファイルで、スタイル部分は<head></head>内に組み込んでいます。



  <!DOCTYPE html>
<html>
<html lang="ja">

<head>
  
  <title>水平線の装飾</title>
  <style type="text/css">
  p {
    margin: 5px 60px; 
}
    .bar1 {
  display: block;
  width: 70%;
  height: 5px;
  background-color: #ffaaaa;
  border: 0;  /*デフォルトデザインでは線がある場合があるので、消しておく。*/
  margin-bottom: 2rem;
}
  .bar2 {
  display:block;
  width: 70%;
  height: 10px;
  border: 0;
  border: 1px solid #cacaca;
  -webkit-border-radius: 10px;
  background: #005500; /* Old browsers */
  background: -moz-linear-gradient(left,  #005500 0%, #52b152 20%, #83c783 51%, #008a00 76%, #005500 96%, #005700 100%, #005500 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#005500), color-stop(20%,#52b152), color-stop(51%,#83c783), color-stop(76%,#008a00), color-stop(96%,#005500), color-stop(100%,#005700), color-stop(100%,#005500)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #005500 0%,#52b152 20%,#83c783 51%,#008a00 76%,#005500 96%,#005700 100%,#005500 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to right,  #005500 0%,#52b152 20%,#83c783 51%,#008a00 76%,#005500 96%,#005700 100%,#005500 100%); /* W3C */
margin-bottom: 2rem;
}
  .bar3 {
  display: block;
  border: 0;
  width: 70%;
  height: 19px;
  background: url("img/leaf_line.png") no-repeat top center;
  -webkit-background-size: 512px 28px;
  margin-bottom: 2rem;
}
  .bar4 {
  display: block;
  width: 70%;
  height: 3px;
  border: 0;
  background-color: #aaaaaa;
} 
  </style>
</head>

<body>
<div style="margin: 5px 60px;">hr(水平線)へのいろいろな装飾はhtml文でもできるが、css文でやるのが本筋なので勉強した</div>
<p>装飾1　水平線を赤色にする</p>
  <hr class="bar1">
<p>装飾2　水平線に背景グラデーションをかける</p>
<hr class="bar2">
<p>装飾3　水平線の背景に画像を使う</p>
<hr class="bar3">
<p>装飾なし</p>
  <hr class="bar4">

</body>

</html>


＊Webでの表示