Ads by Google

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

HTMLタグ講座24  文法の解説

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

HTMLタグの解説



テーブルで商品陳列



HTMLタグ構文】

<table>←テーブル(表組)
 <tbody>←テーブルのグループ化
<tr>←横の区切り定義
   <td class="○" valign="top">←縦の区切り定義
    <p class="● ■">←前後1行空き段落
     <a href="□"><img src="http://***/img/cat.jpg" width="80" height="100" alt="商品名1図"></a>
    </p>
<div class="△">
<p class="●"><a href="https://www.moshimo.com/top/262049/" style="color: #0000FF;">商品名1</a></p>
<p class="d-article-highlight dc-inline-left">●説明1<br>●説明2</p>
<span style="color: #FF0000;">定価:500円</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タグ講座24終了

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

tag : HTMLタグ構文解説

HTMLタグ講座24テーブルで商品陳列

サイト構築 HTMLタグ講座24

テーブルで商品陳列



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

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

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

【ヘッド部】
タグ講座19と全く同じなので省略
【ボディ部】
(図をクリックして拡大して見てください)
lesson21 html

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

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

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

パンデミック対策!新型インフルエンザ対策マスクで集団感染予防通販

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

tag : HTMLタグ文書作成

ごあいさつ

ひでまる


このHTML独習ブログで、HTMLタグCSSタグを使ったホームページ作成の手順をHTMLタグ講座でステップ学習します。
HTML独習CSS独習ができるHTMLタグ講座で、ホームページ作成をマスターし、最終目標のネットショップ開設を行います。

HTMLタグ講座
カテゴリ
HTMLタグ講座
HTMLタグ講座
HTML独習 ホームページ

HTML独習ブログで行ったHTMLタグ講座
実施例ホームページへの直リンク集です。

完成例から先に確認したい場合に、ご活用ください。


HTML独習ブログの
実施例ホームページ

ひでまるリンク
BlogRanking





Yahooボットチェッカー powered by 
 Yahoo! Bot Checker
Yahoo bot last visit powered by  PrMania.Net
Yahoo!ボットチェッカー
Google bot last visit powered by PrMania.Net
Googleボットチェッカー
Msn bot last visit powered by  PrMania.Net
MSNボットチェッカー
HTMLホームページ