たまちゃんHTMLのおうち

ステップアップ!ホームページの作成

ステップ6


ホームページ作成講座

■STEP1
HTMLファイルとCSSファイル

■STEP2
見出し

■STEP3
文字のスタイルと位置

■STEP4
画像

■STEP5
リンク

■STEP6
CSSのボックスレイアウト

■STEP7
動画

■STEP8
テーブル(表)


サンプルページ

サンプルページ1
サンプルページ2
サンプルページ3
サンプルページ4
サンプルページ5

「たまちゃんHTMLのおうち」のステップアップでは、ここまでの表示ができます。

このサンプルの表示は、幅固定の横3ボックスとヘッダーとフッターの全5ボックスのレイアウトです。

   ステップ1のサンプルページ
   ステップ2のサンプルページ
   ステップ3のサンプルページ
   ステップ4のサンプルページ
   ステップ5のサンプルページ

■まだまだ続く?ステップアップ■

aq.gif(50158 byte)

幅固定の横3ボックスとヘッダーとフッターを加えると、全5ボックスのレイアウトです。

全体のボックス「container」、ヘッダー「heder」、フッター「footer」は、変わりません。
あとは、「main_box」の幅と「right_box」と「left_box」の幅を足した値が「container」の幅になれば良いです。
やはり「float: left;」と指定してやって横に並べるのも同じです。

このページの背景などおさかなの画像は全て むふふの素材集(とほほママ作成のフリー素材)から使用させてもらいました。 なお、背景のおさかなは加工しています。
さんまは、刺身がおいしいよ!!
寄生虫がいるかもしれないので、一度凍らせると安心です。
\(^-^)/

このページは、ブラウザの「閉じる」で閉じてください。


トピック
ez-HTMLの使い方
 Google検索    1位
 Yohoo!Japan検索 1位
 (9/4 9:54現在)
ホームページ作成講座■STEP8 テーブル(表)を追加しました。
ez-HTMLの使い方に  「■検索・置換を行う」を追加しました。
掲示板、始めました。

人気ページ
タグの値の入力を楽に行う
HTMLファイルを編集する
HTMLファイルを作成する
無料でホームページ作成

おすすめ
ホームページ作成に役立つテクニック
ez-HTMLスペシャルサイドバー機能一覧
動画再生ができない...
■videoタグでmp4の動画が再生されない(解決法)