KIMUSON BLOG

きむそんの雑記ブログ

【開発日記】デモサイトを作って自分の作品を公開するまでの道のり#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');
}

まとめ

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