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

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

レスポンシブ演習

2カラムレイアウトをレスポンシブに作り変えましょう。


ヘッダー画像・バナー画像は自身で用意


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

f:id:yachin29:20170906104825j:plain



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




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




作例

PCレイアウト
f:id:yachin29:20160204010627j:plain

タブレットレイアウト
f:id:yachin29:20160204010652j:plain


スマホサイト
f:id:yachin29:20160204010707j:plain



レスポンシブ化のソースコード
index.httml

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pickupstream</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

<header>
<div class="inner">
<div id="site">
<h1>PickupStream</h1>
</div>
</div>
<nav id="header_nav">
<ul id="main_nav">
<li><a href="url">HOME</a></li>
<li><a href="url">ABOUT</a></li>
<li><a href="url">CONTACT</a></li>
</ul>
</nav>
</header> <!-- #header -->

<div class="inner">
<p id="keyVisual"><img src="img/KeyVisual.jpg" alt="夜景画像"></p>
<div id="content">
<section>
<h2>海岸のデコレーション</h2>
<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>
<p id="plant"><img src="img/plant.jpg" alt="海浜植物"></p>
<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>
<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>
</section>
</div>

<div id="sidebar">
<nav class="menu">
<h2>Main Menu</h2>
<ul>
<li><a href="#">山と森林</a></li>
<li><a href="#">海と海岸</a></li>
<li><a href="#">都市と建築</a></li>
<li><a href="#">地上と地下</a></li>
</ul>
</nav>
<div class="ad">
<p><img src="img/mihon.png" alt="広告"></p>
</div>
</div><!-- #sidebar -->
</div><!-- #inner -->

<!-- ### フッター ### -->
<footer>
<div class="inner">
<div id="footer_txt">
<p id="footer_title">Pickupstream</p>
<p><small>Copyright &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>