【開発日記】デモサイトを作って自分の作品を公開するまでの道のり#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で制御してる動的な部分ないのでどこかにつけてみようと思う。

コメント

タイトルとURLをコピーしました