-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (125 loc) · 5.67 KB
/
index.html
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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width ,initial-scale=1">
<title>WEB DESIGN</title>
<meta http-equiv="Content-type" content="text/html; charaset=utf-8"/>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:100" rel="stylesheet">
<script src="js/function.js"></script>
</head>
<body>
<header>
<h1><span>Web Design</span><span>を考える</span></h1>
<h3 class="oscar">
<span>「HTMLだと? ハ! 私はC++を使うね!」</span>
<span>〜 HTML について、オスカー・ワイルド</span>
</h3>
</header>
<section class="s1">
<h2>スキューモフィズムからの脱却</h2>
<div class="container1">
<div class="discription">
<P>
ルネサンス絵画から<br>
キュビズム。<br>
アール・ヌーヴォーから<br>
バウハウス。<br>
webサイトも、<span>リッチから</span><br>
フラットに。<br>
</P>
</div>
<div class="ex1">
<img src="image/flat2.jpg" class="ex1">
<img src="image/flat.jpg" class=ex1>
</div>
</div>
</section>
<section class="s2">
<h2>フラットデザインと環境</h2>
<div class="container2">
<div class="s2">
<p class="title">スマートフォンの台頭</p>
<P><span>スワイプで見やすいワンカラム</span><span>のページ</span><br>
タッチしやすい大きなボタン<br>
レスポンシブデザインの増加
</P>
</div>
<div class="s2">
<p class="title">メディア特性の再考</p>
<p>現実世界にある物に似せる必要性はあるのか？<br>
平面的なディスプレイにとって最も自然な情報の表示法とは?</p>
</div>
<div class="s2">
<p class="title">コンテンツ重視</p>
<p><span>過度な装飾による</span><span>可読性の低下への反動</span><br>
<span>webサイトの本質は</span><span>内容であるという思考</span>
</p>
</div>
</div>
</section>
<section class="s3title"><h2>過去のデザインに学ぶ</h2></section>
<section class="s3">
<div class="s3">
<p class="title">バウハウス</p>
<div class="container3">
<p>
1919年創立のワイマールの芸術学校。<br>
不安定な時代背景により<br>
わずか14年で閉鎖になったが、<br>
「形より機能」という理念は<br>
モダンデザインに多大なる影響を与えた。<br>
フラットデザインもバウハウスの影響を受けている<br>
</p>
</div>
<div class="container4">
<img src="image/s32.jpeg" class="s32">
<img src="image/s31.jpg" class="s31">
</div>
</div>
<div class="s3">
<p class="title">スイススタイル</p>
<div class="container3">
<p>
1950年代に誕生した<br>
タイポグラフィースタイル<br>
「インターナショナルスタイル」<br>
とも呼ばれ、<br>
装飾でははく、<br>
構造で美しく理路整然としたデザイン
</p>
</div>
<div class="container4">
<img src="image/s33.jpg" class="s31">
<img src="image/s34.jpg" class="s33">
</div>
</div>
<div class="s3">
<p class="title">リード・マイルスによるブルーノートアートワーク</p>
<div class="container3">
<p>
限られた色彩<br>
効果的な余白<br>
大胆な構図<br>
など参考になる部分は多い<br>
</p>
</div>
<div class="container4">
<img src="image/s36.jpg" class="s36">
<img src="image/s35.jpg" class="s35">
</div>
</div>
<div class="s31">
<p>その他にもキュビズム、デ・スタイル、ロシア構成主義などもデザインの参考になる</p>
</div>
</section>
<section class="s4">
<h2>具体的な指針</h2>
<p>この項目は現在執筆中です</p>
</section>
<footer>
<h2>ここはフッターです。</h2>
</footer>
</body>
</html>