Grid Layout チートシートの見方

参照URLhttps://qiita.com/7dt/items/577ba8eada3380c93dbb

チートシートの右上はグリッドの用語説明、
左側は親要素に設定するプロパティ、
右下は子要素に設定するプロパティになります。

Grid Layout の作り方

チートシートを見ながら読み進めてください。

①親要素をグリッドコンテナとして指定する。

display: grid;
見た目に変化はありませんが、全ての直接の子要素がグリッドアイテムとなり、自動的に行が作成されます。
(position: fixed; あるいは absolute; で指定された子要素はグリッドアイテムにはならない)

②-1 行と列の数が明確な場合の指定方法(明示的グリッド)

予め行と列の数がわかっている場合は、数とサイズを以下のプロパティで指定します。

grid-template-rows:
grid-template-columns:
行(row)、列(column)に対して数とサイズを指定(半角スペースで区切る)。
チートシートでは、50pxの行を4行、100pxの列を3列、つまり4 x 3のグリッドを作ると指定しています。
ライン名を指定する場合はサイズ値の前後に任意の名前を[ ]にて設定します。
[row1-start] 50px [row1-end row2- start] 50px [row2-end row3-start] 50px [row3-end] 50px [line5];

grid-template-areas:
各セルに対して任意の名前を設定し、“”で囲んで列を、改行にて行を指定します。
チートシートでは、一行目の全3セルをheader、2、3行目の1、2列をmainと指定。
これにより1行目はheaderというエリアに、その下の4つのセルをmainというエリアに指定することができます。
セルに名前をつけない場合は .(ドット)でセルの場所を指定。

grid-template:
grid-template-rows:とgrid-template-columns:のショートハンドとして、行と列のサイズ指定をします。
ここにさらにgrid-template-areas:を加えてエリアの名前も同時に指定することもできます。

②-2 行と列の数が不明確な場合は自動配置の方法を指定する(暗黙的グリッド)

指定した明示的グリッドにグリッドアイテムの数が収まらず、はみ出した場合や、
JavaScriptなどを使ってサーバーからコンテンツを取得するなど、
グリッドアイテムの数が不明な場合にはこちらのプロパティで自動配置の方法を指定します。

grid-auto-rows:
grid-auto-columns:
自動で作成される行や列に対するサイズの指定。

grid-auto-flow:
行を自動作成するのか、列を自動作成するのかを決める指定。
明示的に位置を指定しない場合は、アルゴリズムに基づいてアイテムが自動配置されますが、
場合によっては空白のセルが発生する場合があります。
(グリッドの一部に複数セルを利用したエリアが明示的に設定されている場合など)
その場合にはdense(密集)を指定すると、配置順が変更され空白のセルが発生しません。

grid:
明示的グリッドプロパティ、暗黙的グリッドプロパティとしてあげた上記全てのショートハンド。
書き順は次のとおり。
rowの指定 / columnの指定;
チートシートにある auto-flow 50px / 100px 100px 100px; は
50pxの行を必要な分だけ、100pxの列を3列作成する、という指定になります。

③グリッドアイテムの位置を指定する

①②で出来上がったグリッドに以下のプロパティで子要素を配置します。

・値にライン番号を指定することにより、行/列の開始と終了を指定します。
grid-row: 2 / 4;
行のライン番号2から4まで
(フッターなど最終行に配置する場合は -2 / -1と負の数で指定すると、行数が途中で増えてもメンテが楽)

・隣接するトラックを複数使ったエリアを指定する場合は span も使えます。
grid-row: 2 / span 2;
行のライン番号2から2つの連続するトラック

・②でライン名を設定した場合はライン名を指定することも可能です([ ]は記入しない)。
grid-row: row2-start / row3-end;

grid-area:
grid-row:とgrid-column:のショートハンド。記入の順序がややこしいので要注意。
grid-row-start / grid-column-start / grid-row-end / grid-column-end;
grid-template-areas:を指定した場合はエリア名での指定も可能。

各要素の位置やサイズを調整して完成。

各プロパティに対する指定可能な値についてはチートシートの各項目を参照してください。

親要素に設定するプロパティ

プロパティ説明
grid-row-gap:行間の余白のサイズ
grid-column-gap:列間の余白のサイズ
grid-gap:grid-row-gap: と grid-column-gap: のショートハンド
align-content:垂直方向における親要素(コンテナ)の位置指定
justify-content:水平方向における親要素(コンテナ)の位置指定
place-content:align-content: と justify-content: のショートハンド
align-items:垂直方向における子要素(アイテム)の位置指定
justify-items:水平方向における子要素(アイテム)の位置指定
place-items:align-items: と justify-items: のショートハンド

