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

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

HTML5,CSS3のお勉強　その5 ー figure,figcaption ー

2017-04-30 09:51:38 | study
CSS3のお勉強　その5 ー figure,figcaption ー
ホームページやブログに複数の写真を載せる時にまずサムネイル画像を並べて表示するのに今までは<table>タグや<float>タグを使って結構手間が掛かる作業となっていた。最近はHTML5の仕様で<figure>タグが使えるようになり、この作業が格段と楽になった。
下記の赤ラインから赤ラインの間が作成したHTMLファイルで、スタイル部分は<head></head>内に組み込んでいます。

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

<head>
  
  <title>CSS3のお勉強　その5</title>
  <style type="text/css">
    figure {
      height: 240px;
      float: left;
      /* 左に寄せて後続を右に回り込ませる */
      margin: 10px 20px 30px 0px;
      /* 外側に余白を加える(右に10px・下に30px) */
      background-color: #ccc;
      /* 背景色 */
    }

    figure img {
      display: block;
      /* 余計な余白が出ないようにする */
      margin: 0px 0px 3px 0px;
      /* 下側にだけ3pxの余白を追加 */
    }

    figcaption {
      font-size: 0.9em;
      /* 文字サイズを90%に */
      /*text-align: center;       中身をセンタリング */
      margin: 5px 20px;
      /* 説明文の余白を上に5px、左に20px空ける */
    }

    div.imagearea:after {
      /* 回り込みの解除 */
      content: "";
      /* after疑似要素にClearfixを加えることで、回り込みを解除している */
      clear: both;
      display: block;
    }
  </style>
</head>

<body>
  <div class="imagearea">
    <figure><img src="hana/Resized/sakura.jpg" alt="桜の写真">
      <figcaption>桜 200x200
        <br>今が見頃</figcaption>
    </figure>
    <figure><img src="hana/Resized/ajisai.jpg" alt="あじさいの写真">
      <figcaption>あじさい 200x200</figcaption>
    </figure>
    <figure><img src="hana/Resized/nanten.jpg" alt="南天の写真">
      <figcaption>南天 200x200</figcaption>
    </figure>
    <figure><img src="hana/Resized/cosmos200x200.jpg" alt="コスモスの写真">
      <figcaption>コスモス 200x200</figcaption>
    </figure>
    <figure><img src="hana/Resized/himawari200x200.jpg" alt="ひまわりの写真">
      <figcaption>ひまわり 200x200</figcaption>
    </figure>
    <figure><img src="hana/Resized/momiji200x200.jpg" alt="もみじの写真">
      <figcaption>もみじ 200x200</figcaption>
    </figure>
    <figure><img src="hana/Resized/ume200x200.jpg" alt="梅の写真">
      <figcaption>梅 200x200</figcaption>
    </figure>
  </div>

</body>

</html>


＊Webでの表示＊



css3のお勉強　その4

2017-04-27 10:51:02 | study
CSS3のお勉強　その4 ー box-shadow, text-shadow　ー
文字通りボックスやテキストに影を付けるCSSです。当然画像にも影をつけて画像が浮き出る感じにできます
下記の赤ラインから赤ラインの間が作成したHTMLファイルで、スタイル部分は<head>内に組み込んでいます。
<!DOCTYPE html>
<html>
<html lang="ja">

<head>
  
  <title>CSS3のお勉強　その4</title>
  <style type="text/css">
    .test01 {
      width: 150px;
      height: 150px;
      margin: 30px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #999900;
      border: 2px solid #CCFFCC;
      float: left;
    }

    .test02 {
      width: 150px;
      height: 150px;
      margin: 30px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #999900;
      border: 2px solid #CCFFCC;
      box-shadow: 5px 10px rgba(5, 5, 5, 0.7);
      float: left;
    }

    .test03 {
      width: 150px;
      height: 150px;
      margin: 30px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #999900;
      border: 2px solid #CCFFCC;
      box-shadow: 5px 10px 5px rgba(5, 5, 5, 0.7);
      float: left;
    }

    .test04 {
      width: 150px;
      height: 150px;
      margin: 30px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #999900;
      border: 2px solid #CCFFCC;
      box-shadow: 5px 10px 5px 5px rgba(5, 5, 5, 0.7);
      float: left;
    }

    .sample {
      width: 200px;
      height: 200px;
      margin: 30px;
      border: 2px solid #CCFFCC;
      box-shadow: 5px 10px 5px rgba(5, 5, 5, 0.7);
      float: left;
    }
  </style>
</head>

<body>
  

    <div class="test01">テスト1 <br>>box-shadowなし </div>
     <div class="test02">テスト2 <br>box-shadow:5px 10px rgba(5,5,5,0.7);
     </div>
     <div class="test03">テスト3 <br>box-shadow:5px 10px 5px rgba(5,5,5,0.7);
     </div>
   </div>
   <div>
     <div class="test04">テスト4 <br>box-shadow:5px 10px 5px 5px rgba(5,5,5, 0.7);
     </div>
     <div class="sample"> <img src="img/mt_fuji_s.jpg">
       <p style="margin-top: 20px;">この画像のbox-shadowスタイルは テスト3と同じ </p>
     </div>
</body>

</html>

＊ Webでの表示 ＊





css3のお勉強　その3

