-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
159 lines (159 loc) · 6.66 KB
/
index.html
File metadata and controls
159 lines (159 loc) · 6.66 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<h1 class="logo">
<a href="/">SAMPLE</a>
</h1>
<nav class="global-nav">
<ul>
<li class="nav-item active"><a href="#">HOME</a></li>
<li class="nav-item"><a href="#">ABOUT</a></li>
<li class="nav-item"><a href="#">NEWS</a></li>
<li class="nav-item"><a href="#">TOPICS</a></li>
<li class="nav-item"><a href="#">DOCS</a></li>
<li class="nav-item"><a href="#">BLOG</a></li>
</ul>
</nav>
</header>
<div class="wrapper clearfix">
<main class="main">
<h2 class="hidden">HOT TOPIC</h2>
<a href="#" class="hot-topic clearfix">
<img class="image" src="./images/hot-topic.jpg" alt="コーディング画面">
<div class="content">
<h3 class="title">実務で使えるHTML/CSS<br>モダンコーディングTIPS</h3>
<p class="desc">Webフロントエンドの進化の勢いはとどまるところを知りません。</p>
<time class="date" datetime="2015-09-01">2015.09.01 TUE</time>
</div>
</a>
<h2 class="heading">NEWS</h2>
<ul class="scroll-list">
<li class="scroll-item">
<a href="#">
<time class="date" datetime="2015-08-23">2015.08.23 SUN</time>
<span class="category news">NEWS</span>
<span class="title">WORKSを更新しました</span>
</a>
</li>
<li class="scroll-item">
<a href="#">
<time class="date" datetime="2015-08-12">2015. 08.12 WED</time>
<span class="category">TOPIC</span>
<sapn class="title">CSSでここまでできる！ほんとに使えるCSSセレクタ10線！</span>
</a>
</li>
</ul>
<h2 class="hidden">ARTICLES</h2>
<div class="clearfix">
<a href="#" class="article-box">
<h3 class="title">実務で使えるHTML/CSSモダンコーディングTIPS</h3>
<p class="desc">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、モダンなコーディングにチャレンジしよう！</p>
<time class="date" datetime="2015-06-17">2015.06.17 WED</time>
<img class="image" src="./images/article.jpg" alt="コーディング画面">
</a>
<a href="#" class="article-box">
<h3 class="title">実務で使えるHTML/CSSモダンコーディングTIPS</h3>
<p class="desc">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、モダンなコーディングにチャレンジしよう！</p>
<time class="date" datetime="2015-06-17">2015.06.17 WED</time>
<img class="image" src="./images/article.jpg" alt="コーディング画面">
</a>
</div>
</main>
<div class="sidemenu">
<h2 class="heading">RANKING</h2>
<ol class="ranking">
<li class="ranking-item">
<a href="#">
<img class="image" src="./images/ranking.jpg" alt="グラフの画像">
<span class="order"></span>
<p class="text">HTML/CSSコーディングと切っても切れないWebブラウザのシェア動向をチェックしよう</p>
</a>
</li>
<li class="ranking-item">
<a href="#">
<img class="image" src="./images/ranking.jpg" alt="グラフの画像">
<span class="order"></span>
<p class="text">ラーメン食べたい</p>
</a>
</li>
<li class="ranking-item">
<a href="#">
<img class="image" src="./images/ranking.jpg" alt="グラフの画像">
<span class="order"></span>
<p class="text">HTML/CSSコーディングと切っても切れないWebブラウザのシェア動向をチェックしよう</p>
</a>
</li>
<li class="ranking-item">
<a href="#">
<img class="image" src="./images/ranking.jpg" alt="グラフの画像">
<span class="order"></span>
<p class="text">ぎょうざ</p>
</a>
</li>
<li class="ranking-item">
<a href="#">
<img class="image" src="./images/ranking.jpg" alt="グラフの画像">
<span class="order"></span>
<p class="text">カレー</p>
</a>
</li>
</ol>
<h2 class="heading">DOCUMENTS</h2>
<ul class="documents">
<li>
<h3 class="title">HTML5</h3>
<ul>
<li><a href="#">追加された要素</a></li>
<li><a href="#">削除された要素</a></li>
<li><a href="#">意味が変わった要素</a></li>
<li><a href="#">HTML5のコンテンツモデル</a></li>
</ul>
</li>
<li>
<h3 class="title">CSS3</h3>
<ul>
<li><a href="#">追加されたプロパティ</a></li>
<li><a href="#">追加されたセレクタ</a></li>
<li><a href="#">追加された単位</a></li>
</ul>
</li>
<li>
<h3 class="title">JavaScript</h3>
<ul>
<li><a href="#">JavaScriptの言語仕様</a></li>
<li><a href="#">ECMAScriptとは？</a></li>
<li><a href="#">JQueryとは？</a></li>
<li><a href="#">HTML5のコンテンツモデル</a></li>
</ul>
</li>
<li>
<h3 class="title">SaaS, Less, Stylus</h3>
<p>準備中</p>
</li>
</ul>
<h2 class="hidden">SEARCH</h2>
<form class="search-box">
<input class="search-input" type="text" name="search" placeholder="SEARCH">
<input class="search-button" type="submit" value="検索">
<p class="text">サイト内テキストを検索できます</p>
</form>
</div>
</div>
<footer class="footer">
<ul class="horizontal-list">
<li class="horizontal-item"><a href="#">ABOUT ME</a></li>
<li class="horizontal-item"><a href="#">SITE MAP</a></li>
<li class="horizontal-item"><a href="#">SNS</a></li>
<li class="horizontal-item"><a href="#">CONTACT</a></li>
</ul>
<p class="copyright">Copyright 2015 SAMPLE SITE</p>
</footer>
</body>
</html>