More Related Content
Similar to イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう (20)
More from Mori Kazue (20)
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
- 2. r360studio 森和恵
•
Web系のセミナー講師(iMedio)
•
書籍執筆「 よくわかるFireworksの教科書 」
•
勉強会「 ガチンコバトル勉強会 in 大阪 」
•
r360studio.com
•
Twitter @r360studio
- 8. 創成期に、Web仕事を始めました
•
1996年 Yahoo! がスタート
•
1997年 Microsoft FrontPage で制作開始
•
1997年 Internet Explorer 4 が登場
•
1998年 Adobe Dreamweaver2 に変更(テーブルレイアウト)
•
1998年 Google がスタート
•
2006年 Web標準の日(CSSレイアウト)
•
2008年 iPhone発売(モバイル対応レイアウト)
- 17. 画像を表示する<img>
•
img要素
•
src属性で表示する画像ファイルを指定
•
alt属性で表示できなかった時の代替テキストを指定
•
width属性とheight属性で原寸でも表示サイズを指定
<img src=“画像ファイル指定“ alt=“代替テキスト”
width=“高さ” height=“幅”>
- 19. HTML5になり変更後の<img>
•
img要素
•
src属性で表示する画像ファイルを指定
•
サイズ指定は不要
•
alt属性で表示できなかった時の代替テキスト (置き換えても同等となるテキスト情報)を指定
•
alt属性が文脈的に不要であれば、空文字列を指定
<img src=“画像ファイル指定“ alt=“代替テキスト”>
- 26. グラデーション色指定 CSS3 Gradients
<div class="box2">Sample box</div>
.box2{
background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#FFFF4D));
}
※旧機種のスマホなど
- 27. 仕様変更後1の CSS3 Gradients
<div class="box2">Sample box</div>
.box2{
background: -webkit-linear-gradient(top, #00FFFF, #FFFF4D);
}
※スマホ、Safari、Chromeなど
- 28. 仕様変更後2の CSS3 Gradients
<div class="box2">Sample box</div>
.box2{
background: linear-gradient(to bottom, #00FFFF , #FFFF4D);
}
※ほぼすべての最新環境で共通
- 29. 現在の CSS3 Gradients
<div class="box2">Sample box</div>
.box2{
background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#FFFF4D));
background: -webkit-linear-gradient(top, #00FFFF, #FFFF4D);
background: linear-gradient(to bottom, #00FFFF , #FFFF4D);
}
- 38. 10月 HTML
第1回 10月18日 14~16時 HTML(1)
第2回 10月28日 19~21時 HTML(2)
- 39. 11月 CSS
第3回 11月12日 19~21時 CSS(1)
第4回 11月26日 19~21時 CSS(2)
- 40. 12月 資格試験 HTML5レベル1
第5回 12月10日 19~21時 資格試験 HTML5レベル1(1)
第6回 12月17日 19~21時 資格試験 HTML5レベル1(2)