スタイルシート(CSS)
このテンプレートには、複数のスタイルシート(CSS)を読み込んでいます。(以下は/templates/header.html 内の記述)
スタイルシートの構成
<!--/templates/header.html 内の記述--> <link rel="stylesheet" href="{$freo.core.http_url}css/reset.css"> <link rel="stylesheet" href="{$freo.core.http_url}css/style.css"> <link rel="stylesheet" href="{$freo.core.http_url}css/pc.css"> <link rel="stylesheet" href="{$freo.core.http_url}css/tablet.css"> <link rel="stylesheet" href="{$freo.core.http_url}css/smart.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"> <link rel="stylesheet" href="{$freo.core.http_url}css/colorbox.css"> <link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css"> <link rel="stylesheet" href="{$freo.core.http_url}css/jquery.subwindow.css"> <link rel="stylesheet" href="{$freo.core.http_url}css/validationEngine.jquery.css">
制作者が修正するファイルは、基本的に以下の4つです。style.cssから順にぺーディングを進めてください。また、スタイルシート(CSS)のコーディングガイドのページも合わせてご確認ください。
.com ルートディレクトリー └ css ├ 1 style.css--------:WEB 1,280px以上 ├ 2 pc.css-----------:WEB 1,279px以下、1,025以上 ├ 3 tablet.css-------:WEB 1,024以下、601px以上 └ 4 smart.css--------:WEB 600px以下
4つのスタイルシート
それぞれのスタイルシートごとの表示を確認するため、トップページのみ、以下のサイズで表示確認をして、それぞれのスクリーンショットをBacklogで送ってください。その他のページ(内部ページ)に関しては、スクリーンショットは不要ですが、以下のサイズでCSS担当者が必ず確認をしてください。
style.css
- 制作者の画面の最大サイズ
- 横幅1,280px
pc.css
- 横幅1,279px
- 横幅1,026px
tablet.css
- 横幅1,025px
- 横幅601px
smart.css
- 横幅600px
- 横幅375px
- スマホ実機