html5に関する作業メモ

figcaption　行間きかない　スマートフォン

display:block;で回避。


◆アドレスタグにイタリックがかかる。ななめになる。

スタイルシートで

address {
font-style:normal;
}

参考サイト↓
http://template.b-cures.net/dl/stylecss/index9.html

◆Dreamweaverテンプレートにすると文字化け
諦める。テンプレートのみの文字化け回避はあったけど、
編集可能領域が文字化けする。

ライブラリーでわける

ライブラリーも勝手にタグがはいるので削除。

◆テーブルのcellpaddingとcellspacingのかわりになるもの
border-collapse： separate;
border-spacing:： 0px 0px;



◆線にグラデーション
キャンバスでもできるが、空要素になる。
特に線に意味が無い場合は、divでやる

自分のHPに検索機能をつける

◆google

http://www.1kara.net/knowhow/search.php


◆複数のCSSをjQueryでかくとき

http://www.nk0206.com/life/2009/10/jquerycss.html

角丸 シャドウ 【CSS3】

◆角丸
border:5px solid #ffcc99;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;



◆シャドウ
box-shadow:1 px 1 px 5 px #000;
-moz-box-shadow:1 px 1 px 5 px #000;
-webkit-box-shadow:1 px 1 px 5 px #000;

:横　縦　ぼかし　＃色;


横を『0』にすると両サイドに影ができる。

綺麗だった比率は　： 0 0 0.2em ＃色；
※IEだと、0ゼロにすると消える…
↓
解決策を探すのが面倒なので、IEだけ背景にいれるしかない。

とっても親切参考サイト↓
http://www.tagindex.com/stylesheet/filter/glow.html
http://www.htmq.com/style/filter.shtml

IE7と8 『ie-css3』がうまくいかないとき 【CSS3】

◆『ie-css3』がうまくいかないとき『角丸』

→CSS3で指定したところが、消えた
原因↓
背景の色の指定
なぜか、背景の色を指定したいとき、一番下に表示される。

CSS3プラス
position:relative;
z-index:1;

と、かくと直った。




◆IE用にまとめたCSSをつくってみる。

スタイル名{
position:relative;
z-index:1;
behavior: url(ie-css3.htc);
}


何気に動く、IE8・IE7は動いた。IE9は知らない。

※注意点

置くところは、CSS3でかいたCSSより上に置かないとできない。
一番上らへんに置けば問題ない。今のところ角丸だけ？

＜例＞
{IE用にまとめたCSS}
｛角丸してねCSS3｝



『PIE.htc』を使うと、↑これらはいらない。

displayBOX 【CSS3】

◆簡単にレイアウト




A…display:box;（★）

BとC…box-flex:●●;→比率
　　　　box-ordinal-group：●●；→順番



（★）…-moz-とか、つくところが違うので注意！！


IEとオペラは見れない。

各ブラウザで見えるようにする。【HTML5】

◆ベンダープレフィックス

IE→-ms-

Firefox→-moz-

Safari→-webkit-

Chrome→-webkit-

opera→-0-


今の段階では全部付けておいた方がいい。
後で、消す。

IEは、ほぼ無視する。付けても使えない。.htcを使っても使いたいの使えない。
IEだけ別でつくる。

※IE以外は簡単なCSS3なら最新版はだいたい見れた。display:BOX;はなくちゃ見れない。

CSS 【HTML5】

◆角丸
border-radius(ラディウス)


◆影を付ける(ボタン)

親切サイト→CSS3でドロップシャドウを作る『box-shadow』プロパティのまとめ｜MONODEZ


CSS3をIEに対応させてくれる？？↓
http://www.hislab.net/blog/2010/12/ie-css3.html

IE対策 【HTML5】

これをコピーするだけ
→http://remysharp.com/

IE7IE8は見れたIE9は？




----------とっても親切参考サイト---------
・html5をIEに対応させるには | yoseyama Blog
http://www.yoseyama.jp/blog/2011/01/html5ie.html

追加された要素 【HTML5】

◆文章構造化の為に追加された要素一覧

※注：右側のコメントはなんとなく覚えるための私的なものです。

header…ID="head"と指定していたところ+セクションの中に入れることで意味もまた違ってくる
footer…ID="foot"と指定していたところ+セクションの中に入れることで意味もまた違ってくる
nav…ID="navi"と指定していたところ
section…見出しがあるものをすべてこれで囲む
article…ただの記事・独立したもの　※これは入れ子に出来ない
aside…サブナビ・関連性の低いもの
address…プロフィールや連絡先、お問い合わせなど
→ページの中で使うと、その内容の連絡先
→フッターに入れると、ページ全体の連絡先

hgroup…見出しをまとめたりする
figure(フィギア)…画像
figcaption(フィグキャプション)…画像のキャプション※勝手に改行される
↑figure(フィギア)の中に入れるのが正解らしい
mark…重要なもの、検索で引っかかったみたいになるらしい色が付く
rudy…ふりがながつくもの
rt…↑のそのふりがなそのもの
rp…↑のふりがなに対応していないものに使う
time…時間・日付とか

ｈｔｍｌ5のメモ

◆末尾に『/』スラッシュを入れなくなくてもよくなったもの

<img > <ｂｒ>
<inqut><link>



そのほかいろいろあるけどあんまりつかわない。
hrとか

◆終了タグの省略

<li>※ulとかにはいってるから

<dt>※ｄｌにはいってるから
<dd>※ｄｌにはいってるから

<p>

<tr>※tableにはいってるから
<th>※tableにはいってるから
<td>※tableにはいってるから



引用符を省略…HTML5になれるまでは、無理して省略しなくてもいいや

pdf 色が変わる 画像じゃない

◆画像でもないのに、色が変わってしまう原因

グラデーションが邪魔してる。

要らないグラデは消す。