Company

Home Company

ごあいさつ(ストーリーボード)

おはようよう、こんにちえいそ!

挨拶あいさつ: salutation)とは、出会う際や別れ際など、特定の際に純粋な礼儀やその他の意図をもって行われる形式的(: formal)な動作のこと。あるいは、式典などで儀礼的に述べるをいうこともある。

挨拶 - Wikipedia

ストーリーボード

画像と文字情報を左右に並べるレイアウト。ただしビューポートが狭い時は、タイトル、画像、その他文字情報の順に縦に積まれる。

親要素にクラスc-storyboardを付与し、中身は、タイトル.c-title、その他文字情報を含む要素をふたつ、画像.imageの順に置く。

<section class="p-greet c-storyboard l-section"> <h3 class="c-title -hyphen">ごあいさつ</h3> <p class="c-lead">おはようよう、こんにちえいそ!</p> <blockquote cite="https://ja.wikipedia.org/wiki/アーカイブ"> ︙ </blockquote> <figure class="image"><img src="../assets/img/ex.webp" alt="" width="1200" height="630" loading="lazy"></figure> </section>

会社概要(テーブルリスト)

さまざまな事項を一覧表にレイアウトするスタイル(一問一答向け)

項目に対する内容がひとつの場合に使えるスタイル。dl要素でマークアップした内容を、テーブル要素のようにレイアウトする。
dl要素にクラスc-tablelistを付与し、中身は項目ごとに、クラスrowを付与したdiv要素で仕分け、その中に一組のdt/dd要素を入れる。
この中では、ruby要素でマークアップしたふりがなインライン要素として展開される。

屋号
Lopan.jpロパンドットジェーピー
事業主
きむらあつとしキムラアツトシ
開業日
2012年7月7日
所在地
〒150-0068 東京都渋谷区渋谷ロパン通り6-8-10 Lopan café
資本金
数億円とも(2022年10月8日現在)
従業員数
数億人とも(2022年10月8日現在)
売上高
数兆円とも(2022年3月期)
事業内容
Lopan.jp
Webデザインとかサイト制作について、知ってる事知らない事を展開するサイト。
Lopan café
Webサイトでよく使うパターンを集めたコンポーネントとメモとスタイルガイド。
<dl class="c-tablelist"> <div class="row"> <dt>屋号</dt> <dd><ruby>Lopan.jp<rp>(</rp><rt>ロパンドットジェーピー</rt><rp>)</rp></ruby></dd> </div> ︙ </dl>

沿革(グリッドリスト)

さまざまな事項を一覧表にレイアウトするスタイル(年表とかスケジュール向け)

dl要素でマークアップした内容を、グリッドでレイアウトする。
dl要素にクラスc-gridlistを付与し、その中に直接dt/dd要素を項目ごとに並べる。

2012
土曜、仏滅、七夕、個人事業開業届を出しに行く
Webデザインとかサイト制作について、知ってる事知らない事を展開するサイト。Lopan.jp
2017
  • 幕神アリーナツアー2017 in 日本武道館 ~またまたここから夢がはじまるよっ!~
  • ねぇもう一回きいて?宇宙を救うのはやっぱり、でんぱ組.inc!
2022
Webサイトでよく使うパターンを集めたコンポーネントとメモとスタイルガイド。Lopan café
現在に至る
<dl class="c-gridlist"> <dt>2012</dt> <dd>土曜、仏滅、七夕、個人事業開業届を出しに行く</dd> <dd>Webデザインとかサイト制作について、知ってる事知らない事を展開するサイト。Lopan.jp</dd> ︙ </dl>

Access

〒150-0068
Lopan café Lopan-tori 6-8-10 Shibuya-ku Shibuya Tokyo

Google マップについて
<div class="access_container"> <div class="p-map js-gm" data-gm="35.6625258,139.7028806,18,Lopan.jp" data-marker data-simple></div> <p class="address">〒150-0068<br>Lopan café <wbr>Lopan-tori 6-8-10 <wbr>Shibuya-ku Shibuya <wbr>Tokyo</p> <a href="../works/gm/" class="c-button">Google マップについて</a> </div>