はじめに
今回は会社概要のレイアウトを実装したのでご紹介します。
会社概要の実際のレイアウト
- 会社名
- 株式会社 〇〇
- 設立
- 〇〇年△月×日
- 会社所在地
- 〇〇〇〇
-
〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇〇
- 〇〇〇〇
-
〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇
- 〇〇
-
〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
会社概要のレイアウトのソースコード
PR
<div class="company-profile">
<dl>
<dt>会社名</dt>
<dd>株式会社 〇〇</dd>
</dl>
<dl>
<dt>設立</dt>
<dd>〇〇年△月×日</dd>
</dl>
<dl>
<dt>会社所在地</dt>
<dd>
<div>
<p class="dd-head">■本社</p>
<p>〒000-0000 <br class="sp">住所住所住所住所住所住所住所住所</p>
<p><a href="#">TEL : 00000000000</a> Email : sample@example.com</p>
</div>
<div>
<p class="dd-head">■支社</p>
<p>〒000-0000 <br class="sp">住所住所住所住所住所住所住所住所</p>
<p><a href="#">TEL : 00000000000</a> Email : sample@example.com</p>
</div>
</dd>
</dl>
<dl>
<dt>〇〇〇〇</dt>
<dd>
<p>〇〇〇〇〇〇〇〇</p>
<p>〇〇〇〇〇〇〇〇〇〇</p>
<p>〇〇〇〇〇〇〇〇〇〇〇〇</p>
</dd>
</dl>
<dl>
<dt>〇〇〇〇</dt>
<dd>
<p>〇〇〇〇〇〇</p>
<p>〇〇〇〇〇〇〇〇〇〇</p>
</dd>
</dl>
<dl>
<dt>〇〇</dt>
<dd>
<p>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</p>
<p>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</p>
</dd>
</dl>
</div>
.company-profile dl:nth-of-type(1) {
border-top: 1px solid #7f7f7f;
}
.company-profile dl {
border-bottom: 1px solid #7f7f7f;
}
.company-profile dt,
.company-profile .dd-head {
color: #2652FF;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.pc,.pc-br{display: block;}
.sp,.sp-br{display: none !important;}
.company-profile {
max-width: 800px;
margin: 0 auto;
}
.company-profile dl {
display: flex;
}
.company-profile dt {
width: 220px;
display: flex;
align-items: center;
justify-content: center;
}
.company-profile dd {
padding: 25px 0;
text-align: left;
}
.company-profile dt,
.company-profile dd,
.company-profile p {
font-size: 18px;
}
.company-profile dd > div:nth-of-type(n+2) {
margin-top: 30px;
}
}
@media screen and (max-width: 767px) {
.pc,.pc-br{display: none !important;}
.sp,.sp-br{display: block;}
.company-profile {
padding: 0 10px;
}
.company-profile dl {
text-align: left;
font-size: 14px;
}
.company-profile dt {
padding: 12px 0 6px 16px;
}
.company-profile dd {
padding: 6px 0 12px 16px;
}
.company-profile dd p {
font-size: 14px;
}
.company-profile dd > div:nth-of-type(n+2) {
margin-top: 12px;
}
}
他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ
ソースコードまとめ
実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。