# カード作成（制作物）
制作物のカードを作成します。このページでは、 少し複雑な構造 Grid レイアウトを適用する方法を学びます。
# 内容
~~/public/index.html
<div class="card-tile">
<div class="card-tile-title">
<span>Adobe XD</span>
<small>1年</small>
</div>
<div class="card-tile-text">
Web 、 アプリ などの UI/UX デザインソフトです。 Web
サイトを作成したり、チラシを作成する前の設計に使用しています。
クリックしたときのエフェクトやページの変更をアニメーションすることもできて
本格的です。
</div>
</div>
</div>
</div>
<div style="height: 20px"></div>
<div class="card-cover bg-white">
<h2 class="card-title-cover bg-2 text-light">
<div class="card-title">My Work</div>
<div class="card-subtitle">制作物</div>
<div class="card-title-line"></div>
</h2>
<div class="card-contents">
<div class="work">
<div class="work-title">1. ポートフォリオサイト</div>
<div class="work-image">
<img src="./assets/works/work1.png" alt="ポートフォリオ" />
</div>
<div class="work-text">
<p>
現在表示しているサイトです。
学習サイトを参考にしながら、制作しました。 初めて自分の手で Web
ページを作成することを知りました。
</p>
<small>こだわりのポイント</small>
<ul>
<li>
<div>配色</div>
柔らかい印象を持っていただけるように、ベースとなる色を、
色の参考書から 3 色選択し、使用しました。
</li>
<li>
<div>ナビゲーション</div>
スマートフォン等、小さい画面で見たときに、セクションの移動が
簡単にできるように、メニューを上部に固定しました。
スクロールするまでは、ページの一部になるようにする部分に苦戦しました。
</li>
<li>
<div>レスポンシブレイアウト</div>
画面幅に応じてレイアウトが変わるようにし、崩れないように細かい部分まで調整しました。
</li>
</ul>
<small>使用した言語・ツール等</small>
<ul>
<li>HTML / CSS</li>
<li>JavaScript</li>
<li>
<a
href="https://swiperjs.com/"
target="_blank"
rel="noopener noreferrer"
>Swiper</a
>
<small>(画像スライドショー)</small>
</li>
</ul>
<small>参考にしたサイト</small>
<ul>
<li>
<a
href="https://techselect-study.careerselect.jp/"
target="_blank"
rel="noopener noreferrer"
>
Tech Select 学習サイト
</a>
</li>
<li>
<a
href="https://developer.mozilla.org/ja/docs/Web/"
target="_blank"
rel="noopener noreferrer"
>
MDN
</a>
</li>
</ul>
</div>
</div>
<div class="work">
<div class="work-title">2. 匿名掲示板</div>
<div class="work-image">
<video controls autoplay muted loop>
<source src="./assets/works/work2.mp4" type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
</div>
<div class="work-text">
<p>
サーバーサイドの練習のために、
誰でも利用可能な掲示板を作成しました。
書き込みをデータベースに保存し、他のユーザーからも閲覧できるようにしました。
</p>
<small>こだわりのポイント</small>
<ul>
<li>
<div>投稿内容</div>
自由なニックネームと投稿内容の 2 つだけのシンプルな構成です。
</li>
<li>
<div>コンテナ化</div>
Docker で PHP と MySQL を実行できるように構成しました。
</li>
</ul>
<small>実装したいこと</small>
<ul>
<li>
<div>ログイン機能</div>
誰でも削除できてしまうため、ログイン機能やパスワード保護機能で投稿を管理できるようにしたいです。
</li>
</ul>
<small>使用した言語・ツール等</small>
<ul>
<li>HTML / CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li>Docker</li>
</ul>
<small>参考にしたサイト</small>
<ul>
<li>
<a
href="https://techselect-study.careerselect.jp/"
target="_blank"
rel="noopener noreferrer"
>
Tech Select 学習サイト
</a>
</li>
</ul>
</div>
</div>
<div class="work">
<div class="work-title">3. To Do アプリ</div>
<div class="work-image">
<img src="./assets/works/work3.png" alt="To Do アプリ" />
</div>
<div class="work-text">
<p>
PHP フレームワークの Laravel を使用して To Do
アプリを作成しました。
ログイン機能があり、ユーザーごとにタスクを管理できます。
シンプルな Web
アプリケーションですが、初期生成されたファイルが多く、大変でした。
</p>
<small>使用した言語・ツール等</small>
<ul>
<li>HTML / CSS</li>
<li>PHP</li>
<li>Laravel</li>
<li>MySQL</li>
<li>Docker</li>
</ul>
<small>参考にしたサイト</small>
<ul>
<li>
<a
href="https://techselect-study.careerselect.jp/"
target="_blank"
rel="noopener noreferrer"
>
Tech Select 学習サイト
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div style="height: 40px"></div>
<footer class="footer-cover bg-2 text-light">
<div style="height: 4px; background-color: rgba(0, 0, 0, 0.1)"></div>
<div class="footer-contents">© Yumi's web page.</div>
</footer>
</div>
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
~~/public/assets/main.css
/* ===== CARD | SKILL END ===== */
/* ===== CARD | MY WORK BEGIN ===== */
.work {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
.work-title {
font-weight: 500;
}
@media screen and (min-width: 500px) {
.work {
grid-template-columns: 1fr 2fr;
}
.work-title {
grid-column-start: 1;
grid-column-end: 3;
}
}
.work-image img {
width: 100%;
box-shadow: 5px 5px 0 -2px #a57575;
border: 2px solid #e8aaa3;
}
.work-image video {
width: 100%;
box-shadow: 5px 5px 0 -2px #a57575;
border: 2px solid #e8aaa3;
}
/* ===== CARD | MY WORK END ===== */
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
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
# 構成
1 つの 制作物につき、 1 つの .work 要素にまとめます。
今回は、3 つの制作物を記載するため、 .workのまとまりを 3 つ繰り返します。
行数は多いですが、タグの構造はシンプルです。
各 .work 要素の直下に、.work-title、.work-image、.work-text の要素があります。
<div class="card-cover bg-white">
<h2 class="card-title-cover bg-2 text-light">
<div class="card-title">My Work</div>
<div class="card-subtitle">制作物</div>
<div class="card-title-line"></div>
</h2>
<div class="card-contents">
<div class="work">
<div class="work-title">1. ポートフォリオサイト</div>
<div class="work-image">
<img src="./assets/works/work1.png" alt="ポートフォリオ" />
</div>
<div class="work-text">説明文...</div>
</div>
<div class="work">
<div class="work-title">2. 匿名掲示板</div>
<div class="work-image">
<video controls autoplay muted loop>
<source src="./assets/works/work2.mp4" type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
</div>
<div class="work-text">説明文...</div>
</div>
<div class="work">
<div class="work-title">3. To Do アプリ</div>
<div class="work-image">
<img src="./assets/works/work3.png" alt="To Do アプリ" />
</div>
<div class="work-text">説明文...</div>
</div>
</div>
</div>
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
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
500px を境界に、スマートフォンレイアウトと、PC レイアウトを切り替えます。
.work を Grid レイアウトとして設定します。
スマートフォンレイアウトでは、grid-template-columns: 1fr; として 1 カラムにします。
PC レイアウトでは、 grid-template-columns: 1fr 2fr; として、 1:2 の割合で 2 カラムにします。
以下は、その設定に該当する部分のみを抽出したプロパティです。
.work-title は、 PC レイアウトでは 1 行として表示する必要があります。
その場合、Grid のカラムを超えて（結合して）表示します。この指定は、
grid-column-start: 1; と grid-column-end: 3; で実現しています。MDN (opens new window)
.work {
display: grid;
grid-template-columns: 1fr;
}
@media screen and (min-width: 500px) {
.work {
grid-template-columns: 1fr 2fr;
}
.work-title {
grid-column-start: 1;
grid-column-end: 3;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
← カード作成（スキル） カード作成（帰属） →