ページの技術説明

サンプルページ/HTML版全体像(別窓で開きます)

・センタリング

サイト全体が画面の真中に来るようにしています。
これは、bodyの最初から最後までをcenterタグを使って行っています。

なお、この手法は実は非推奨なので、本来ならばページ全体をdivやtableで囲って、センタリングする手法が望ましいです。
が、今回はまだ基礎編なので「へぇ〜」と頭の片隅になんとなく覚えておいて頂ければそれで構いません。


・テーブルレイアウト

それぞれのスペースの分け方は全てテーブルを使って行っています。
tdやthタグにcolspanという属性を入れる事でこのテーブルレイアウトは可能となります。

colspanとは横に○セル分という意味の属性です。
縦のバージョンはrowspanで設定できます。

具体的にはこのような感じです。

<table border="1">
<tr><td>マス1</td><td>マス2</td></tr>
<tr><td colspan="2">マス3(2つ分)</td></tr>
</table>

表示させるとこうなります。

セル1セル2
セル3(2つ分)

セルの中の色や、枠線の色を変えるのは今回はtableタグやtd、thタグに直接bgcolorを定義してやっています。
(これは非推奨なので本来はCSSを使った方が良いです。 >> 非推奨タグ・属性)


・横幅の固定

テーブルにwidth属性(横幅指定)を使い、サイトの中身の横幅を固定してあります。

現在は1024×768の画面サイズが主流で1280×1024も増えて来てると思います。 ですが、古いPCだと800×600というサイズも有り得ます。 なので、横幅は800×600の画面でも横スクロールが出ないようにすると良い感じなのです。


・インラインフレーム

更新履歴の表示にはインラインフレームという物を使っています。
インラインフレームとは局部的に他のページを見せるという技術です。

<iframe src="menu.html" width="340" height="150" name="rireki">

このように記入すると、その場所に横幅340px、縦幅150pxでmenu.htmlというファイルを表示させます。
name属性について説明すると長くなるので今回はnameについては省略します。


・スタイルシートの使用

スタイルシートもちょっとだけ使っています。 一応ちゃんと外部ファイルとして設定してあります。

とは言っても、まだほとんどスタイルシートを使いこなせてなかったので、 使ってたのはリンクの設定ぐらいでした。
>> リンクの設定を変えてみよう


・JavaScriptの使用

お気に入り追加ボタンに関してはこちらのページで 説明しているのでこちらをお読みください。ちなみに、JavaScriptです。
ついでに、「開設○日目」と表示されていル場所がありますがが、この○に入る部分もJavaScriptを使用しているので今回は省略します。

JavaScriptに関してはソッチ系のサイトを漁るとそのままコピペで使って良いコードが公開されていますので、それらを探して使いました。 残念ながら、当時探したサイトはどこか覚えてません(汗


■ 過去のサイト解説講座その1
・ サンプルページ/HTML版全体像(別窓で開きます)
・ ページのデザインコンセプト+考察
・ ページの技術説明
・ ページ上部の効果・思惑説明
・ ページ中部の効果・思惑説明
・ ページ下部の効果・思惑説明

他にも「ここはどうなってるの?」とかやって欲しい説明がありましたらご遠慮なくお問い合わせください。
>> お問い合わせ



ステップアップWebデザイン

過去のサイト解説講座その1

▲このページのトップに戻る

幸せなお金持ち
Webノウハウ・ラーニングコース

当サイトは上記の「Webノウハウ・ラーニングコース」の正規パートナーサイトです。 私の紹介で購入すると10%OFFになります。

w6669」←が私のギフトナンバーですので、 ご購入の際には是非お使いください♪

Webノウハウ講座の感想

【PR】 釣具販売【楽天】  ルアー・フィッシング【楽天】