# カード作成（スキル）
スキルのカードを作成していきます。このページではグリッドレイアウトについて説明しています。
# 内容
~~/public/index.html
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></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">Skill</div>
<div class="card-subtitle">スキル</div>
<div class="card-title-line"></div>
</h2>
<div class="card-contents tile-grid-cover">
<div class="card-tile">
<div class="card-tile-title">
<img
src="./assets/logos/html5.png"
width="80"
alt="HTML5 Powered with CSS3 / Styling"
/>
<span>HTML / CSS</span>
<small>1年</small>
</div>
<div class="card-tile-text">
Web のフロントサイドの言語です。
大学の講義では習わないため、学習サイト等で学び
ポートフォリオサイトを作成しました。
</div>
</div>
<div class="card-tile">
<div class="card-tile-title">
<img
src="./assets/logos/nodejs.svg"
alt="Node.jsロゴ"
width="80"
/>
<span>JavaScript / Node.js</span>
<small>1年</small>
</div>
<div class="card-tile-text">
Web 系で最も有名な言語です。
フロントサイドでは、動きのある動作を作るために使用しました。
Node.js は、ビルドに使用したことがあります。 TypeScript
も合わせて勉強しています。
</div>
</div>
<div class="card-tile">
<div class="card-tile-title">
<img src="./assets/logos/php.png" alt="PHPロゴ" />
<span>PHP</span>
<small>1年</small>
</div>
<div class="card-tile-text">
Web のサーバーサイドの言語です。Laravel というフレームワークで
データベースを操作する、アプリケーションを制作しました。
</div>
</div>
<div class="card-tile">
<div class="card-tile-title">
<span>MySQL</span>
<small>1年</small>
</div>
<div class="card-tile-text">
データベースです。 少しリレーションが必要な
クエリを使用するときに思うようにいかず、苦戦しています。
PostgreSQL 等の他のデータベースも挑戦しようと思っています。
</div>
</div>
<div class="card-tile">
<div class="card-tile-title">
<span>Python</span>
<small>1年</small>
</div>
<div class="card-tile-text">
大学の講義で学習しました。 TensorFlow
を使った機械学習を行いました。
</div>
</div>
<div class="card-tile">
<div class="card-tile-title">
<span>Java (Android)</span>
<small>2年</small>
</div>
<div class="card-tile-text">
大学の講義で学習しました。 自主的に Android
のアプリを作成したこともあります。 オブジェクト指向が難しいです。
</div>
</div>
<div class="card-tile">
<div class="card-tile-title">
<span>Adobe CC Photoshop</span>
<small>1年</small>
</div>
<div class="card-tile-text">
趣味で撮影している写真を加工する際に使用しています。
電線を削除したり、好みの色合いに簡単に変更できて楽しいです。
</div>
</div>
<div class="card-tile">
<div class="card-tile-title">
<span>Adobe CC Illustrator</span>
<small>1年</small>
</div>
<div class="card-tile-text">
イラスト描画のためのドロー系ソフトウェアです。
絵はうまくありませんが、時々使用しています。
オリジナルの名刺を作成したり、文化祭のポスターを作成しました。
</div>
</div>
<div class="card-tile">
<div class="card-tile-title">
<span>Adobe CC Premiere Pro</span>
<small>1年</small>
</div>
<div class="card-tile-text">
映像編集ソフトです。
最近はオンラインであることが多くなり、動画による紹介の機会が増えてきました。
研究室の紹介動画を作成しました。
</div>
</div>
<div class="card-tile">
<div class="card-tile-title">
<span>Adobe CC After Effects</span>
<small>1年</small>
</div>
<div class="card-tile-text">
映像作成ソフトです。四角や丸のオブジェクト（パーティクル）を使用すると
全く何も素材がないところから、1本の動画を作ることができて楽しいです。
他の人が作成している映像を参考に、挑戦していますが未熟さを感じています。
</div>
</div>
<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: 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
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
~~/public/assets/main.css
/* ===== CARD | HOBBY END ===== */
/* ===== CARD | SKILL BEGIN ===== */
.tile-grid-cover {
display: grid;
grid-auto-rows: minmax(100px, auto);
gap: 10px;
}
@media screen and (max-width: 699px) {
.tile-grid-cover {
grid-template-columns: 1fr;
}
}
@media screen and (min-width: 700px) {
.tile-grid-cover {
grid-template-columns: 1fr 1fr 1fr;
}
}
.card-tile {
border: 1px solid #cccccc;
padding: 16px;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.card-tile-title {
display: flex;
flex-direction: column;
align-items: center;
font-weight: 500;
color: #5d4037;
gap: 10px;
text-align: center;
justify-content: center;
}
.card-tile-text {
color: #5f574f;
text-align: justify;
}
/* ===== CARD | SKILL 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
32
33
34
35
36
37
38
39
40
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
# 構成
構成としては、スマートフォンでは、1 カラムレイアウト、PC では 3 カラムレイアウトにします。 3 カラムにする方法に、 Grid レイアウトを使用します。Flex を使用した方法もできますが、 格子状に要素を並べる場合は、Grid レイアウトが便利です。 スキル一つ一つを Grid におさめています。
このレイアウトの切替は メディアクエリを使用して、スクリーンの横幅が 700px の時点で切り替わるようにします。
横幅: 700px 未満
横幅: 700px 以上
行数が多いですが、基本は繰り返しです。
.tile-grid-cover クラスで グリッドのレイアウトを適用し、.card-tile の要素を繰り返し使用します。
<div class="card-contents tile-grid-cover">
<div class="card-tile">
<div class="card-tile-title">
<img src="./assets/logos/html5.png" width="80" alt="画像" />
<span>HTML / CSS</span>
<small>1年</small>
</div>
<div c lass="card-tile-text">説明</div>
</div>
...
</div>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
.tile-grid-cover {
display: grid;
grid-auto-rows: minmax(100px, auto);
gap: 10px;
}
@media screen and (max-width: 699px) {
.tile-grid-cover {
grid-template-columns: 1fr;
}
}
@media screen and (min-width: 700px) {
.tile-grid-cover {
grid-template-columns: 1fr 1fr 1fr;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.tile-grid-cover のプロパティに grid-auto-rows があります。
このプロパティは、グリッドレイアウトの 1 行の高さを指定するものです。この値には、minmax(100px, auto); が指定されています。
このようにすると、グリッドレイアウトの 1 行は自動的に行内の最小の高さになります(auto) が、その高さが 100px 以下の場合は、 100px に調整されます。
.tile-grid-cover のメディアクエリ内のプロパティに grid-template-columns があります。
このプロパティは、グリッドレイアウトの 1 行の要素の幅を指定します。 fr は適用する比重を指定しています。
1fr と指定すると、1fr が 1 つだけのため 1 行が 1 分割されて それが 100%の割合となります。
1fr 1fr 1fr と指定すると、1fr が 3 つあるため、1 行が 3 分割されてそれが同じ比重で割り当てられます（1 つあたり 33.333...%）。
各スキルの中の要素は 「名前・ロゴ・学習期間」と「説明」の 2 カラムレイアウトにします。枠線の中の領域は横幅に関係なく 2 カラムレイアウトです。 この 2 カラムレイアウトには Grid を使用します。また、「名前・ロゴ・学習期間」の中は、 Flex を使用しています。
「名前・ロゴ・学習期間」の中で Flex を使用しているポイントとしては以下の通りです。
flex-direction: column;方向をカラム方向（1 列、垂直方向）にします。align-items: center;各アイテムが水平方向に対して中央に揃うようにします。正確には「交差軸方向に中央揃えする (opens new window)」と表現します。今回flex-directionで カラム方向（垂直方向）を指定しているため、水平方向に対して中央になります。gap: 10px;各アイテムに10pxの余白を設けます。justify-content: center;各アイテムは垂直方向に対して（軸に対して (opens new window)）中央揃えします。これにより、画像がない場合や、タイトルの行数が異なっても、中央に揃うようになります。
.card-tile-title {
display: flex;
flex-direction: column;
align-items: center;
font-weight: 500;
color: #5d4037;
gap: 10px;
text-align: center;
justify-content: center;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
← カード作成（趣味） カード作成（制作物） →