スタジオコンチーゴ株式会社WEBサイトガイドライン
レギュレーションサイト

トップページ

 ルートディレクトリー
└ templates
 -internals
 ---default
 ----- └ default.html--------:今回の対象ファイル

以下が2021年8月18日時点の /templates/internals/default/default.html ファイルの記載内容です。テンプレートファイルは都度更新されるので、最新のものを利用するようにしてください。このファイルを編集する際は、構成を大幅に変更することなく、デザインの変更はスタイルシート(CSS)で行ってください。

default.html テンプレートファイルの中身

<!--/templates/internals/default/default.html-->
{include file='header.html'}
<div class="top-01">
    <p><img src="{$freo.core.http_url}images/header/top.jpg" alt="メインビジュアル"></p>
</div>
<main>
    <article id="top">
        <div class="top-02">
            <h1>レギュレーションサイトについて</h1>
            <p>このWEBサイトは、スタジオコンチーゴ株式会社のWEBサイト制作に関するレギュレーション(規定)をまとめたものです。制作者によってサイトの仕様に差が出ないように、規定を定めています。また弊社内の実験・検証のためにも使用していますので、掲載されている情報には架空のものも含まれます。</p>
        </div>

        <section class="top-03 fixbox">
            <h2>NEWS<span>最新情報</span></h2>
            <div class="top-03-container">
                <!--{foreach from=$entries|smarty:nodefaults item='entry' name='entry'}-->
                <!--{if $smarty.foreach.entry.index < 4 }-->
                <section{if $smarty.foreach.entry.first} class="top-03-first"{/if}>
                    <div class="img">
                        <a href="{$freo.core.http_url}view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}">
                            <!--{if $entry_thumbnails[$entry.id]}-->
                            <img src="{$freo.core.http_url}files/entry_thumbnails/{$entry.id}/{$entry.file}" alt="{$entry.title}">
                            <!--{else}-->
                            <img src="{$freo.core.http_url}images/common/dum_03.png" alt="{$entry.title}">
                            <!--{/if}-->
                        </a>                        
                    </div>
                    <div>
                        <p class="time">{$entry.datetime|date_format:'%Y.%m.%d'}<!--{if $entry.datetime|recently:7:'day'}--><span>NEW</span><!--{/if}--></p>
                        <h3><a href="{$freo.core.http_url}view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}">{$entry.title}</a></h3>
                    
                        <!--{if $entry_associates[$entry.id].category}-->
                        <ul>
                        <!--{foreach from=$entry_associates[$entry.id].category|smarty:nodefaults key='entry_category' item='entry_category' name='loop'}-->
                            <li>
                                <a href="{$freo.core.http_url}category/{$entry_category}">{$freo.refer.categories[$entry_category].name}</a>
                            </li>
                            <!--{/foreach}-->
                        </ul>
                        <!--{/if}-->
                    </div>
                </section>
                <!--{/if}-->
                <!--{/foreach}-->
            </div>
            <div class="more"><a href="{$freo.core.http_url}entry">過去のお知らせ一覧</a></div>
        </section>

        <section class="top-04 fixbox">
            <h2>SOLUTION<span>事業内容</span></h2>
            <div class="top-04-container">
                <section>
                    <a href="#">
                        <p><img src="{$freo.core.http_url}images/img/top_01.png" alt="WEBコンサル"></p>
                        <h3>WEBコンサル</h3>
                        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
                    </a>
                </section>

                <section>
                    <a href="#">
                        <p><img src="{$freo.core.http_url}images/img/top_02.png" alt="HP制作"></p>
                        <h3>HP制作</h3>
                        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
                    </a>
                </section>

                <section>
                    <a href="#">
                        <p><img src="{$freo.core.http_url}images/img/top_03.png" alt="ネット通販"></p>
                        <h3>ネット通販</h3>
                        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
                    </a>
                </section>

                <section>
                    <a href="#">
                        <p><img src="{$freo.core.http_url}images/img/top_04.png" alt="自社ブランド"></p>
                        <h3>自社ブランド</h3>
                        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
                    </a>
                </section>
            </div>
        </section>
    </article>
</main>
{include file='footer.html'}

トップページ HTMLコーディングの際のポイント

以下のブロックを例に説明します。

<section class="top-04 fixbox">
  <h2>SOLUTION<span>事業内容</span></h2>
  <div class="top-04-container">
    <section>
      <a href="#">
        <p><img src="{$freo.core.http_url}images/img/top_01.png" alt="WEBコンサル"></p>
        <h3>WEBコンサル</h3>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
      </a>
    </section>
    <section>
      <a href="#">
        <p><img src="{$freo.core.http_url}images/img/top_02.png" alt="HP制作"></p>
        <h3>HP制作</h3>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
      </a>
    </section>
  </div>
</section>
  • 1行目:top-04 というクラス名。topページなので、上から順番に、top-01, top-02, top03 とコンテンツをくくっていく(基本はsectionタグ)。
  • 3行目:top-04-container というクラス名。更にコンテンツをくくるような場合はsectionタグではなくdivタグを用いて、containerという単語を用いたクラス名にする。
  • 3行目:どうしても使わなくてはいけない場合を除いて、むやみにdiv, spanなどのタグを多用しない。
  • 7行名:<h3>タグを、<h3 class="top-03-title">としたくなるかもしれないが、冒頭で<section class="top-04 fixbox">という宣言があるので、h3にクラス名を指定しなくても、cssの記述でデザインを指定できるので、無駄なクラス名は極力書かない。
  • コンテンツの入れ替え作業があってもクラス名の変更は不要。例えば、top-02のsectionが、top-04のsectionの下に移動したとしても、クラス名の変更をする必要はない。