各子要素に設定するプロパティ

プロパティ説明
align-self:垂直方向における各子要素の位置指定
justify-self:水平方向における各子要素の位置指定
place-self:align-self: と justify-self: のショートハンド
z-index:子要素同士の重なりの順序指定
order:順序の指定

補足

サイズ指定のプロパティに使える値について

fr

サイズの指定にはpxや%などなんでも使えますが、新しい単位 fr がとても便利です。
fr(フラクショナルユニット)は利用可能な幅に対して均等に分割するための単位で、
ブラウザの幅が変わっても指定した比率でサイズが計算されるため、レスポンシブな単位です。
(各コンテンツ幅以下には小さくならない。つまり各コンテンツ幅がバラバラな場合で十分な利用幅がない場合は等分にならないので注意)

grid-template-columns: 1fr 2fr 1fr;
比率 1 : 2 : 1の指定

コンテナ幅が 1000px で、gap: 50px; の場合の例:
grid-template-columns: 50% 1fr 1fr;
1列目=500px(%はgapを含めず純粋にコンテナ幅からの計算)
2列目=200px(残り500pxからgap2本分を引いた幅を二等分した値)
3列目=200px(残り500pxからgap2本分を引いた幅を二等分した値)

min-content

コンテンツ内の最大の単語幅を元に改行して、最小に表示。

max-content

改行せず、コンテンツの幅で表示。
コンテンツの幅が増えれば合わせて調整してくれる。

minmax(50px 100px)

50pxと100pxの間の指定。表示幅に余裕があればmax値(100px)、余裕がない場合はmin値(50px)までレスポンシブで対応。

repeat(4, 50px)

50pxを4回繰り返すという指定。「50px 50px 50px 50px;」の代わりにコンパクトに記述できる。
repeat(2, 50px) 100px;
このように一部分のみ使うことも可能。
repeat(5, 1fr 2fr);
1fr トラックに 2fr トラックが続くパターンを5回繰り返した全10トラックを表現する方法。

repeat(3, [col-start] 1fr [col-end]) 200px [grid-end];
repeatを使ったときのライン名は、上記の位置に入れます。
名前を[-start][-end]で指定すると、自動でトラックごとに[ 1]などの連番の数字が付与されます。
[col-start 1] 1fr [col-end 1 col-start 2] 1fr [col-end 2 col-start 3] 1fr [col-end 3] 200px [grid-end];

repeat(auto-fill, 50px);

50pxのトラックが入るだけ入る指定。
コンテナ幅に余裕があれば余白が生まれます。

repeat(auto-fit, 50px);

50pxのトラックが入るだけ入る指定。
コンテナ幅に余裕があっても余白は残さず、コンテンツのないトラックの幅は0になります。

これらを駆使するとメディアクエリを使わずレスポンシブ対応が可能

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
200px以上の列が入るだけ入り、デバイス表示幅が小さくなれば列数が減って新たな行が生まれます。

ライン名について

grid-template-areasに設定していない名前でも、grid-template-columns/rowsにてライン名を[-start/-end]で設定していれば、grid-areaで使えます。

grid-template-columns: [hd-start] 1fr 1fr 1fr [hd-end];
grid-area: hd;

入門:EC-CUBE 4のデフォルトページを編集する

日曜日 , 14, 4月 2019 mac EC-CUBE4.xLeave a comment

 本記事はHTMLやJavaScriptにあまり詳しくない店舗運用者様などを想定した解説記事です。

 EC-CUBE 4のトップページを編集してみたいけど、どのように触っていいのかわからないというような場合にどのように編集すればよいかを書いていきます。

レイアウト、メインコンテンツ、ブロック

 EC-CUBE 4のページは「レイアウト」が決められており、そのレイアウトで「そのページ固有のメインコンテンツ」と「複数のページで利用できるブロック」を設定しています。

 まずは、変更したい場所がページのメインコンテンツなのか、ブロックなのか確認する必要があります。

レイアウト

 レイアウトは初期状態のEC-CUBE 4ではメインページと、その他ページが異なるレイアウトになっています。

 管理サイトの「コンテンツ管理」→「レイアウト管理」でそれぞれのレイアウトを確認することができます。

 「トップページ用レイアウト」クリックすると、

トップページのレイアウト

 上の画像のようにトップページのレイアウト情報を表示することができます。

 トップページは#headerの部分に「ヘッダー(商品検索・ログインナビ・カート)」「ロゴ」「カテゴリナビ(PC)」という3つの項目が表示されています。この1つ1つがブロックです。

 それ以外にも#contents_topや#main_topという表記があり、今回は解説しませんが、未登録のブロックをドロップすることで、別のブロックを表示することもできます。

