基本のコンテンツ幅一旦開発完了

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

クラス名

ly_cont

マークアップ例

<div class="ly_cont">
<!-- セクションなど -->
</div>
<!-- /.ly_cont -->

<!-- 背景色のあるエリアの中身として使う場合 -->
<section class="hp_bgcGray">
<div class="ly_cont">
<!-- コンテンツなど -->
</div>
<!-- /.ly_cont -->
</section>

定義

コンテンツ幅はある程度統制がとれているとありがたい。
ネストしない。

少し狭いコンテンツ幅一旦開発完了

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

クラス名

ly_cont__thin

マークアップ例

<div class="ly_cont ly_cont__thin">
<!-- コンテンツなど -->
</div>
<!-- /.ly_cont.ly_cont__thin -->

定義

.ly_cont のみに比べ、幅が少し狭め。
人情的に、ネストしたくなると思うが、しないように。
（この規定は将来のアップデートで変更になるの可能性があり、、、、あるかなあ。。。。。。

少し広いコンテンツ幅一旦開発完了

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

クラス名

ly_cont__wide

マークアップ例

<div class="ly_cont ly_cont__wide">
<!-- コンテンツなど -->
</div>
<!-- /.ly_cont.ly_cont__wide -->

定義

.ly_cont のみに比べ、幅が少し広め。
ネストにしない

ファイルパス

assets/scss/layout/content

Change Log

  1. 開発開始：2021-07-16
  2. 最終更新：2021-10-24