Brand-new Generations

ホームページ作成のサンプル

　ここは、俺がホームページ作成時によく参考にするサンプルを集めてあります。
　PCが飛んだ時のためにサーバーに置いてあるんですが、どうせならちゃんと整形して公開しちゃえとなったわけです。
　ごく普通のものですが、何かの参考になればと思っています。

注意

　ここより先、スタイルシートに対応していないブラウザでは、正確に表示されません。
　近い将来、タグはすべて小文字で書かなければならなくなるようです。
　ウインドウズのバージョンやアップデート等の状況により、表示されない絵文字やフォントがあります。

画像を使わずテキストだけで、絵文字や記号を表示

　+や♨が、画像を使わなくても表示できます。
　しかも簡単に！
　テキストのみなので軽くなるし、色や大きさの変更も簡単で、とても便利です。
　ありすぎて困るほどの種類の絵文字や記号が、Windows標準で用意されています。
　ついでに、Windows標準のフォントの一覧も

フォント「fsイラスト94」で、絵文字や記号を表示

フォント「Map Symbols」で、絵文字や記号を表示

フォント「Marlett」で、絵文字や記号を表示

フォント「Webdings」で、絵文字や記号を表示

フォント「Wingdings」で、絵文字や記号を表示

文字コード番号で、絵文字や記号を表示

短縮形で、絵文字や記号を表示

日本語のフォント一覧

アルファベットのフォント一覧

注意 : フォントはそのPCに入っているかいないかで左右されます。フォントを指定しても相手のPCによっては、意図した通りに表示されない場合があります。

画像を使わずに影付き文字を表示（フィルタ）

　各見出しの文字には影がついていますが、これらは画像ではなくテキストです。
　フィルターと言う、スタイルシートの機能を使うと、簡単にできます。

フィルターで文字に影を付ける

ボツになった、背景画像素材集

鉄板の背景画像素材

ダクト（吸排気口）の背景画像素材

その他の背景画像

私撰　COOL SITE 集

　そーです、何はともあれ第一印象が勝負です。これが悪いと、とっとと他サイトへ飛ぶのは俺だけではないはず。
　そこで、ぱっと見が気に入ってるサイトのリンク集です。
　全体的に、自分でもできそうな（HTMLを書けそうな）やつを選んでいます。じゃ無きゃ参考にならないからね。
　アニメが長くて表示が終わらないもの、音が出るもの、ポップアップがうるさいもの、勝手にウインドウ幅を変えるもの、重くて表示に時間がかかりそうなものは、省いています。
　素人の俺が選ぶのもどうかとは思うけどね。まぁ、こればっかりは、個人的な趣味だからさ。
　それにしても、俺はアニメやフレーム、横スクロールがきらいみたい。

HPはトップの見た目 美術館サイト

HPはトップの見た目 デザイン

HPはトップの見た目 写真

HPはトップの見た目 ファンサイト

HPはトップの見た目 今のところその他扱い

ブラウザウインドウ幅確認用テーブル

　横スクロールはとても面倒なので、いつもこれでサイトの横幅を確認しながら作っています。
　ウインドウの幅を、上のテーブルにぴったり合わせるわけですね。
　なんでウインドウ幅を655ピクセルにするかというと、Yahooのトップページがそうなっているからです。
　これにはきっとふか〜いワケがあるのだろうと、考えてるわけです。
　よく、ウィンドウ幅は800ピクセルにするというのを聞きますが、左側に「お気に入り」や「履歴」を表示させると、実際に使える幅は650ピクセル前後になってしまいます。
　たぶんYahooは、そのあたりのことを考えているんだと、思っているわけです。
　まぁ、長いものには巻かれちゃうわけですね（笑
　右に縦のスクロールバーが出ると、さらにせまくなっちゃいます。

▷　もどる　◁
	Brand-new Generations
▷▶　ＨＯＭＥ　◀◁