メインコンテンツ

 #main_topの下に「Main」という表示があります。

 これが各ページ固有の内容を表示する部分です。 

 例えば、トップページなら、画像を3つスライドショー形式で表示している部分が固有の内容です。

 メインコンテンツの内容は「コンテンツ管理」の「ページ管理」から確認及び編集することができます。

 上画像の「TOPページ」をクリックすることでトップページのメインコンテンツを編集できます。

 「ファイル名」に表示されている「app/template/default/index.twig」が、「コード」欄に表示されているHTML(およびCSS、JavaScript)が実際に記述されているファイル名です。

 このページで内容を編集するか、ファイルを編集することで表示を変更することができますが、今回は管理サイトで作業を行うことを想定して、このページの内容を変更することとします。

スライドショーの画像を変更したい

 例として、スライドショーの画像を変更してみます。

 先ほど表示したページ管理のトップページの「コード」欄のスライドショー画像を指定している部分は以下です。?

123456789{% block main %}<div class="ec-sliderRole"><div class="main_visual"><div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div><div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div><div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div></div></div>{% endblock %}

 コードの中に「img_hero_pc01.jpg」という画像ファイル名があります。これがスライドショーの一番目に表示する画像ファイルの指定です。この辺は、ある程度HTMLなどの知識が無いと特定が難しい部分ですが、見つけることは可能だと思います。

 ただ単純なHTMLではなく、Twigの機能を使った指定になっています。

asset(‘assets/img/top/img_hero_pc01.jpg’)

 このファイルはEC-CUBE 4をインストールしたディレクトリの下の以下の場所にあります。

html/template/default/assets/img/top/

 フォルダの中身を確認するとこのようにimg_hero_pc01.jpgなどがありますね。

 似たような名前のimg_hero_sp01.jpgなどがありますが、これはスマートフォン表示の際の画像です。今回はスマートフォンについては言及しませんが、スマートフォン対応しているサイトでは同様にこの画像も変更する必要があります。

 「スライドショー表示されている画像3つを変更したい」という場合、2つの方法が取れます。

・HTMLを触らずに画像を差し替える

・HTMLを変更して、表示したい画像を指定する

 HTMLを触らない方法は、HTMLの知識の無い方でも変更可能というのがメリットです。ファイル名が実際表示する画像の内容に合わない、画像の差し替えより凝ったことができない、などのデメリットもありますが、HTMLを編集してページの表示を崩してしまう恐れはありません(画像サイズによって表示が伸びたりすることはあるので、画像サイズは他画像とそろえる必要はあります)。

 この場合は、img_hero_pc01.jpg、img_hero_pc02.jpg、img_hero_pc03.jpgを表示したい画像と差し替えればOKです。

 HTMLを変更する場合は、「コンテンツ管理」の「ページ管理」でTOPページをクリックし、「コード」欄を書き換えます(注意:かならず編集前のコードをコピーないし、ファイルをバックアップして元に戻せるようにしておいてください!)。

 例えば、ex.jpgという画像を表示したい場合は、ほかの画像と同様の「html/template/default/assets/img/top/」以下にex.jpgを配置し、コードの該当箇所を以下のように書き換えます。?

123456789{% block main %}<div class="ec-sliderRole"><div class="main_visual"><div class="item slick-slide"><img src="{{ asset('assets/img/top/ex.jpg') }}"></div><div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div><div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div></div></div>{% endblock %}

 最後に右下の「登録」ボタンをクリックして変更を反映させます。

 これらの作業は、HTMLやプログラミングの知識が無いと危険な作業ですので、バックアップを取って元に戻せるようにしてください。最後に書きますが、ご自身で修正が難しい場合は、デザインテンプレートや開発会社に依頼する方がより安全で、凝ったサイトを作成することができます(お金はかかりますが)。

ブロック

 メインコンテンツに編集したい内容が見当たらない・・・という場合はブロックとして配置されていることを疑ってください。

 例えば、トップページの以下の表示は「新入荷商品特集」というブロックです。

 どうやって、見当をつけるかというと、先述のレイアウト管理からトップページのレイアウトを確認するとある程度推測することができます。

 Mainの下に「新入荷商品特集」や「トピック」という項目がありますね。

「新入荷商品特集」の内容

 ブロックのコードは「コンテンツ管理」→「ブロック管理」から確認できます。

 一覧から「新入荷商品特集」をクリックすると、コードが確認できます。?

