富士山の紹介 (PC用)- CSS
リセット
@charset "UTF-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul, li {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
body
body {
color: #333;
font-size: 16px;
font-family:
"Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
line-height: 1.0;
}
共通レイアウト
.container {
max-width: 1180px;
margin: 0 auto;
}
h3 {
margin-bottom: 34px;
color: #8fc0ca;
font-size: 30px;
letter-spacing: .3em;
}
h4 {
color: #006a80;
font-size: 26px;
}
.more {
width: fit-content;
margin: auto;
text-align: center;
}
.more a {
display: block;
padding: 20px 160px;
border: 1px solid #aaa;
}
.more a:hover {
background-color: #fbfbfb;
}
- ロゴ「h1」の右開きを「auto」にする(ロゴを囲む要素に「max-width」が指定されている場合、autoが設定可能)
- nav内の「li」間の空きを「gap」で設定する
.header {
background-color: #e6ecf1;
}
.header > .container {
display: flex;
align-items: center;
height: 80px;
}
.header h1 {
width: 220px;
margin-right: auto;
}
.gnav ul {
display: flex;
justify-content: center;
gap: 40px;
}
.gnav a {
display: block;
padding: 10px 0;
color: #006a80;
font-size: 15px;
font-weight: 500;
letter-spacing: .1em;
}
key-visual部
.key-visual {
height: 780px;
background: url(../img/mv.png) no-repeat center center;
background-size: cover;
color: #fff;
}
.key-visual > .container {
padding: 116px 0 0 30px;
}
.key-visual h2 {
margin-bottom: 30px;
font-size: 28px;
letter-spacing: .2em;
text-indent: -.2em;
}
.key-visual p {
line-height: 2.25;
letter-spacing: .2em;
}
news部
- 「dl」を「display: grid;」「grid-template-columns: 7em 1fr;」で設定する
- 「dt」幅が、全角7文字分、「dd」が残りすべてのスペースを「1fr」で設定する
.news {
margin: 80px auto;
}
.news dl {
display: grid;
grid-template-columns: 7em 1fr;
}
.news dt, .news dd {
line-height: 2.0;
}
main-copy部
.main-copy {
padding: 96px 0 100px;
background-color: #ebf6f8;
text-align: center;
}
.main-copy h2 {
color: #4a8c9c;
font-size: 36px;
font-weight: 600;
letter-spacing: .2em;
}
.main-copy p {
margin-top: 43px;
font-size: 14px;
}
about部
.about {
margin: 80px auto;
}
.about ul {
margin-bottom: 60px;
}
.about li {
display: flex;
align-items: center;
gap: 60px;
margin-bottom: 40px;
}
.about li > img {
width: 50%;
}
.text__block {
width: 40%;
}
.text__block > h4 {
margin-bottom: 30px;
color: #006a80;
font-size: 24px;
}
.text__block > p {
line-height: 1.7;
}
.about li:nth-child(even) {
flex-direction: row-reverse;
}
interview部
- 3列の写真を「display: grid;」「grid-template-columns: repeat(3, 1fr);」で設定する
- 「1fr」は、等分割(fraction)
- それぞれの間隔を「gap」で設定する
.interview {
margin: 80px auto;
}
.interview > ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.interview__text {
padding: 30px 40px;
}
.interview__text h4 {
color: #444;
font-size: 22px;
line-height: 1.8;
}
.interview__text p {
margin-top: 14px;
font-size: 15px;
line-height: 1.8;
letter-spacing: .03em;
}
gallery部
- 5列の写真を「display: grid;」「grid-template-columns: repeat(5, 1fr);」で設定する
- 「1fr」は、等分割(fraction)
- それぞれの間隔を「gap」で設定する
.gallery ul {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 60px;
}
- 背景写真を「background-size: cover;」最小辺にフィットする設定にする
- 「display: flex;」「justify-content: center;」「align-items: center;」で、テキストの幅を指定せずに上下左右の中央に配置する
.contact {
display: flex;
align-items: center;
justify-content: center;
height: 230px;
margin: 80px auto 0;
background: url(../img/contact_bg.png) no-repeat center center;
background-size: cover;
}
.contact h2 {
color: #fff;
font-size: 14px;
font-weight: normal;
letter-spacing: .5em;
text-align: center;
line-height: 1.6;
}
.contact h2::first-line {
font-size: 32px;
}
.contact a {
display: block;
}
- 「display: flex;」「margin-right: auto;」で、横並びに設定する
.footer > .container {
display: flex;
padding: 30px 50px;
}
.footer ul {
display: flex;
gap: 20px;
margin-right: auto;
font-size: 14px;
}
.footer a {
display: block;
}