2017-04-25 11:34:12 | study
CSS3のお勉強　その3 - RGBA -
RGBAカラーモデルは、今までのRGBカラーモデルのRed・Green・Blueに、A (alpha)が加わったもので、 alphaは色の透明度を表している。これにより色の濃淡を表現され、バックが透けて見えるようになる。
このHTMLではcssプログラムを<head>内に置いている



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

<head>
  
  <title>CSS3のお勉強　その3</title>
  <style type="text/css">
    .test01 {
      /* 普通のbackground-color */
      color: #fff;
      background-color: #000;
      margin: 0 0 20px 50px;
      padding: 20px;
      width: 200px;
    }

    .test02 {
      /* 透過度0.5を加えたbackground-color */
      color: #fff;
      background-color: rgba(0, 0, 0, 0.5);
      margin: 0 0 20px 50px;
      padding: 20px;
      width: 200px;
    }

    .test03 {
      /* 透過度0.3を加えたbackground-color */
      color: #fff;
      background-color: rgba(0, 0, 0, 0.3);
      margin: 0 0 20px 50px;
      padding: 20px;
      width: 200px;
    }

    .example {
      /* 親ボックス */
      width: 450px;
      height: 200px;
      background-color: #85b9e9;
      position: absolute;
      top: 260px;
      left: 57px;
      padding: 5px;
      box-sizing: border-box;
    }

    .box1 {
      /* ボックス1 */
      width: 150px;
      height: 50px;
      background-color: rgb(255, 0, 0);
      position: absolute;
      top: 30px;
      left: 50px;
      padding: 5px;
      box-sizing: border-box;
    }

    .box2 {
      /* ボックス2 */
      width: 150px;
      height: 50px;
      background-color: rgb(0, 255, 0);
      position: absolute;
      top: 30px;
      left: 250px;
      padding: 5px;
      box-sizing: border-box;
    }

    .box3 {
      /* ボックス3 */
      width: 150px;
      height: 50px;
      background-color: rgba(255, 0, 0, 0.3);
      position: absolute;
      top: 100px;
      left: 50px;
      padding: 5px;
      box-sizing: border-box;
    }

    .box4 {
      /* ボックス4 */
      width: 150px;
      height: 50px;
      background-color: rgba(0, 255, 0, 0.3);
      position: absolute;
      top: 100px;
      left: 250px;
      padding: 5px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="test01">テスト1</div>
  <div class="test02">テスト2</div>
  <div class="test03">テスト3</div>
  <div class="example">背景画像
    <div class="box1">ボックス1</div>
    <div class="box2">ボックス2</div>
    <div class="box3">ボックス3</div>
    <div class="box4">ボックス4</div>
  </div>
</body>
</html>

Webで表示した画面に注釈を加筆した。IE = v11, Chrome = v57 で確認済み





CSS3のお勉強　その2

2017-04-23 06:06:30 | study
CSS3のお勉強　その2
borderの四辺の角を丸くする。以前は画像編集ソフトで加工するしかなかった。

＊HTMLファイル＊
このHTMLではcssプログラムを<head>内に置いている



<!DOCTYPE html>
<html>
<html lang="ja">
  <head>
    
    <title>HTML5_CSS3 practice</title>
    <style type="text/css">
	  .kadomaru-1 {		  
  		border-radius: 20px;
      -webkit-border-radius: 20px;    /* Safari,Google Chrome用 */
      -moz-border-radius: 20px;   /* Firefox用 */ 
  		margin: 20px;
  		border:1px solid #aaa;
  		width:150px;
  		height:150px;
  		background: #998800;
  		padding: 20px;
  		color: #ffffff;
	   }
     </style>
  </head>
  <body><div class="kadomaru-1">四辺全て角丸設定width,height 150px</div></body>
</html>


* Webでの表示 *


HTML5,CSS3 のお勉強

2017-04-21 07:35:36 | study
自分のホームページを何年か振りに更新しようと、「HTML5」と「CSS3」の勉強を始めた。HTML、CSSファイル作成にテキストエディタは無料ソフトの「TeraPad」を今までも使っていたので今回もそれを使って勉強を始めたのだが、まる一日作業が進まない事態が発生した。

「terapad」が初期設定のままだとHTMLファイルはWeb表示した時に日本語が文字化けしてしまう。これを防ぐには「terapad」の設定を変える必要がある。

  1. メニューバーの[ファイル]をクリック
  2. [文字/改行コード指定保存]項目(左画像で赤色ライン)をクリック



「terapad」が初期設定では[文字コード]の選択ボタンが[SHIFT-JIS]となっているのでここを直す。



[文字コード]の選択ボタン▼を押して[UTF-8]にする。
文字化け表示を解消する方法をいろいろ試し、google検索を何度も検索し直してここまで到達するのに丸1日掛かってしまった。今後のためにブログ記記事に備忘録として載せた。




2017桜風景　横浜市都筑区　江川せせらぎ緑道

2017-04-08 14:51:35 | デジカメ

満開間近の桜風景撮影に横浜市都筑区の「江川せせらぎ緑道」へ出かけた。
撮影日(4/6)は平日だったので人出もまあまあでゆっくり散策できた。
使用カメラ：Canon EOS kiss x5
レンズ：CanonEFS 55-250mm
ホワイトバランス：　太陽光