1.htmlでザックリと画面構成を作ります。
まだスタイルを適用してないのでショボイです。
■Calender.html
----------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>カレンダー</title>
</head>
<body>
<!-- ヘッダ -->
<header>
<h1>カレンダー</h1>
</header>
<!-- メインコンテンツ -->
<ul>
<li><a class="day" href="../index.html">10/11</a></li>
<li><a class="day" href="../html/">10/12</a></li>
<li><a class="day" href="../css/">10/13</a></li>
<li><a class="day" href="../sitemap/">10/14</a></li>
</ul>
<!-- フッタ -->
<footer></footer>
</body>
</html>
----------------------------------------
2.次に、前に紹介したCSSジェネレータ(http://css3.mikeplate.com/)を
使用しながら画面の部品を作っていきます。
3.2で作ったスタイルをCSSファイルとして作成します。
■Calender.css
----------------------------------------
li {
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
-webkit-box-shadow: 0px 0px 30px #0000CD;
-moz-box-shadow: 0px 0px 30px #0000CD;
box-shadow: 0px 0px 30px #0000CD;
background-image: -moz-linear-gradient(-45deg, #87CEFA 100%, #0000CD 60%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(1.0, #87CEFA), color-stop(0.6, #0000CD));
border: 2px solid #800080;
background-color: #DDDDDD;
padding: 10px;
list-style-type: none;
}
----------------------------------------
4.3で作ったCSSをhtmlに組み込みます。
■Calender.html
～
<title>カレンダー</title>
<link rel="stylesheet" href="Calender_01.css">
</head>
～
5.デペロッパツールを使いながら微調整していきます。
右に出ているCSSのプロパティ値を変更することでリアルタイム
に確認することもできます。
6.ここまでの作業を繰り返してCSSを編集していきます。
続きはまた。