質問 > フロント機能 > 商品リストを横並びにしたい |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
yushi |
投稿日時: 2020/5/15 10:58
対応状況: 開発中
|
半人前 登録日: 2018/5/13 居住地: 投稿: 14 |
商品リストを横並びにしたい ▼テンプレート
[EC-CUBE] EC-CUBE2.17、新規インストール [onamae.com] SD11プラン [OS] Windows10 [PHP] 使用しているPHPのバージョン 5.6.40 [データベース] 使用しているDB名 Mysql、バージョン 5.6.14 [ブラウザ] 使用しているブラウザ名、chrome バージョン: 81.0.4044.129 [導入プラグインの有無] 無 [カスタマイズの有無] Bootstrap4を利用してレスポンシブにしたいと思っています。 [現象] 再現手順や、どのような現象が発生しているかなど、具体的に お世話になっております。 Webやフォーラムの過去を調べてみたのですが、判らず、質問させてください。 EC-CUBE2.17にBootstrap4を入れております。 そこで商品リスト(list.tpl)を横並びにしたいのですが、どのCSSが関わっているのかが判らずです…。 container内でcol-sm-6 col-md-3のカードにできたらと考えています。 Webで調べてみると、user_data/packages/〇〇〇/css/contents.cssとありますが、このファイルがなく、デフォルトのcssが使われるのでしょうか? 申し訳ありませんがご教授いただけますと幸いです。 |
468 |
投稿日時: 2020/5/15 11:05
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: 商品リストを横並びにしたい ブラウザのツールを使って、リアルタイムで適用されているCSSを確認された方が良いのではないかと思います。
Firefoxであれば調べたい箇所を右クリックして「要素を調査」、 Chromeであれば調べたい箇所を右クリックして「検証」で 開発者向けの画面が表示されるかと思います。 これでHTMLソースを確認しながら、そこに適用されているCSSも確認できます。 CSSファイルと行数も情報として表示されると思います。 この方法であれば、どのサイトでも自分で調査できるようになるかと思いますし、カスタマイズされたようなサイトでも調査可能かと思います。
|
yushi |
投稿日時: 2020/5/15 19:03
対応状況: −−−
|
半人前 登録日: 2018/5/13 居住地: 投稿: 14 |
Re: 商品リストを横並びにしたい Shiro8さん
いつもありがとうございます。 検証ツールの使い方を勉強します。 http://www.〇〇〇.jp/html/user_data/packages/scss/_reboot.scss というcssが該当しましたが、見当たらず困りました… |
468 |
投稿日時: 2020/5/16 11:57
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: 商品リストを横並びにしたい SASSという仕組みでCSSが作られている為、そのような表示となっています。
SASSについては別途詳しく調べていただければと思いますが、 ざっくりと説明すると、CSSを作る為のプログラムをコンパイルしてCSSを作り出す技術で 検証ツールで表示されている****.scssはCSSを作る為のプログラム(元ソース)になります。 SASSの開発者はそのほうが都合が良い為です。 chromeの場合、設定で元ソースではなくCSSを表示するように変更できます。 ECCUBEの話ではなく、chrome全般の操作になるので詳しい説明は割愛しますが 以下のサイトで「Enable CSS source maps」にチェックが付いている画面の画像がありますので そのチェックボックスのチェックを外してください。 https://blog.webico.work/chrome-live-sass firefoxの場合、****.scss:行数の表示上で右クリック→元のソースを表示のチェックを外すと CSSのファイル名、行数に表示が切り替わります。
|
yushi |
投稿日時: 2020/5/18 18:45
対応状況: −−−
|
半人前 登録日: 2018/5/13 居住地: 投稿: 14 |
Re: 商品リストを横並びにしたい shiro8様
クロームの検証機能についてご教授いただきましてありがとうございました。SASSなのですね。BootstrapもSASSを使うと良いと書かれていましたが、スルーしていました。 SASSについての知識を深めていきたいと思います。 ありがとうございました。 |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |