担当者ページをつくろう
担当者の顔が見えるようにしたいなと思ったので作る。
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import './style.css';
import Fab from '@material-ui/core/Fab';
import Teacher1 from './images/taisou_woman_yuka.png'
const useStyles = makeStyles((theme) => ({
margin: {
margin: theme.spacing(1),
},
}));
const SecSection = () => {
const classes = useStyles();
return (
<div class="secondconatainer">
<div class="seccopy-font1">
<span class="seccopy-em1">講師陣のご紹介</span>
</div>
<div class="seccopy-font2">
<span class="seccopy-em2">ここでは講師経歴や担当コンテンツを記載します。</span>
<br/>
<span class="seccopy-em3">気に入った講師のコースがあれば見てみましょう。</span>
</div>
<ul class="member-introduction">
<li class="teacher-item">
<div class="teacher-photo">
<img src={Teacher1}/>
</div>
<div class="teacher-info">
<p class="teacher-section-info">「講師の担当教材」</p>
<p class="teacher-name-en">Mrs.Sample</p>
<p class="teacher-name-ja">サンプルさん</p>
<ul class="teacher-section-text-list">
<li class="teacher-section-text">
今までの講師の実績などを入力する
</li>
<li class="teacher-section-text">
今までの講師の実績などを入力するその２
</li>
</ul>
</div>
</li>
<li class="teacher-item">
<div class="teacher-photo">
<img src={Teacher1}/>
</div>
<div class="teacher-info">
<p class="teacher-section-info">「講師の担当教材」</p>
<p class="teacher-name-en">Mrs.Sample</p>
<p class="teacher-name-ja">サンプルさん</p>
<ul class="teacher-section-text-list">
<li class="teacher-section-text">
今までの講師の実績などを入力する
</li>
<li class="teacher-section-text">
今までの講師の実績などを入力するその２
</li>
</ul>
</div>
</li>
<li class="teacher-item">
<div class="teacher-photo">
<img src={Teacher1}/>
</div>
<div class="teacher-info">
<p class="teacher-section-info">「講師の担当教材」</p>
<p class="teacher-name-en">Mrs.Sample</p>
<p class="teacher-name-ja">サンプルさん</p>
<ul class="teacher-section-text-list">
<li class="teacher-section-text">
今までの講師の実績などを入力する
</li>
<li class="teacher-section-text">
今までの講師の実績などを入力するその２
</li>
</ul>
</div>
</li>
</ul>
<div class="sample_button">
<Fab variant="extended" color="secondary" aria-label="add" className={classes.margin}>
好きな文言を入れてください
</Fab>
</div>
</div>
);
}
export default SecSection;
/* ---- head.js ---- */
header {
display: flex;
width: 100%;
height: 100px;
background-color: transparent;
align-items: center;
padding-left: 30px;
}
nav {
margin-left: auto;
}
.first {
background: #cc22a7;
text-align: center;
display: inline-block;
color: #fff;
padding: 16px 15px 10px 15px;
list-style: none;
}
.second {
background: #333;
text-align: center;
display: inline-block;
color: #fff;
padding: 10px 10px 10px 10px;
list-style: none;
}
/* ------------------------- */
/* ---- firstsection.js ---- */
.topsection {
background-image: url("./images/flooring.png");
background-size: cover;
width: 1450px;
}
.topcopy-font {
text-align: center;
color: #000000;
}
.topcopy-em1 {
font-size: 40px;
}
.topcopy-em2 {
font-size: 30px;
}
.topcopy-img {
text-align: center;
}
.topcopy-img1 {
margin-top: 30px;
widows: 400px;
height: 400px;
}
.topcopy-bottun {
margin-top: 30px;
text-align: center;
}
.topcopy-scroll {
text-align: center;
color: #fff;
margin-top: 20px;
}
/* ------------------------- */
/* ---- secondsection.js ---- */
.seccopy-font1 {
text-align: center;
color: #000000;
margin-top: 100px;
}
.seccopy-em1 {
font-size: 40px;
}
.seccopy-font2 {
text-align: center;
color: #000000;
font-size: 20px;
margin-top: 30px;
}
.member-introduction {
list-style: none;
display: flex;
flex-wrap: wrap;
padding: 0;
justify-content: center;
}
.teacher-item {
display: flex;
}
.teacher-item img {
width: 200px;
}
.teacher-section-info {
font-weight: bold;
}
.teacher-name-en {
font-weight: bold;
color: #67D2E7;
margin-top: 8px;
margin-bottom: 0px;
font-size: 20px;
}
.teacher-name-ja {
font-weight: bold;
color: #67D2E7;
font-size: 14px;
margin: 0 0 0 0;
}
.teacher-section-text-list {
list-style-type: none;
padding: 0 0 0 0;
}
.teacher-section-text::before {
content: "・";
}
.sample_button {
margin-top: 10px
text-align: center;
}
/* ------------------------- */
とりあえず講師紹介ページも完成したがまだ心残りがある。
講師の写真と説明文が3部表示されているが下の3部が真ん中によってしまっていて見栄えが悪いので左寄せにしたい。
おそらくCSSのmember-introductionのjustify-content: centerが内部のliタグのすべてに書かてしまっているためだと思われる。
どこかで修正したい。
