２月２６日 授業内容② ＊授業の概要は①に掲載しています。
＊HTML5でアウトライン構造を理解する
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTML5でのアウトライン構造を理解する</title> </head> <body> <header> <h1>HTMLについて</h1> <p>HTML（HyperText Markup Language）とは、ウェブ上の文書を記述するためのマークアップ言語である。</p> </header> <section class="aaa"> <h1>HTML5</h1> <p>HTML5は、HTML4に代わる次世代のHTMLとして2008年1月に草案が発表され、2014年10月に勧告された新しいHTML仕様。</p> <section class="bbb"> <h1>HTML5の新要素</h1> <p>header、nav、footerなどが新しい要素して加わりました。</p> <section class="ccc"> <h1>header要素</h1> <p>header要素とは…です。</p> </section><!--.ccc--> <section class="ccc"> <h1>nav要素</h1> <p>nav要素とは…です。</p> </section><!--.ccc--> </section><!--.bbb--> </section><!--.aaa--> <section class="aaa"> <h1>XHTML</h1> <p>HTML 4.01をXMLにて再定義したもので、その仕様はHTMLと同じくW3Cによって勧告されている。</p> <section class="bbb"> <h1>XHTMLで使われていた要素</h1> <p>div要素やp要素などが使われていました。</p> <section class="ccc"> <h1>div要素</h1> <p>div要素とは…です。</p> </section><!--.ccc--> <section class="ccc"> <h1>p要素</h1> <p>p要素とは…です。</p> </section><!--.ccc--> </section><!--.bbb--> </section><!--.aaa--> </body> </html>||< >|html| <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/background_size.css"> <title>background-size,background-attachment</title> </head> <body> <div id="container"> <header> <h1></h1> </header> <div id="content"> <div class="box size2x2"></div> <div class="box size1x1"></div> <div class="box size1x1"></div> <div class="box size1x1"></div> <div class="box size1x2"></div> </div><!--#content--> <footer> </footer> </div><!--#container--> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,div,h1,p{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; padding:0; margin:0; line-height:1.0; } body{background-color:#464646;/*画像を読み込むまでに時間がかかる、かつ文字が白いときはブラウザでの表示が白色しか見えないため中間色を設定し、ユーザーが画面からすぐ離れないようにする。*/ background:url(../img/background_size_aftershrink.png) no-repeat; background-size:cover;/*Ｐ２８６、２８７ coverだけだと高さが広すぎる時にデザインが崩れるため、background-attachment:fixed;を入力する*/ background-attachment:fixed;} header{width:960px; height:300px; margin:50px auto 0; background:rgba(0,0,0,0.5);/*rgbの全ての値が０だと黒、255だと白*/ border-radius:50px; border:10px #fff solid; box-sizing:border-box;}/*P284 box-sizingを設定するとborderまでの領域をwidthとして計算する。*/ #content{width:960px; margin:50px auto 0; overflow:hidden;} .box{background:rgba(255,255,255,0.5); float:left; } .size2x2{width:600px; height:700px; margin-right:20px;} .size1x1{width:340px; height:340px; margin-bottom:20px;} .size1x2{width:600px; height:340px; margin-left:20px;} footer{height:200px; background:rgba(200,100,100,0.7); margin:50px auto 0; |css|< >|html| <!DOCTYPE HTML> <html lang="ja"> <head> <link rel="stylesheet" href="css/japanese_fish.css"> <meta charset="utf-8"> <title>rubyと縦書き</title> </head> <body> <header> <p> <ruby>寒鯉<rt>かんごい</rt></ruby>の <ruby>一擲<rt>いってき</rt></ruby>したる <ruby>力<rt>ちから</rt></ruby>かな <br> <ruby>寒鯉<rt>かんごい</rt></ruby>の あらはの鰭や <ruby>古盥<rt>たらい</rt></ruby> </p> </header> </body> </html>
@charset "utf-8"; /* CSS Document */ /*reset*/ html,body,h1,h2,h3,p,small,ul,li{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; padding:0; margin:0; line-height:1.0;} a{text-decoration:none;} ul,li{list-style:none;} body{background:url(../img/fish_aftershrink.png) no-repeat; background-size:cover; background-attachment:fixed; background-color:#555; position:relative;} header{background:rgba(255,255,255,0.5); width:100px; position:absolute; top:50px; right:200px; border-radius:20px;} p{font-family:"ヒラギノ明朝 proN", "HG明朝E", "MS P明朝", "MS 明朝", serif; line-height:3.0rem;/*文と文の間隔の調整*/ color:violet; text-align:center; font-size:24px; -webkit-writing-mode:vertical-rl;/*縦書で右から左よりという意味*//*chrome,safari用の記述*/ -ms-writing-mode:tb-rl;/*IE用の記述*//*ｔｂはトップからボトムという意味*/ writing-mode:vertical-rl;}/*firefox用の記述 */
