http://future-japan.com/ きれいなウェブデザインでホームページを制作するためにスタイルシートをつかったウェブデザインを学ぼう！このサイトはきれいなホームページをめざし、 テーブルを使わないウェブデザインで制作しています。 ja Copyright (c) 2008, [あなたのお名前など] Fri, 16 May 2008 01:14:36 +0900 http://www.nishishi.com/soft/rssmaker/ mt monthly 1 http://future-japan.com/webdesign19.html http://future-japan.com/webdesign19.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:41:18 +0900
<link href="future.css" rel="stylesheet" type="text/css">

と書き込んでいます。これで...]]> http://future-japan.com/webdesign18.html http://future-japan.com/webdesign18.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:40:56 +0900 トップページ
はじめまして。ウェブデザインをスタイルシートできれいなホームページにしよう！
スタイルシートって何？
スタイルシートは便利なんです。
スタイルシートのリンクをなくすと？！
デザインがくずれます
CSSの準備
スタイルシートをHTMLファイルにリンクさせよう。
セレクタの書き方
スタイルシートへの記述（セレクタ）のしかたです。
ボックスの考え方
CSSデザインのレイアウトの考え方
idセレクタとクラスセレクタ
似てるけど微妙に使用目的がちがいます。
ボックスのレイアウト
配置のルール。
背景に画像をつける
背景画像配置のルール。
文字の大きさを変えてみる
文字を見やすい大きさへ。
テキストなどのデザイン
CSSで簡単、テキストのデザインチェンジ。
文字の行間など
文章の見栄えがスッキリ。
WEBデザインの注意点
閲覧者を意識したデザイン。
ホームページで収入
サイト運営のついでに副収入
検索サイトに登録
アクセスアップのために
ホームページ作成用ソフト
サイト作成のつよい味方
画像用ソフト
サイトのクォリティをアップ
役立つソフト
さらに強ーい味方
WEB関連書籍本・・。いかがですか？
サイトマップいま見てるこのページです。...]]> http://future-japan.com/webdesign17.html http://future-japan.com/webdesign17.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:40:44 +0900
次項「サイトマップ」]]> http://future-japan.com/webdesign16.html http://future-japan.com/webdesign16.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:40:32 +0900
Macromedia Flash Professional 8
Macromedia Flash Professionalは、インタラクティブな Web サイト、インターフェイス、ゲーム、モバイルコンテンツなどの制作に欠かせ...]]> http://future-japan.com/webdesign15.html http://future-japan.com/webdesign15.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:40:18 +0900
Adobe Photoshop CS2
Adobe Photoshopは、Photoshop ファミリー製品の頂点に立つデジタル画像編集のプロフェッショナルです。革新的でクリエイティブなツール群を備え...]]> http://future-japan.com/webdesign14.html http://future-japan.com/webdesign14.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:40:04 +0900
Macromedia Dreamweaver 8
Macromedia Dreamweaverは、標準規格に準拠したWeb サイト/Webアプリケーションを、効率良くデザイン/開発/管理することを可能にする業界最先端の...]]> http://future-japan.com/webdesign13.html http://future-japan.com/webdesign13.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:39:48 +0900 自分のサイトにあったカテゴリを選び、なるべくカテゴリをしぼりこんでゆきます。
推薦したいカテゴリに行き着いたら、右上に「サイトの登録・変更」があるのでクリックして順を追って必要事項を記入し、申し込みます。
YAHOOの登録はきびしいとよく言われますが、登録されれば訪問者の増大などが期待できます。
なお、商用サイトの推薦は、ビジネスエクスプレス（有料サービス）のみとなります。
→ Yahoo!JAPAN ...]]> http://future-japan.com/webdesign12.html http://future-japan.com/webdesign12.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:39:34 +0900 やり方次第では、サイトの運営費をまかなったり、副収入が期待できます。
ここでは、特にオススメのアフィリエイトの会社を紹介します。

A8NET審査なし。登録簡単、もちろん登録無料。副サイト登録が9つまで出来ます。
確定された成果報酬金額が5,000円を越えると、翌々月にご登録頂いた口座に振り込まれます。
ここはまず、登録した方がgood。


バナーブリッジ簡単な審査あり。もちろん登録無料。3000円より成果報酬の支払いがあります。成果報酬額を合算し、振込手数料を控除した金額が口座に振り込まれます。3000円未満の場合は翌月へ繰越されます。

バリューコマース審査あり。もちろん登録無料。5000円より成果報酬の支払いがあります。成果報酬額を合算し、振込手数料を控除した金額が口座に振り込まれます。5000円未満の場合は翌月へ繰越されます。

電脳卸審査なし。もちろん登録無料。最低支払い額は3500円、支払い日は申請月の翌々月末日となっています。
報酬額が高めなのが良いですね。
次項「検索サイトに登録」...]]> http://future-japan.com/webdesign11.html http://future-japan.com/webdesign11.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:39:20 +0900 アクセシビリティというモノがあります。
まあ、簡単に言えば「WEBサイトを閲覧する人すべてにやさしい作りであるか」という事です。
簡単に言っちゃいましたが、実行するのは結構大変だったりするのですが・・・。

閲覧する方は様々で、見る環境も様々です。
ウィンドウズを使ってる人、マックの人、古いPCの人、古いブラウザの人、最新のブラウザひと。
PCに慣れている、慣れていない、高齢者の方、障害者の方。

いろいろな環境...]]> http://future-japan.com/webdesign10.html http://future-japan.com/webdesign10.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:39:04 +0900 auto　自動
left　左揃え
center　中央揃え
right　右揃え
justifi　両端揃え（半角英数のみ）

