85回目授業内容 テキスト「スマートフォンサイトのためのHTML5 + CSS3」
[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]
テキスト「スマートフォンサイトのためのHTML5 + CSS3」
- 課題サイトの可変グリッドを実戦する
/* reset ---------------------------------------------*/ html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "MS Pゴシック", sans-serif; } ul, ol { list-style: none; } img { border: none; vertical-align: bottom; height: auto; } p { font-size: 0.875em; line-height: 1.3em; } /* font ---------------------------------------------*/ html { font-size: 16px; } body { font-size: 16px; } h1 { font-size: 14px; } h2 { font-size: 14px; } ul, dl { font-size: 14px;} address { font-size: 12px; } /* layout ---------------------------------------------*/ body { /* line-height: 1.0; -webkit-text-size-adjust: none;*/ background: url("../img/bg_all.png") repeat #fff; width: 100%; } #container { /* background-color: #fff;*/ background-image:url("../img/bk_shadow.png"); width: 100%; } #header { width: 96%;/*950px*/ height: 70px; margin: 10px 10px 0 20px ; padding: 20px 5px 0 5px; position: relative; border-bottom: 10px solid #C7B9B2; } .logo { padding-top: 5px; } h1 { display: none; } h2 { font-size: 0.6em; color: #928984; position: absolute; right: 0; top: 30px; } .nav { position: absolute; right: 0; top: 60px; width: 60.8%; } .nav ul { width: 100%; height: auto; margin: 0; padding: 0; border-left: 1px solid #C7B9B2; overflow: auto; } .nav li{ float: left; display: inline; width: 16.4%;/*100px*/ border-right: #C7B9B2 1px solid; } .nav a { padding-top: 5px; font-style: normal; text-align: center; text-decoration: none; display: block; color: #928984; height: 15px; font-size: 0.875em; font-size: 80%; } .nav li a:hover { background-color: #C7B9B2; color: #fff; } .nav li a:visited { color: #928984; } em { font-style: normal; } #wrapper { margin: 0 auto; } #content { width: 75%; margin: 10px 0 10px 20px; float: left; display: inline; } #sidebar { float: right; display: inline; margin: 10px 0 0 0; width: 22%; } #f3a7d7e769315f2 { border:solid 2px #C7B9B2; border-radius: 10px 0 10px 0 / 10px 0 10px 10px; overflow: hidden; height: 780px;/*710px*/ width: 100%;/*240px*/ } #slideshow_box { width: 96%;/*960px*/ height: 22.5%;/*225px*/ overflow: hidden; text-decoration: none; font-style: normal; } #slideshow { max-width: 100%;/*700px*/ height: 330px;/*330px*/ } #slideshow2 { width: 100%;/*700px*/ height: 100%;/*330px*/ border:solid 2px #C7B9B2; border-radius: 10px 0 10px 0 / 10px 0 10px 10px; } #slideshow3 { float: left; display: inline; margin-bottom: 15px; width: 474px; height: 205px; border:solid 2px #C7B9B2; border-radius: 10px 0 10px 0 / 10px 0 10px 10px; } #slideshow4 { float: right; display: inline; width: 474px; height: 205px; border:solid 2px #C7B9B2; border-radius: 10px 0 10px 0 / 10px 0 10px 10px; } #content4 { width: 100%;/*703px*/ overflow: hidden; } #topic { float: left; display: inline; margin: 15px 0 10px 0; padding: 10px 20px 10px 10px; width: 44%;/*316px*/ height: auto; overflow: auto; border:solid 2px #C7B9B2; border-radius: 10px 0 10px 0 / 10px 0 10px 10px; } h3 { font-size: 1.4em; color: #928984; padding-left: 32px; line-height: 1.2em; margin-bottom: 10px; font-weight: bold; background-image:url(../img/icon25px.gif); background-repeat: no-repeat; } #topic dl { word-wrap: break-word; } #topic dt { margin: 15px 0 5px 0; color: #F03; font-weight: bold; } #topic dd { margin: 0 0 8px 7px; border-bottom: 2px dotted #928984; } #supervision { float: right; display: inline; margin: 15px 0 10px 0; padding: 10px 10px 10px 10px; width: 44%;/*318px*/ height: auto; border:solid 2px #C7B9B2; border-radius: 10px 0 10px 0 / 10px 0 10px 10px; } #supervision img { clear: both; float: left; display: inline; margin: 0 10px 25px 0x; } .supervision_p{ width: 100%;/*210px*/ margin: 5px; } #supervision .link { clear: both; width: 99.056604%;/*315px*/ text-align: right; } #school { clear: both; width: 96%;/*678px*/ margin: 10px 0 10px 0; padding: 10px 10px 10px 10px; border:solid 2px #C7B9B2; border-radius: 10px 0 10px 0 / 10px 0 10px 10px; } #school p { margin-left: 10px; } #school #nav ul { width: auto; height: auto; margin: 10px 0 0 0; padding: 0; overflow: auto; } #school #nav li { float: left; display: inline; height: 50px; /* border-left: #C7B9B2 1px solid;*/ } #school #nav a { text-align: center; text-decoration: none; display: block; } #school #nav em { visibility: hidden; } #school #nav li#dance a { background-image: url("../img/baby_dance.jpg" ); width: 222px; height: 50px; background-position:0 0px; } #school #nav li#dance a:hover { background-image: url("../img/baby_dance.jpg" ); width: 222px; height: 50px; background-position: 0 -50px; } #school #nav li#massage a { background-image: url("../img/baby_massage.jpg" ); width: 222px; height: 50px; background-position:0 0px; } #school #nav li#massage a:hover { background-image: url("../img/baby_massage.jpg" ); width: 222px; height: 50px; background-position: 0 -50px; } #school #nav li#music a { background-image: url("../img/baby_play.jpg" ); width: 222px; height: 50px; background-position:0 0px; } #school #nav li#music a:hover { background-image: url("../img/baby_play.jpg" ); width: 222px; height: 50px; background-position: 0 -50px; } #school #nav li#make a { background-image: url("../img/mamamake.jpg" ); width: 222px; height: 50px; background-position:0 0px; } #school #nav li#make a:hover { background-image: url("../img/mamamake.jpg" ); width: 222px; height: 50px; background-position: 0 -50px; } #school #nav li#flower a { background-image: url("../img/flowerarrenge.jpg" ); width: 222px; height: 50px; background-position:0 0px; } #school #nav li#flower a:hover { background-image: url("../img/flowerarrenge.jpg" ); width: 222px; height: 50px; background-position: 0 -50px; } #school #nav li#rinpa a { background-image: url("../img/selfrinpa.jpg" ); width: 222px; height: 50px; background-position:0 0px; } #school #nav li#rinpa a:hover { background-image: url("../img/selfrinpa.jpg" ); width: 222px; height: 50px; background-position: 0 -50px; } #schedule { width: 96%;/*678px*/ margin: 15px 0 10px 0; padding: 10px 10px 10px 10px; border:solid 2px #C7B9B2; border-radius: 10px 0 10px 0 / 10px 0 10px 10px; } #schedule .google_schedule { width: 100%;/*678px*/ border-width: 0 ; height: 600px;/*600px*/ frameborder: 0; scrolling: no; } #footer { clear: both; width: 94%;/*960px*/ height: 110px; margin: 0 auto; padding: 0 20px 10px 0; border-top: 10px solid #C7B9B2; padding-top: 5px; color: #928984; text-align: center; } .footer_nav { width: 100%;/*960px*/ font-size: 0.875em; height: 50px; } .footer_nav ul { margin: 0 0 15px 0; overflow: auto; text-align: center; } .footer_nav li{ float: left; display: inline; width: 14.2857143%;/*100px*/ } .footer_nav a { line-height: 1.8em; font-style: normal; text-align: center; text-decoration: none; display: block; color: #928984; } .footer_nav li a:hover { background-color: #C7B9B2; color: #fff; } .footer_nav li a:visited { color: #928984; } address { margin: 0 0 15px 0; padding-top: 10px; color: }
脱線話(復活)
[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。