webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

クリックする度にdivごと表示を切り替える

今回の会社概要は日本語と英語を併記。スマホでは横並びでは見辛く、かといって縦に並べると冗長化してしまうので、適した見せ方を考えましょう。

<div class="info">
<h2>会社概要</h2>
<dl>
<dt>会社名</dt><dd>株式会社フェリカ企画</dd>
<dt>所在地</dt><dd>東京都豊島区南池袋2-12-9 KKビル4F</dd>
<dt>設立日</dt><dd>2000年1月1日</dd>
<dt>代表取締役</dt><dd>山田太郎</dd>
<dt>資本金</dt><dd>10億円</dd>
<dt>関連会社</dt><dd>フェリカ・インターナショナル</dd>
</dl>
</div>

<div class="info">
<h2>Company info</h2>
<dl>
<dt>Company Name</dt><dd class="long">Felica Co.,Ltd.</dd>
<dt>Company Address</dt><dd>KK Bldg-4F, 2-12-9 Minamiikebukuro, Toshima-ku, Tokyo.</dd>
<dt>Date of the Establishment</dt><dd class="long">Jan 1st, 2000</dd>
<dt>President</dt><dd>Tarou Yamada</dd>
<dt>Capital</dt><dd>\1,000,000,000</dd>
<dt>Affiliated Company</dt><dd class="long">Felica international Co.,Ltd.</dd>
</dl>