webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

レスポンシブレイアウトの演習2

レスポンシブレイアウトを作成しましょう。
今回のポイントは、

  • PCでは2カラム、タブレットではそのままフルード、SPでは1カラムレイアウト
  • キービジュアル画像・バナー画像は自身で作成
  • GoogleFontsを使用
  • SNSのアイコン、矢印アイコンはwebアイコンを使用

使用画像
f:id:yachin29:20170906104802p:plain

f:id:yachin29:20170906104825j:plain



バナー見本
f:id:yachin29:20170906104859j:plain




バナー素材
f:id:yachin29:20170906104914p:plain




作例
http://yachin29.com/school/rwd02/




使用するテキスト

PickupStream

HOME
ABOUT
CONTACT


キービジュアル画像


海岸のデコレーション
海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。

海浜植物の画像
こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。
ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。



Side Menu
山と森林
海と海岸
都市と建築
地上と地下

バナー広告




-- ### フッター ### --

Pickupstream
Copyright © Pickupstream, all rights reserved.


facebook
twitter
google-plus
tumblr


htmlファイル

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブレイアウト演習2</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
</head>

<body>
<header>
<div class="inner"><!--960で揃える為-->
<h1>PickupStream</h1>
</div>
<nav>
<ul class="gnav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<div class="keyvisual">
<p><img src="img/KeyVisual.jpg" alt=""></p>
</div>

<div class="inner">
<div class="main">
<h2>海岸のデコレーション</h2>
<p class="txt">海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。<br>
ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>
<p class="photo"><img src="img/main01.jpg" alt="海浜植物の画像"></p>
<p class="txt">こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。<br>
ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>
</div>
<div class="sidebar">
<h3>Side Menu</h3>
<nav>
<ul class="side">
<li><a href="#"><i class="fas fa-angle-right"></i>山と森林</a></li>
<li><a href="#"><i class="fas fa-angle-right"></i>海と海岸</a></li>
<li><a href="#"><i class="fas fa-angle-right"></i>都市と建築</a></li>
<li><a href="#"><i class="fas fa-angle-right"></i>地上と地下</a></li>
</ul>
</nav>
<p class="ad"><img src="img/banner.jpg" alt=""></p>
</div>
</div><!--/.inner-->


<footer>
<div class="inner">
<div class="footer-box">
<p class="footer-title">Pickupstream</p>
<p><small>Copyright &copy; Pickupstream, all rights reserved.</small></p>
</div>
<ul class="sns">
<li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-square"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</footer>
</body>
</html>


スタイルシートPC部分

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,h3,h4,p,ul,li,small {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  vertical-align:bottom;
}
/*PCレイアウト*/
header h1 {
  background: url(../img/logo.png) no-repeat;
  width: 360px;
  height: 39px;
  margin: 15px 0;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}
.inner {
  max-width: 960px;
  margin:0 auto;
  overflow: hidden;
}
header nav {
  background:#185A68;
}
.gnav {
  width:960px;
  margin:0 auto;
  overflow: hidden;
  background: linear-gradient(to top,#185A68,#035);
}
.gnav li {
  width:160px;
  height:50px;
  float:left;
}
.gnav li a {
  display:block;
  text-align:center;
  line-height:50px;
  color:#FFF;
  border-right:1px solid #FFF;
}
.gnav li a:hover {
  background:#006699;
}

.keyvisual {
  width:960px;
  margin:0 auto 40px;
}
.main {
  width:630px;
  float:right;
  margin-bottom:40px;
}
.main h2 {
  font-size: 25px;
  line-height:28px;
	color:#185A68;
	border-left: solid 20px #185A68;
	margin: 0 0 6px;
	padding: 0 0 0 10px;
}
.main p {
  margin-top: 20px;
  line-height: 1.5;
}
.main img{
	border:8px solid #185A68;
	box-sizing:border-box;
}
.sidebar {
  width:300px;
  float:left;
}
.sidebar h3 {
  margin-bottom:30px;
}
.side{
  margin-bottom:30px;
  border-top: solid 1px #aaaaaa;
}
.side li {
  border-bottom: solid 1px #aaaaaa;
}
.side li a {
  display: block;
  font-size: 14px;
  color: #666666;
  padding: 10px 0 10px 10px;
}
.side li a i {
padding-right:10px;
}
.side li a:hover {
  background-color: #def;
}
.ad {
  margin-bottom: 30px;
}
footer {
  background:#066;
  color:#FFF;
  padding-top:10px;
}
.footer-box {
  width:400px;
  float:left;
}
.footer-title {
  font-size:20px;
  padding:10px 0;
}
.sns {
  width:360px;
  float:right;
  padding:10px 0;
}
.sns li {
  float:left;
  font-size:40px;
  margin-right:20px;
}
.sns li a {
  display:block;
  color:#FFF;
}