html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>山岳環境研究室</title> 6 <link rel="stylesheet" href="common.css"> 7 </head> 8 <body> 9 <header> 10 <div class="header-left"> 11 <img src="image/S__9576515.jpg" alt="山岳環境研究室" class="header-logo"> 12 <h1>山岳環境研究室</h1> 13 </div> 14 </header><!-- /header --> 15 <div class="top"></div> 16 <div class="navi"> 17 <div class="menu home"> 18 <a href="index.html">ホーム</a> 19 </div> 20 <div class="menu research"> 21 <a href="research.html">研究</a> 22 </div> 23 <div class="menu gallery"> 24 <a href="gallery.html">ギャラリー</a> 25 </div> 26 <div class="menu media"> 27 <a href="media.html">メディア</a> 28 </div> 29 <div class="menu access"> 30 <a href="access.html">アクセス</a> 31 </div> 32 </div> 33 <div class="main"> 34 <div class="container"> 35 <div class="description"> 36 <p>当研究室では、</p> 37 <p>天山山脈,ヒマラヤ,日本アルプスなどのアジア山岳地域を対象に、フィールドワーク(現地調査・観測),GIS(地理情報システム),リモートセンシング(衛星画像解析)の手法を用いて,山岳氷河の変動,山岳永久凍土の空間分布と存在環境,氷河湖決壊洪水や地形災害のプロセスとその被害に関する山岳環境変動の実態解明をめざして活動しています。</p> 38 </div> 39 <div class="menu pic"> 40 41 </div> 42 </div> 43 </div> 44 <footer> 45 <p>© 山岳環境研究室 All Rights Reserved.</p> 46 </footer> 47 </body> 48</html>
css
1@charset "utf-8"; 2*{ 3 margin:0; 4 padding:0; 5} 6body{ 7 width:960px; 8 margin:0 auto; 9} 10header{ 11 height:90px; 12 background-color:#1fab89; 13 border-bottom:1px solid #CCCCCC; 14} 15.header-left{ 16 display:flex; 17} 18.header-logo{ 19 height:65px; 20 width:65px; 21 display:inline-block; 22 margin-top:12.5px; 23 margin-left:15px; 24 border-radius:50%; 25} 26header h1{ 27 color:white; 28 margin-top:22px; 29 margin-left:4px; 30} 31.top{ 32 height:300px; 33 background-image:url("image/title-image.jpg"); 34 background-size:contain; 35 background-size:cover; 36} 37.navi{ 38 height:55px; 39 background-color:#62d2a2; 40 display:inline-block; 41 width:100%; 42 display:flex; 43} 44.menu{ 45 border-left:1px dashed white; 46 height:55px; 47 line-height:55px; 48 width:20%; 49} 50.menu:hover{ 51 background-color:#239b76; 52 transition:background-color 0.5s; 53 } 54.menu a{ 55 color:white; 56 display:inline-block; 57 width:100%; 58 text-align:center; 59 text-decoration:none; 60} 61.home{ 62 border-left:none; 63} 64.main{ 65 height:700px; 66} 67.description{ 68 margin-top:100px; 69 padding:0 140px 0 140px; 70} 71.description p{ 72 font-family:Open Sans; 73 width:100%; 74 text-align:center; 75 line-height:40px; 76} 77.main{ 78 79} 80.main img{ 81 width:50%; 82 height:auto; 83} 84footer{ 85 background-color:#d7fbe8; 86 height:90px; 87} 88footer p{ 89 width:100%; 90 height:90px; 91 line-height:90px; 92 text-align:center; 93}
<div class="menu pic">
</div>
と、ガッツリ入っているように見えますが。
回答3件
あなたの回答
tips
プレビュー