12345678910111213<div class="ec-role"><div class="ec-eyecatchRole"><div class="ec-eyecatchRole__image"><img src="{{ asset('assets/img/top/img_about.jpg') }}" alt="" role="presentation"/></div><div class="ec-eyecatchRole__intro"><p class="ec-eyecatchRole__introEnTitle">{{ 'front.block.eyecatch.title__en'|trans }}</p><p class="ec-eyecatchRole__introTitle">{{ 'front.block.eyecatch.title__ja'|trans }}</p><p class="ec-eyecatchRole__introDescriptiron">{{ 'front.block.eyecatch.descriptiron'|trans|nl2br }}</p><a class="ec-blockBtn--top" href="{{ url('product_list') }}?category_id=4">{{ 'front.block.eyecatch.view_list'|trans }}</a></div></div></div>

 このコードに「ジェラートとは・・・」のようにページで表示されている文言があれば、特定は容易なのですが、EC-CUBE 4は多言語対応しており、それぞれの言語に合わせた表示を別の場所で行っています。

 多言語対応が不要な場合は、{{ ‘front.block.eyecatch.title__en’|trans }}などの代わりに日本語の文字を入れてもいいのですが、仕掛けを説明すると表示する文字はsrc/Eccube/Resource/locale/messages.ja.yamlというファイルに記述されています。

 今回の部分を抜粋すると、?

1234front.block.eyecatch.descriptiron: |ジェラートとはイタリアン・アイスクリームのことで、一般的なアイスクリームに比べて、乳脂肪分が低くいのが特徴です。当店では厳選した旬の果物のおいしさをそのままジェラートに仕上げました。風味が濃厚でありながら、甘さ控えめでヘルシーなキューブジェラートをご堪能ください。さらにジェラートの製法を活かした、アイスキャンディ・アイスサンドも販売しております。

 こんな感じです。コードの「front.block.eyecatch.descriptiron」の部分がこれに置き換わることが推測できると思います。

 新入荷商品特集の文言を変更する方法は2通り考えられます。

・src/Eccube/Resource/locale/messages.ja.yamlの該当箇所を書き換える

・多言語対応などが必要ないなら、messages.ja.yamlを使わない

 messages.ja.yamlを使わない場合を紹介します。「新入荷商品特集」コードの該当部分を以下のように変更します。?

12345678910111213<div class="ec-role"><div class="ec-eyecatchRole"><div class="ec-eyecatchRole__image"><img src="{{ asset('assets/img/top/img_about.jpg') }}" alt="" role="presentation"/></div><div class="ec-eyecatchRole__intro"><p class="ec-eyecatchRole__introEnTitle">ここには英語のタイトルが表示されていました</p><p class="ec-eyecatchRole__introTitle">日本語のタイトル</p><p class="ec-eyecatchRole__introDescriptiron">説明文を表示します</p><a class="ec-blockBtn--top" href="{{ url('product_list') }}?category_id=4">{{ 'front.block.eyecatch.view_list'|trans }}</a></div></div></div>

 このように変更すると下の画像のように表示が変わります。右側の画像が文字数の減少に合わせて大きくなっているので、HTMLやCSSで要微調整ですが、文字が変わっているのがわかると思います。

まとめ

 このように、EC-CUBE 4の表示の変更はレイアウト、メインコンテンツ、ブロックの仕組みを知ったうえで該当箇所を探す必要があったり、多言語対応の影響で変更するファイルが分かりづらくなっている側面があります。

 Twigの仕組みもHTMLやCSSを勉強しただけでは少し難しいかもしれません。

 「これは自分では難しい!」と感じた場合はデザインを変更するテンプレートをオーナーズストアで購入するか、開発会社にカスタマイズを依頼するのも検討してみてください。

管理画面URLを忘れた場合に確認するファイル・URL変更もOK

EC-CUBE開発でやってしまう落とし穴の一つ、あまりあってはならないことなのですが・・・たまにやってしまうのが管理画面のURLを忘れてしまうことです。
パソコンを再インストールしたり買い換えた時に、あれ?URLなんだっけということがたまーに起こります。

そんなときはFTPでサーバーへ接続し、インストールしたディレクトリにある.envというファイルをテキストエディタなどで開いてみましょう。
下の方までスクロールして行くと、ECCUBE_ADMIN_ROUTEという設定項目が記載されています。

.env管理画面URL

.envで指定されたECCUBE_ADMIN_ROUTEがEC-CUBE4での管理画面のURLになります。逆にいうとURLを変更したいときはここの値を変えればOKです。
セキュリティ対策面への配慮からも、是非わかりにくいURLへ変えておきたいところです。

.envの設定値は色々とあるので、ぜひまとめて紹介する機会を設けたいですね。