【開発日記】デモサイトを作って自分の作品を公開するまでの道のり#1「まずは準備」

目標

フロントエンドの基本的な部分はいちよう勉強したので、これからは今までの知識を生かして実際に作品を作っていく。

目標は「最近よくある縦スクロールのサイトをCMSツール(wordpressなど)を使わずに作る。」ことだ。

完成イメージ

www.moreworks.jp

今までツール頼りだったからね。

1から作れるようになって、サーバーもフロントもできるようになりたい。

そのために、CMSツールは使わずに全て自作。(公開されてるライブラリはガンガン使っていく予定。。。)

今日の成果

f:id:samuraikid520:20180203104834p:plain

やったこと

とりあえず今日は立ち上がりの日なので、たいしたことしてないです。

HTMLの作成

おまじないを実装した。
型だけとりあえず用意。

<!DOCTYPE html>
<html lang="ja">
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="css/favicon.ico">
<title>WorkSpace</title>
<script></script>
</head>
<body>
<header>
<div class="container">
<p>Welcome<br>
you can check DEMOSITE</p>
<h1>WorkSpace</h1>
<a href="#">view the details</a>
</div>
</header>
</body>
</html>

normalize.cssの導入

これ初めて使ったのでメモ。
最近流行っているスタイルシートらしい。

normalize.cssとは

ブラウザのスタイルを消去するのではなく、有用なデフォルトのスタイルを利用し、あらゆるHTMLエレメントのスタイルを正常化するスタイルシート。バグとブラウザごとの一貫性のなさを修正し、巧妙な改良でユーザビリティを改善します。
引用:最近のWeb制作で利用されている、リセットCSSとノーマライズCSSのまとめ | コリス

CSSの準備

こちらも特に何もしていない。
これから作り込んでいく予定。

@charset "utf-8";
/* common */
body{
font-size:14px;
font-family: Verdana,sans-serif;
color: #333;
}
a{
text-decoration: none;
}
p{
line-height: 2;
}
/* header */
header{
background: url('../img/background.png');
}

まとめ

こんな感じでまずは準備。
明日までには、サイトの全体像が出来上がってる感じにはしたい。

コメント

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