基本的なこと common
ECCUBEのブロックについて
ブロックは管理しづらく、見通しが悪いため、使用しません。
ブレイクポイントについて
基本的に「_config.scss」に記述しています。
- $lg: 1024px; // iPad 横（使ってない）
- $md: 768px; // iPad 縦（2カラムはここで制御、以上だとPCで未満だとSP）
- $sm: 568px; // iPhone5 横
- $xs: 414px; // iPhone6 Plus 縦（Nexus 6 縦は 412px）
- $fs: 320px; // iPhone3-5s 縦
- $width-list: content: 980px（基本の幅になります container で使用）
- $width-list: nav_sp: 63%（レスポンシブナビゲーションでの移動距離や横幅）
例外として「_theme.scss」内にいくつかあります。
- 922px 以上（グローバルナビゲーションおよび、最上位ヘッダーのPCデザイン）
- 921px 以下（グローバルナビゲーションおよび、最上位ヘッダーのSPデザイン）
命名全般について
- 連番は 02 よりスタートしてください。
htmlについて
基本的に「main.site-main」内は下記のコードをひとまとまりとしてコーディングしています。
<div class="section">
<div class="heading">
<h2 class="heading__self">
<span class="heading__name">セクションタイトル</span>
<span class="heading__label">←の英語</span>
</h2>
</div>
<div class="container">
中身
</div>
</div>
画像について
- gifアニメ以外は、jpg と png の二種類だけで書き出します。
-
Prefix を先頭に付けます。フォルダ分けはしません。
- image-
- text-
- bg-
- icon-
-
可能な限り Retina 対応を行ってます。
例えばロゴでいうと
と2個書き出しをしており、これを imgフォルダ にアップロードし、通常サイズを imgタグ にて指定すると、Retina ディスプレイだったら 自動的に @2x に切り替わります。 -
ヘッダーのページごとの画像は「text-.png」という名称になります。
これは、URLより最初のディレクトリ、それが無ければ最初のファイル名を取得するというスクリプトから生成しており、画像をそれに沿う名称で書き出してください。
CSSについて
「style.scss」に記述しています。
ボタン btn
「_theme.scss」に記述しています。
モディファイアを追加し、現在進行形で増殖します。
基本的に max-width 指定あり + inline-block にて整形しているので、
センタリングしたい場合は、 more や u-textcenter または 親要素で text-align: center などを使うとそれに従い寄ります。
<a class="btn btn--basic" href="<!--{$smarty.const.ROOT_URLPATH}-->">
<span class="btn__label">ポリフェスのご購入はこちらから</span>
</a>
<a class="btn btn--basic btn--block" href="<!--{$smarty.const.ROOT_URLPATH}-->">
<span class="btn__label">ポリフェスのご購入はこちらから</span>
</a>
<a class="btn btn--mail" href="<!--{$smarty.const.ROOT_URLPATH}-->inquiry">
<span class="btn__label">メールでのお問い合わせ</span>
</a>
<a class="btn btn--mail btn--block" href="<!--{$smarty.const.ROOT_URLPATH}-->inquiry">
<span class="btn__label">メールでのお問い合わせ</span>
</a>
<p class="u-textcenter">
<a class="btn btn--mail btn--block" href="<!--{$smarty.const.ROOT_URLPATH}-->inquiry">
<span class="btn__label">メールでのお問い合わせ</span>
</a>
</p>
<p class="more">
<a class="btn btn--mail btn--block" href="<!--{$smarty.const.ROOT_URLPATH}-->inquiry">
<span class="btn__label">メールでのお問い合わせ</span>
</a>
</p>
グリッド grid
「_snippets.scss」に記述しています。
後からCSSの調整変更することはほぼほぼのほぼほぼありません。
簡易的にレイアウトが組めるグリッドを用意してます。
まず grid という親要素を用意し、その中に col-(lg|md|sm|xs)-(1-12) という子要素を使うのがグリッドの原則になります。
いくつかモディファイアが存在し、
grid
grid
- grid--space
- grid--space2
- grid--space3
- grid--diphycercal
- grid--diphycercal2
- grid--diphycercal3
col
col-(lg|md|sm|xs)-(1-12) については、一行の数字が合計「12」になるように調整します。
<ul class="grid grid--space3">
<li class="col-sm-4">
<img src="<!--{$TPL_URLPATH}-->img/image-recommend-polyphenol.jpg" alt="自然体のポリフェノールが豊富">
</li>
<li class="col-sm-4">
<img src="<!--{$TPL_URLPATH}-->img/image-recommend-coenzyme.jpg" alt="高い抗酸化効果!!">
</li>
<li class="col-sm-4">
<img src="<!--{$TPL_URLPATH}-->img/image-recommend-antioxidation.jpg" alt="コエンザイムQ10配合!!">
</li>
</ul>
