HTML独習 ブログ

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

サイト構築 HTMLタグ講座２４で使われた

HTMLタグの解説

テーブルで商品陳列

【HTMLタグ構文】

＜table＞←テーブル（表組）
　＜tbody＞←テーブルのグループ化
＜tr＞←横の区切り定義
　　　＜td class="○" valign="top"＞←縦の区切り定義
　　　　＜p class="● ■"＞←前後１行空き段落
　　　　　＜a href="□"＞＜img src="http://***/img/cat.jpg" width="80" height="100" alt="商品名１図"＞＜/a＞
　　　　＜/p＞
＜div class="△"＞
＜p class="●"＞＜a href="https://www.moshimo.com/top/262049/" style="color: #0000FF;"＞商品名１＜/a＞＜/p＞
＜p class="d-article-highlight dc-inline-left"＞●説明１＜br＞●説明２＜/p＞
＜span style="color: #FF0000;"＞定価：５００円＜/span＞
＜/div＞
＜/td＞
　　＜/tr＞
＜/tbody＞
＜/table＞

class="● ■ △"のスタイルシート構文で、テーブル組を表示。
valign="top"：セル内で上揃え


【CSSタグ構文】

.d-article {
width: 270px;←幅
}

.d-article2 {
width: 180px;
}

.dc-float-left {
float: left;←左配置、右に要素回り込み
}

.dc-inline-center {
text-align: center;←中央配置
}

※上記＜＞は、誤表示防止のため全角を使ってます。

サイト構築 HTMLタグ講座２４終了

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

tag : HTMLタグ構文解説

サイト構築 HTMLタグ講座２４

テーブルで商品陳列

タグ講座１８まで学習したHTMLタグを応用して、ネットショップサイト構築までの過程を学習します。

今回は、小さな画像の商品を複数並べて表示する方法です。
セル（升目）を使わず、横２列と横３列の場合です。

では、今回記入したHTMLタグの構文は以下の通りです。
（行数が増えたので、別々に図をクリックして拡大して見てください。)

【ヘッド部】
タグ講座１９と全く同じなので省略
【ボディ部】
（図をクリックして拡大して見てください）


今回より、別ファイルで記入したCSSタグの構文は以下の通りです。


このHTMLファイルと、CSSファイルを、タグ講座１の説明と同じ手順で、拡張子 .html と .css で保存してFC２にアップします。
すると、ブラウザでこのように見えます。


文法の解説は次の記事で行います。

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

tag : HTMLタグ文書作成