Q&A
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>山岳環境研究室</title> 6 <link rel="stylesheet" href="common.css"> 7 <link rel="stylesheet" href="index.css"> 8 </head> 9 <body> 10 <header> 11 <div class="header-left"> 12 <img src="image/S__9576515.jpg" alt="山岳環境研究室" class="header-logo"> 13 <h1>山岳環境研究室</h1> 14 </div> 15 </header><!-- /header --> 16 <div class="top"></div> 17 <div class="navi"> 18 <div class="menu home"> 19 <a href="index.html">ホーム</a> 20 </div> 21 <div class="menu research"> 22 <a href="research.html">研究</a> 23 </div> 24 <div class="menu achievement"> 25 <a href="achievement.html">実績</a> 26 </div> 27 <div class="menu access"> 28 <a href="access.html">アクセス</a> 29 </div> 30 <div class="menu gallery"> 31 <a href="gallery.html">ギャラリー</a> 32 </div> 33 </div> 34 <div class="main"> 35 <div class="container"> 36 <div class="description"> 37 <p>当研究室では、</p> 38 <p>天山山脈,ヒマラヤ,日本アルプスなどのアジア山岳地域を対象に、フィールドワーク（現地調査・観測），GIS（地理情報システム），リモートセンシング（衛星画像解析）の手法を用いて，山岳氷河の変動，山岳永久凍土の空間分布と存在環境，氷河湖決壊洪水や地形災害のプロセスとその被害に関する山岳環境変動の実態解明をめざして活動しています。</p> 39 </div> 40 <div class="pic"> 41 <div class="home-card"> 42 <div class="menu-card-inner"> 43 <a href="research.html"><img src="image/laboratory-2815641_1920.jpg" alt="研究"></a> 44 <a href="research.html" class="home-menu-title">研究</a> 45 </div> 46 </div> 47 <div class="home-card"> 48 <div class="menu-card-inner"> 49 <a href="achievement.html"><img src="image/books-1245690_1920.jpg" alt="実績"></a> 50 <a href="achievement.html" class="home-menu-title">実績</a> 51 </div> 52 </div> 53 <div class="home-card"> 54 <div class="menu-card-inner"> 55 <a href="access.html"><img src="image/wind-rose-1209398_1920.jpg" alt="アクセス"></a> 56 <a href="access.html" class="home-menu-title">アクセス</a> 57 </div> 58 </div> 59 <div class="home-card"> 60 <div class="menu-card-inner"> 61 <a href="gallery.html"><img src="image/lens-3046269_1920.jpg" alt="ギャラリー"></a> 62 <a href="gallery.html" class="home-menu-title">ギャラリー</a> 63 </div> 64 </div> 65 </div> 66 </div> 67 </div> 68 <footer> 69 <p>© 山岳環境研究室 All Rights Reserved.</p> 70 </footer> 71 </body> 72</html> 73
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:rgba(34, 49, 52, 0.9); 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 font-family:Raleway; 31} 32.top{ 33 height:300px; 34 background-image:url("image/title-image.jpg"); 35 background-size:contain; 36 background-size:cover; 37} 38.navi{ 39 height:55px; 40 background-color:#62d2a2; 41 display:inline-block; 42 width:100%; 43 display:flex; 44 45} 46.menu{ 47 border-left:1px dashed white; 48 height:55px; 49 line-height:55px; 50 width:20%; 51} 52.menu:hover{ 53 background-color:#239b76; 54 transition:background-color 0.5s; 55 } 56.menu a{ 57 color:white; 58 display:inline-block; 59 width:100%; 60 text-align:center; 61 text-decoration:none; 62} 63.home{ 64 border-left:none; 65} 66footer{ 67 background-color:#d7fbe8; 68 height:90px; 69} 70footer p{ 71 width:100%; 72 height:90px; 73 line-height:90px; 74 text-align:center; 75}
回答1件
0
ベストアンサー
WebフォントのGoogle Fontsを使えばどうでしょうか。
具体的には、HTMLのhead内に下記のコードを記述するだけです。
html
1<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
これでCSSで適用したいセレクタに下記のように記述すれば反映されます。
css
1font-family: 'Raleway', sans-serif;
詳細は下記を参照してください。
投稿2020/01/22 15:41
総合スコア33715
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。