KIMUSON BLOG

きむそんの雑記ブログ

【開発日記】デモサイトを作って自分の作品を公開するまでの道のり#2「サイトの骨格を作る」

この記事をシェアする

やったこと

今回はサイト全体の骨格づくりをやっていきます。

最近よくある縦スクロールのサイトの作りを1から作っていきます。

header

ヘッダー画像と詳細ボタンを用意しました。
詳細ボタンのリンク先はまだ用意できてないので、「#」で仮設定。

HTML

<header>
	<div class="container">
		<p>Welcome<br>
		you can check DEMOSITE</p>
		<h1>WorkSpace</h1>
		<a class = "btn" href="#">view the details</a>
	</div>
</header>

CSS

header{
	background: url('../img/background.png');
	background-size: auto 500px;
}

header .container{
	width: 820px;
	margin: 0 auto;
	height: 320px;
	padding-top: 10px;
}
header h1,header p{
	color: #fff;
}


header p{
	padding-top: 50px;
}

header h1{
	font-size: 34px;
	margin-bottom: 50px;
}

本文

本文には見出し要素と、画像、文章で構成しました。
このセットを3つほど用意しています。

HTML

<section class="heading1">
<h2>見出し1</h2>
<div class="container">
   <div class="row">
      <img src="img/aaaaa.jpg" width="420" height="270" alt="見出し1" class="shadow">
      <div class="desc">
         <h3>ここには見出し文章が入ります</h3>
	 <p>ここには文章が入ります。</p>
      </div>
   </div>
</div>
</section>

CSS

/* heading1 */
.heading1 h2:after{
	content: ' - heading1 - '
}

.desc{
	width: 360px;
}

進捗

まだ画像とか文章は仮の設定。
f:id:samuraikid520:20180204172350g:plain

まとめ

一旦、形を作って細部の作り込みはこれから少しづつやっていく予定。

まだJSで制御してる動的な部分ないのでどこかにつけてみようと思う。