はじめてのHTML・CSS講座(3日目)

有機野菜サイトのコーディング、今回は「生産者からのメッセージ」の部分からコーディングします。

まずはsectionタグと、h2タグを書きましょう。

<section>
        <h2 class="ttl">生産者からのメッセージ</h2>
</section>

デザインカンプで確認すると、前回書いた「おすすめ商品」という部分とデザインが同じですね。つまり、h2にはclass名「ttl」を設定しておけば、同じ見た目にCSSが適用されます。それではその下の部分にあたる画像とテキストの部分をHTMLで書きましょう。

ポイントは、画像とテキストを包括する「message」というクラス名のdivタグを作成して、その中で画像が左、テキストが回り込んでくる、という指定をします。

<!--生産者からのメッセージ-->
    <section>
        <h2 class="ttl">生産者からのメッセージ</h2>
        <div class="message">
            <img src="https://placehold.jp/150x150.png" alt="ダミー画像" class="message_img">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ<br>キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ<br>キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
</section>
<!--生産者からのメッセージここまで-->

CSSは下記のように書きます。

.message {
    width: 700px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.message_img {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

ここではじめて出てきた「float」というCSSプロパティは奥深いので、ウェブで解説記事を探して読んでみることをおすすめします。
個人的にわかりやすいと思う記事はこちら→ http://taneppa.net/float/

つぎは販売会社の情報を記載します。
今度は表のような形が出てきました、これはhtmlでtableというタグを使用して組み立てていきます。
sectionでグループにして、h2タグにttlというクラス名をつけるのは同じです。

<section>
    <h2 class="ttl">販売会社</h2>
    <table class="company">
        <tr>
            <th>会社名</th>
            <td>有機野菜ドットコム社</td>
        </tr>
        <tr>
            <th>代表</th>
            <td>創造 太郎</td>
        </tr>
        <tr>
            <th>住所</th>
            <td>大阪府大阪市野菜区野菜1-2-3</td>
        </tr>
    </table>
</section>

デザインカンプで見ると、他のsectionより横幅が狭いので、中央に持ってくるdivタグは700pxと狭くしてみます。

.company {
    width: 700px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.company th {
    background-color: #fdfff0;
    border: 1px solid #555;
    padding: 10px;
}

.company td {
    border: 1px solid #555;
    padding: 10px;
}

注)このスタイルできれいに表が表示されるのは、ダウンロードしたひな形に下記のように指定しているからです。

table {
   border-collapse: collapse;
   border-spacing: 0;
}

復習

3日目の授業で使用した主なHTML

table
tr表の「行」、tableと共に使用する
th表の行内にある「セル」のヘッダーとなる部分に使用する、tr内で使用する
td表の行内にある「セル」、tr内で使用する

はじめてのHTML・CSS講座(3日目):この記事が3日目の講座の内容です。