例
p{text-align:center;}pを中央揃えにしました。

p{text-align:right;}
pを右揃えにしました。]]> http://future-japan.com/webdesign9.html http://future-japan.com/webdesign9.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:38:48 +0900 ここでは16進法で説明していきます。
#000000
これは「黒」です。
#のあとに数字やアルファベットの組み合わせを6文字書くことで色の指定をします。
テキストに背景色をつけたい場合は、cssを次の様にします。

h1{background-color:#FF0000;}

これでh1の背景が赤色になりました。文字と背景色の間を開けたい場合は、BOXでおぼえた様にパディングですき間を入れます。

h1{background-color:#FF0000;padding:10px;}

これで背景と文字の間に10pxのすき間が出来ました。少しずつ調整してキレイなレイアウトに仕上げましょう。
次項「文字の行間など」...]]> http://future-japan.com/webdesign8.html http://future-japan.com/webdesign8.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:38:32 +0900 h1{font-size:12px;}
h1を12pxで表示させるようにしました。
サイズの指定は、px以外にもありますが個人的にはpxが扱いやすく、一般的なように感じます。（勝手な意見）その他のサイズ指定em･ex･pt･pc･in･cm･mm
ちなみに、pt･pc･in･cm･mmはどのブラウザで見ても同じ大きさに見えます。レイアウト的には同じ大きさに見えた方が良いのですが、見る側がサイズを大きくしたい場合に変更する事ができません。em･ex･pxの方が見る側には良いと思います。
あと、％を使う方法があります。
p{font-size:80%;}
pのサイズを80％にしました。ちなみに80％の大きさは親要素を基準に決まります。例えば、bodyに文字サイズを指定して、bodyにpを書いたら、bodyの文字サイズが基準になります。

文字サイズを調整することで読みやすいレイアウトの整ったページに仕上がり、またCSSで指定する事で、すべてのページに共通したスタイルが与えられるため、WEBサイト自体に統一感がうまれます。
次項「テキストなどのデザイン」...]]> http://future-japan.com/webdesign7.html http://future-japan.com/webdesign7.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:38:18 +0900 文章のバックに好きな画像を入れたりするのに便利です。
画像は縦・横の繰り返して表示されますが、指定をすれば、縦だけ繰り返しや、横だけ、繰り返しをしない、を選べます。

background: url(http://www.future-japan.com/image/titleaka.gif) no-repeat;

これは、このサイトで使っているCSSの一部です。
ここでは、imageフォルダ内のtitleaka.gifをバック背景にし、画像の繰り返しをしない（no-repeat）にしています。

repeat　縦も横も画...]]> http://future-japan.com/webdesign6.html http://future-japan.com/webdesign6.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:38:02 +0900 positionプロパティは、absolute、relative、fixed、staticがあり、それぞれ配置のルールが違うので、理解しておくと便利です。


absolute　領域の4隅からの距離
relative　元の位置からの距離
fixed　スクロールしても動かない
static　指定しない時と同じ位置

absoluteは画面の左上から？？px、画面の上から？？px という風に配置されます。

relativeは何も指定しない場合の地点から左から？？px、上から？？pxと...]]> http://future-japan.com/webdesign5.html http://future-japan.com/webdesign5.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:37:44 +0900 まずidセレクタからおぼえてみましょう。
idセレクタはhtmlの中にある要素1つにデザインする時に使います。
例
･HTMLの記述
<div id="bbbbb">
<p>あいうえお</p>
</div>

・CSSの記述
#bbbbb{
color:#000000;
font-size:10px;
}

この場合idに「bbbbb」と名付けました。
HTML内で「あいうえお」という文字をidで囲みました。
「あいうえお...]]> http://future-japan.com/webdesign4.html http://future-japan.com/webdesign4.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:37:30 +0900 将来的にCSSは、これからの主流（もうなってる？）になるそうですが、古いWEBブラウザでは対応できないモノもある為、テーブルを使ったり、テーブル+CSSといったWEBサイトも見かけます。
ここでは、テーブルは使わず、ボックスだけのレイアウトデザインをしていこうとい思います。
HTMLを使ってテーブルでレイアウトしているとボックスの考え方とテーブルの考え方がごっちゃになってしまい、ワケがわからなくなってしまうので（私だけ？）テーブルの事はいったん忘れて...]]> http://future-japan.com/webdesign3.html http://future-japan.com/webdesign3.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:37:14 +0900 セレクタ{プロパティ:値}
例えると次のようになります。
h1{color:#CC0000;}
これは、h1（大見出し）の文字にcolor（色）を指定、その色は#CC0000（赤色）という文です。
最初に変えたいモノを書き{　}の中に変えたい部分とどう変えるかを書きます。（ものすごく簡単に言ってしまえば）
間に入れる : と最後に入れる ; を忘れずに。 : で前と後ろが関連している事になっています。
; で1つの命令が終了しています。
また、複数のスタ...]]> http://future-japan.com/webdesign2.html http://future-japan.com/webdesign2.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:37:00 +0900
<link href="future.css" rel="stylesheet" type="text/css">

と書き込んでいます。これで...]]> http://future-japan.com/webdesign1.html http://future-japan.com/webdesign1.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:36:40 +0900 http://future-japan.com/index.html http://future-japan.com/index.html きれいなホームページ,ウェブデザイン,きれい,ホームページ,WEBデザイン,ホームページデザイン,スタイルシート,ホームページ作成 Fri, 9 May 2008 23:36:10 +0900