行政書士試験の学習方法や通信講座・学校の比較など。初学者に役立つ資格情報をわかりやすくまとめています。
行政書士試験の資格&講座ガイド - はじめて学ぶ行政書士

ホームページのレイアウト作成|行政書士

行政書士資格と通信講座・学校の試験対策サイト

ホーム > ホームページ作成ティップス > 私のレイアウト作成方法

ホームページのレイアウト作成方法

実は当サイトは2回リニューアルされています。

最初の情けないデザイン→ちょっと慣れてきて変更→スッキリしたくて変更

初めてHPを公開したのが2004年の7月後半だったのですが、短期間に沢山いじりました。
原因は納得のいくレイアウトができなかったからです。

最初の頃はデザインを変更しても楽なのですが、ページ数が増えてくると
泣きそうなくらい大変になってきます。

私はHTML Maker AZUKIで作っていたので、とても大変でした。

本格的なホームページ作成ソフトを購入したのはYahoo!に登録されてからだったんです。

テーブルを使わないCSSレイアウト

テーブルとは表の事です。↓こんなのです。
   
   

ホームページのレイアウトはこのテーブルで枠を作って、レイアウトするのが基本です。
エクセルの表でレイアウトするイメージですね。

テーブルを使わない場合は CSS(スタイルシート)というもので作成します。
これからHTMLを覚えようとしている方は一緒にCSSも覚えるといいですよ。
同時に覚えていくと一気に上達します。

CSSの説明は難しいので省きますが、<DIV>〜</DIV>と囲ったブロックを積み重ねてレイアウトしていきます。次のブロックを右にもってきたい場合はfloat:right; で右にもってきて積み重ねていきます。

このページの右サイドバーもこの方法を使っています。

当サイトはCSSとテーブルを両方使っています。
テーブルだけでも不便だし、CSSのみでもごちゃごちゃしてしまうので今の形になりました。

スタイルシートは今後主流になるので、ぜひ覚えてくださいね。
ちなみに今流行りのブログはスタイルシートを使ってレイアウトされています。

ホームページがどうやってできているのかは、インターネットエクスプローラーの「メニュー・・表示・・ソース」で見れます。当ホームページを見てわかるように、<DIV>と<table>が混ざっています。

私のホームページ作成手順

1:ノートにピクセル単位で概観を書いていきます。横幅は700px〜800pxで設定します。
2:文章を一気に作成
3:CSSでブロックで分けて、レイアウトをしていく
4:カラープランは後回し(CSSを使うとデザインの変更が楽で色ぐらいは直ぐに変えられるようにできています。)

ホームページ作成コラム

SEO、アクセスアップの事とか?

Copyright (c) 2004-2007 はじめて学ぶ行政書士試験 All Rights Reserved.