23日目 CSS3でグラデーション webページ作成練習
CSS3でグラデーション
CSSでグラデーションとつけるのと
photoshopでグラデーションをつけるのと
なにが違うのか
CSSはベクトルで計算している為ページを画像を拡大しても画質が荒れないきれいなままを保っていられる
photoshopはビットマップでできている為拡大するとカクカクしたものが見えてしまってキレイに見えない
高解像度のディスプレイでもきれいなままを保つ為にCSS3でどうしてもできないものをphotoshopで作ったほうがよい
CSS3でグラデーションを作るとき
「CSS3 グラデーション ジェネレーター」でグラデーションの値を出してくれるツールがある
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS3 グラデーション</title> </head> <body> <div id="box"></div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div> <div id="box5"></div> </body> </html>
<style> html,body { margin: 0; padding: 0; line-height: 1.0; } #box { width: 600px; height: 300px; margin: 50px auto 0; background-color: #F36; background: -webkit-linear-gradient(top,#F36,#FFF); /*グラデーションはベンダープレフィックスが入ると出発地点を記載*/ background: linear-gradient(to bottom,#F36,#FFF); /*W3C方式はto bottomで行き先を記載*/ } #box2 { width: 600px; height: 300px; margin: 50px auto 0; background-color: #FF0; background: -webkit-linear-gradient(left,#FF0,#FFF); /*グラデーションはベンダープレフィックスが入ると出発地点を記載*/ background: linear-gradient(to right,#FF0,#FFF); /*W3C方式はto bottomで行き先を記載*/ } #box3 { width: 600px; height: 50px; margin: 50px auto 30px; background-color: #F36; background: -webkit-linear-gradient(top, #FFCED7 0%, #F74657 49%, #F10013 51%, #FE2951 100%);/*古いブラウザ対策*/ background: linear-gradient(to bottom, #FFCED7 0%, #F74657 49%, #F10013 51%, #FE2951 100%);/*W3C方式*/ }/*％は場所の位置*/ #box4 { width: 600px; height: 50px; margin: 50px auto 30px; background: #f3c5bd; /* Old browsers */ background: -webkit-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } #box5 { width: 300px; height: 300px; margin: 50px auto 30px; border-radius: 50%;/* 50%入れると正円になる*/ background: #f3c5bd; background: -webkit-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); background: linear-gradient(to bottom, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); } </style>
webページ作成練習
google WEBスターターガイドを必ず読むこと
SEO対策には常にhtmlファイル名は「index.html」にしなければならない
フォルダで管理すること
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>日本の四季</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <h1><span class="home">日本の四季</span></h1> <p>日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。<br> 春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、 そうしているうちに<br>桜が咲き、夏が来る。 そして秋になり、また冬を迎える。<br> このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。<br> 春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。</p> </header> <section class="content"> <div class="box"> <p class="img"><a href="spring/index.html"><img src="img/spring_s.png" alt="富士山と桜"></a></p> <p class="text">春（3月～5月）</p> </div> <div class="box"> <p class="img"><a href="summer/index.html"><img src="img/summer_s.png" alt="宮古島の海"></a></p> <p class="text">夏（6月～8月）</p> </div> <div class="box"> <p class="img"><a href="fall/index.html"><img src="img/fall_s.png" alt="外苑前銀杏並木"></a></p> <p class="text">秋（9月～11月）</p> </div> <div class="box"> <p class="img"><a href="winter/index.html"><img src="img/winter_s.png" alt="黒姫山"></a></p> <p class="text">冬（12月～2月）</p> </div> </section><!--/.content--> <footer> <p><small>Copyright © Felica All Rights Reserved.</small></p> </footer> </div><!--/.container--> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>春のページ</title> <link rel="stylesheet" href="../css/style.css"> </head> <body> <div class="container"> <header> <h1><span class="spring_color">春</span></h1> </header> <section class="content"> <div class="wrapper"> <p class="big_img"><img src="../img/spring_b.png" alt="富士山と桜"></p> <div class="main"> <h2><span class="spring_color">桜</span></h2> <p>「サクラ」の名称の由来は、一説に「咲く」に複数を意味する「ら」を加えたものとされ、元来は花の密生する植物全体を指したと言われている。<br> また他説として、春に里にやってくる稲（サ）の神が憑依する座（クラ）だからサクラであるとも考えられている。<br> 富士の頂から、花の種をまいて花を咲かせたとされる、「コノハナノサクヤビメ（木花之開耶姫）」の「さくや」をとって「桜」になった、とも言われている。</p> </div><!--/.main--> </div><!--/.wrapper--> <div class="box"> <p class="img"><a href="../index.html"><img src="../img/home.png" alt="トップページ"></a></p> </div> <div class="box"> <p class="img"><a href="../summer/index.html"><img src="../img/summer_s.png" alt="宮古島の海"></a></p> <p class="text">夏（6月～8月）</p> </div> <div class="box"> <p class="img"><a href="../fall/index.html"><img src="../img/fall_s.png" alt="外苑前銀杏並木"></a></p> <p class="text">秋（9月～11月）</p> </div> <div class="box"> <p class="img"><a href="../winter/index.html"><img src="../img/winter_s.png" alt="黒姫山"></a></p> <p class="text">冬（12月～2月）</p> </div> </section><!--content--> </div><!--/.container--> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>夏のページ</title> <link rel="stylesheet" href="../css/style.css"> </head> <body> <div class="container"> <header> <h1><span class="summer_color">夏</span></h1> </header> <section class="content"> <div class="wrapper"> <p class="big_img"><img src="../img/summer_b.png" alt="宮古島の海"></p> <div class="main"> <h2><span class="summer_color">南国の海</span></h2> <p>エメラルドグリーンに輝く沖縄の海は世界にほこれる美しい海であり数百種のサンゴがすみ、色あざやかな熱帯魚がむれをなして泳いでいます。<br> 周囲の海底はサンゴなので石灰分が非常に含まれており、植物性プランクトンが発生しにくく、植物性プランクトンの発生も無ければ、死骸もないので、海水が濁らないそうです。</p> </div><!--/.main--> </div><!--/.wrapper--> <div class="box"> <p class="img"><a href="../index.html"><img src="../img/home.png" alt="トップページ"></a></p> </div> <div class="box"> <p class="img"><a href="../spring/index.html"><img src="../img/spring_s.png" alt="富士山と桜"></a></p> <p class="text">春（3月～5月）</p> </div> <div class="box"> <p class="img"><a href="../fall/index.html"><img src="../img/fall_s.png" alt="外苑前銀杏並木"></a></p> <p class="text">秋（9月～11月）</p> </div> <div class="box"> <p class="img"><a href="../winter/index.html"><img src="../img/winter_s.png" alt="黒姫山"></a></p> <p class="text">冬（12月～2月）</p> </div> </section><!--content--> </div><!--/.container--> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>秋のページ</title> <link rel="stylesheet" href="../css/style.css"> </head> <body> <div class="container"> <header> <h1><span class="fall_color">秋</span></h1> </header> <section class="content"> <div class="wrapper"> <p class="big_img"><img src="../img/fall_b.png" alt="外苑前銀杏並木"></p> <div class="main"> <h2><span class="fall_color">紅葉</span></h2> <p>普段、葉が緑色に見えるのはクロロフィルが含まれるからであるが、寒くなり日照時間が短くなるとクロロフィルが分解される。<br> また、葉柄の付け根に離層という特殊な水分を通しにくい組織ができ、葉で作られた水溶性のブドウ糖や蔗糖などの糖類やアミノ酸類が葉に蓄積し、その糖から光合成を利用して新たな色素が作られたりする。その過程で葉の色が赤や黄色に変化し、紅葉が起こる。</p> </div><!--/.main--> </div><!--/.wrapper--> <div class="box"> <p class="img"><a href="../index.html"><img src="../img/home.png" alt="トップページ"></a></p> </div> <div class="box"> <p class="img"><a href="../spring/index.html"><img src="../img/spring_s.png" alt="富士山と桜"></a></p> <p class="text">春（3月～5月）</p> </div> <div class="box"> <p class="img"><a href="../summer/index.html"><img src="../img/summer_s.png" alt="宮古島の海"></a></p> <p class="text">夏（6月～8月）</p> </div> <div class="box"> <p class="img"><a href="../winter/index.html"><img src="../img/winter_s.png" alt="黒姫山"></a></p> <p class="text">冬（12月～2月）</p> </div> </section><!--content--> </div><!--/.container--> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>冬のページ</title> <link rel="stylesheet" href="../css/style.css"> </head> <body> <div class="container"> <header> <h1><span class="winter_color">冬</span></h1> </header> <section class="content"> <div class="wrapper"> <p class="big_img"><img src="../img/winter_b.png" alt="黒姫山"></p> <div class="main"> <h2><span class="winter_color">雪の北信濃</span></h2> <p>黒姫山は斑尾山、妙高山、戸隠山、飯綱山とともに北信五岳のひとつに数えられている山で、今から約17万年前ごろから火山活動を初め、4万年前ごろに現在の中央火口丘である小黒姫山(2,046m)を形成した。外輪山と中央火口丘の間には火口原が広がり七ツ池がある。<br> 南東方向より見た整った姿から信濃富士とも呼ばれている。 古くから信仰の対象とされ、黒姫というお姫様の悲話伝説（黒姫伝説）があり、山名の由来になったと言われている。<br>冬季には黒姫高原スノーパークでスキーやスノーボードが楽しめる。</p> </div><!--/.main--> </div><!--/.wrapper--> <div class="box"> <p class="img"><a href="../index.html"><img src="../img/home.png" alt="トップページ"></a></p> </div> <div class="box"> <p class="img"><a href="../spring/index.html"><img src="../img/spring_s.png" alt="富士山と桜"></a></p> <p class="text">春（3月～5月）</p> </div> <div class="box"> <p class="img"><a href="../summer/index.html"><img src="../img/summer_s.png" alt="宮古島の海"></a></p> <p class="text">夏（6月～8月）</p> </div> <div class="box"> <p class="img"><a href="../fall/index.html"><img src="../img/fall_s.png" alt="外苑前銀杏並木"></a></p> <p class="text">秋（9月～11月）</p> </div> </section><!--content--> </div><!--/.container--> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,h2,p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { font-size: 16px; } header { margin: 0 20px 20px; } .home { background: -webkit-gradient(linear, left center, right center, from(rgba(255,0,0,0.2)), color-stop(14%, rgba(255,69,0,0.2)), color-stop(28%, rgba(255,255,0,0.2)), color-stop(42%, rgba(0,128,0,0.2)), color-stop(56%, rgba(0,0,255,0.2)), color-stop(70%, rgba(75,0,130,0.2)), to(rgba(238,130,238,0.2))); background: linear-gradient(left, rgba(255,0,0,0.2), rgba(255,69,0,0.2), rgba(255,255,0,0.2), rgba(0,128,0,0.2), rgba(0,0,255,0.2), rgba(75,0,130,0.2), rgba(238,130,238,0.2) ); border-radius: 10px; padding: 0 10px; } header>h1 { margin-bottom: 20px; font-size: 50px; } header p { line-height: 1.5; } .container { width: 920px; margin: 0 auto; background: #FFF; padding: 20px; } .content { width: 890px; overflow:hidden; margin: 0 auto 30px; } .box { width: 200px; float:left; margin: 0 10px; text-align: center; } .img img { margin-bottom: 10px; width: 200px; height: 200px; border-radius: 50%; } footer p { text-align: center; padding-top: 20px; } /*spring*/ .big_img { width: 500px; float:left; margin-right: 20px; } .wrapper { width: 890px; overflow:hidden; margin: 0 auto 50px; } .main { width:370px; float:left; } .main p { line-height: 1.5; } h2 { margin-bottom: 20px; font-size: 40px; } .spring_color { color: #F6C; } .summer_color { color: #090; } .fall_color { color: #900; } .winter_color { color: #39C; }
