2017-09-09 11:51:10　冷凍庫の手作りおかず表　div　HTML5

2017-10-07 11:32:37　ｃｓｓ　お勉強　一覧　リンクカラー　onmouseover="this.color=

2017-09-20 11:54:53　冷凍庫の手作りおかず表に　料理一覧を移項

2017-09-04 09:46:17　2017/9/3～に調理したもの
tableタグから変更・削除が　簡単にできる　divタグにしました。
gooブログ無料はstyle=タグで　値の変更をするようです。(cssの書き方)

テンプレートをカスタムにすれば可能かもしれません。
ｃｓｓ、少し理解でききた気がします

9/11 < clear: both; > 回り込みを解除を　前後のみにしたけれど。
画面のサイズで　勝手に並ぶ
一塊< div>

～タグを削除すればいいだけなので
暫くこれでやってみます。
9/14　野菜類は　背景を緑< background-color;> #99ff33 にした。

リンクのアンカー=を追加
<　a name　>で検索すると　古いタグとのことで　調べてみた。

html5追加されたもの(2014年)は　W3Cから勧告されたそうです。

タグは一塊は使いやすいように新しいタグがあるらしい。
タグを書き込んででみたがまだ対応していないようで利用可能なHTMLのタグ一覧　であった。

HTML５の関連で追加されたタグをメモておきます。理解は不十分だからね。
http://www.htmq.com/html5/001.shtmlより引用

< section > …… 一つのセクションであることを示すHTML5から追加
< nav > …… ナビゲーションであることを示すHTML5から追加
< article > …… 記事であることを示すHTML5から追加
< aside >…… 余談・補足情報のセクションであることを示すHTML5から追加
< hgroup > …… セクションの見出しを表す、見出しをまとめる【廃止予定】
< header > ……ヘッダであることを示すHTML5から追加
< footer > …… フッタであることを示すHTML5から追加
< address > …… 連絡先・問合せ先を表す

9/15 タグが使用不可能なものや　間違いがあると　消されたり　わけのわからない状態になり　
使った料理の弁当のリンクを付けてみた。　9/22メンドイので取りやめ

9/17　カスタマイズできる　テンプレートを試してみたが　さっぱりでした。

9/19 hrタグ　画像(画20pxに縮小)でライン　↓

< div id=” title-banner-top ” >できるけど　編集画面には表れない。↓実行　プレビー画面は表示　テンプレート変更するとどうなるのだろう？

9/20　使用料理リンク先　http://blog.goo.ne.jp/a2a2a2yo/e/・・・・#・・

9/21　HTMLの編集しにくので　見本を作成　私なりの理解は　margin(余白、欄外、縁、へり、端) padding(隙間部分)　span(梁間)と思うことにする。
またまためちゃくちゃなソース部分ができてしまった。
ブログの編集画面のソースエディタは　spanがいっぱいできて余計わからないよ！！！
ミスがあったり　変更すると　もう本当大変です。力不足！！！　私のメモリー・cpu 不足！！かもね。

9/22　ｃｓｓは　10年くら前にかじったことはありました。理解は不完全燃焼で　再度挑戦しています。ちょっと進化した気がします。

9/28　style=" width: ・・%; min-width: ・・px;　もできました。

文字サイズを　画面の大きさにあわせ変化させる。よくわかりません。取組み中　こういったタグのあるとの　知識で十分！！
①@media　HTMLクイックリファレンスより

CSSには@で始まる@ルール（at-rule）と呼ばれる書式が定められています。これらはCSSでスタイルシートを記述するにあたってのルールを定義するものです。

②WPJ(webスキルアップ応援サイト)より　

CSSにViewport単位（Viewport Uints）が導入されてから数年になります。ブラウザーのサイズが変更されるたびに値が変わるという意味で、真にレスポンシブな単位と言えます。

9/29 http://www.asobou.co.jp/blog/web/responsive より引用なんとか理解できたかな？　一旦終了　※パソコン内のファイルでテスト　できました。
ソースコードの要素内にビューポート(viewport)を記述

【設定方法1】CSS内で記述する

CSSを記述している箇所に、メディアクエリを使用します。

@media screen and (max-width: 480px)　{ 0px～480pxの画面サイズにCSSを適応 }
@media screen and (min-width: 480px)　{ 480以上の画面サイズにCSSを適応 }
@media screen and (min-width: 480px) and ( max-width:1024px)　 { 480px～1024pxの画面サイズにCSSを適応 }

【設定方法2】HTMLファイル内のlinkタグで設定

画面サイズで外部CSSファイルを切り替える方法です。

▼HTML記述例▼

< link rel="stylesheet" media="(max-width: 480px)" href="・・・・・・・.css">

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------