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

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>css3を使った2カラムレイアウト</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1><img src="img/logo.png" alt=""></h1>
</header>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div class="key_visual">
<img src="img/KeyVisual.jpg" alt="">
</div>
<div class="wrapper">
<div class="content">
<h2>海岸のデコレーション</h2>
<p>
海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。
</p>
<p><img src="img/main.jpg" alt=""></p>
<p>
こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。
ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。
</p>
</div>
<div class="sidebar">
<h2>Side Menu</h2>
<ul>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>
山と森林</a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>
海と海岸</a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>
都市と建築</a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>
地上と地下</a></li>
</ul>
<p><img src="img/banner.jpg" alt=""></p>
</div>
</div><!--.wrapper-->
<footer>
<div class="inner">
<div class="txt-inner">
<p class="footer-title">Pickupstream</p>
<p class="copy"><small>&copy; Pickupstream, all rights reserved.
</small></p>
</div>
<ul>
<li><a href="#">
<i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
<li><a href="#">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</a></li>
<li><a href="#">
<i class="fa fa-google-plus-square" aria-hidden="true"></i>
</a></li>
<li><a href="#">
<i class="fa fa-tumblr-square" aria-hidden="true"></i>
</a></li>
</ul>
</div>
</footer>
</body>
</html>


スタイルシート

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

html,body,h1,h2,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;
}

header {
  width:960px;
  margin:0 auto;
}
h1 {
  padding:20px 0;
}
nav {
  width:100%;
  height:50px;
  background:#C66;
}
nav ul {
  width:960px;
  margin:0 auto;
  overflow:hidden;
  background: linear-gradient(to bottom,#C36 0%,#C03);
}
nav li {
  width:200px;
  height:50px;
  float:left;
}
nav li a {
  display:block;
  text-align:center;
  line-height:50px;
  color:#FFF;
  border-right:1px solid #FFF;
}
nav li a:hover {
  background:#C36;
}
.key_visual {
  width:960px;
  margin:0 auto 40px;
}
.wrapper {
  width:960px;
  margin:0 auto 40px;
  overflow:hidden;
}
.content {
  width:620px;
  float:right;
}
.content h2 {
  color:#900;
  border-left:10px solid #900;
  padding-left:20px;
  margin-bottom:20px;
}
.content p {
  line-height:1.6;
  margin-bottom:16px;
}
.sidebar {
  width:300px;
  float:left;
}
.sidebar h2 {
  font-family: 'Quicksand', sans-serif;
  margin-bottom:20px;
  color:#900;
}
.sidebar ul {
  border-top:1px solid #666;
  margin-bottom:40px;
}
.sidebar li {
  height:40px;
  border-bottom:1px solid #666;
}
.sidebar li a {
  display:block;
  line-height:40px;
  padding-left:10px;
}
.sidebar li a:hover {
  background:#FFCC99;
}
.sidebar i {
  margin-right:10px;
}

footer {
  width:100%;
  background:#C66;
}
.inner {
  width:960px;
  margin:0 auto;
  overflow:hidden;
}
.txt-inner {
  width:400px;
  float:left;
}
.footer-title {
  font-size:20px;
  font-weight:bold;
  padding:20px 0 10px;
}
.copy {
  font-size:18px;
}
footer ul {
  width:200px;
  float:right;
  padding:20px 0;
}
footer li {
  width:40px;
  float:left;
  margin:0 5px;
}
footer li a i {
  font-size:40px !important;
}