aa html aa css DOCTYPE html UTF8 html

aa. htmlファイル aa. cssファイルサンプルを通して理解 <!DOCTYPE html> UTF-8かも知れない <html> <head> <meta charset="Shift_JIS"> <title>My Top

画面分割の確認（aa. htmlとaa. cssの動作結果） background: pink; height: 150 px; background: cyan; height: 150 px; width:

分割部分の表示位置 body {background-color : #dfffff}. sample 1{ background: pink; width: 250 px; height: 150

表示位置の移動 top: 100 px; top: 150 px; left: 100 px; left: 300 px;

基礎技術で制作した index. html <!DOCTYPE html> <head> <meta charset="Shift_JIS"> <title>My Top Page</title> <link rel="stylesheet" href="index.

基礎技術で制作した index. css body { background-color : #dfffff }

index. css はそのまま body { background-color : #dfffff }

画面を 3分割したときのｃｓｓ body { background-color: h 1 { text-align: center; background-color: yellow; } .

Slides: 28

Download presentation

aa. htmlファイル aa. cssファイルサンプルを通して理解 <!DOCTYPE html> UTF-8かも知れない <html> <head> <meta charset="Shift_JIS"> <title>My Top Page</title> <link rel="stylesheet" href="aa. css" type="text/css" media="screen"> </head> <body> body {background-color : #dfffff} <div class="sample 1"> ようこそ私のページへ </div> . sample 2{ background: cyan; width: 250 px; height: 150 px; } <div class="sample 2"> 最新のニュース </div> </body> </html> . sample 1{ background: pink; width: 250 px; height: 150 px; } 左のhtmlをファイル名aa. html 右のcss をファイル名aa. css で作りなさい。約10分待ちます。幅250ﾋﾟｸｾﾙ縦 150ﾋﾟｸｾﾙのピンク色の四角形を作る続いて幅250ﾋﾟｸｾﾙ縦 150ﾋﾟｸｾﾙのシアン色の四角形を作る

画面分割の確認（aa. htmlとaa. cssの動作結果） background: pink; height: 150 px; background: cyan; height: 150 px; width: 250 px;

分割部分の表示位置 body {background-color : #dfffff}. sample 1{ background: pink; width: 250 px; height: 150 px; 追加 position: absolute; top: 100 px; left: 100 px; } sample 1の四角形の左上コーナーの位置を画面上部から100ﾋﾟｸｾﾙ画面左部から100ﾋﾟｸｾﾙの位置に表示（移動） . sample 2{ background: blue; width: 250 px; height: 150 px; 追加 position: absolute; top: 150 px; left: 300 px; } sample 2の四角形の左上コーナーの位置を画面上部から150ﾋﾟｸｾﾙ画面左部から300ﾋﾟｸｾﾙの位置に表示（移動）

表示位置の移動 top: 100 px; top: 150 px; left: 100 px; left: 300 px;

基礎技術で制作した index. html <!DOCTYPE html> <head> <meta charset="Shift_JIS"> <title>My Top Page</title> <link rel="stylesheet" href="index. css" type="text/css" media="screen"> </head> <body> <h 1>ようこそ私のページへ</h 1> <a href="CU. html">中部大学</a> <a href=" P. html">現代教育学部</a> <a href="PJ. html">児童教育学科</a> </body> </html>

基礎技術で制作した index. css body { background-color : #dfffff }

index. css はそのまま body { background-color : #dfffff }

画面を 3分割したときのｃｓｓ body { background-color: h 1 { text-align: center; background-color: yellow; } . left_side h 2 {background-color: width: position: top: left: #cfffff; } cyan; 24%; absolute; 80 px; 1%; } 背景の色はｼｱﾝとし、左側を全体の 24%の幅とし、 body領域を基準として、上部から80ﾋﾟｸｾﾙ下で左側 1%の位置から表示 { text-align: center; background-color: yellowgreen; } . right_side {background-color: position: top: 右側のブロックの幅指定（wide)が left: 無い時は、画面右端までとなる。 white; absolute; 80 px; 26%; } 背景の色は白とし、、 body領域を基準として、上部から80ﾋﾟｸｾﾙ下で左側 26%の位置から表示