Profile Works Images B B S M . L . Links Diary
Brand-new Generations
Today'sSP. HPSample WebRadio e Mail My Bike Photo EX Kartz

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

 ここは、俺がホームページ作成時によく参考にするサンプルを集めてあります。
 PCが飛んだ時のためにサーバーに置いてあるんですが、どうせならちゃんと整形して公開しちゃえとなったわけです。
 ごく普通のものですが、何かの参考になればと思っています。
注意
 ここより先、スタイルシートに対応していないブラウザでは、正確に表示されません。
 近い将来、タグはすべて小文字で書かなければならなくなるようです。
 ウインドウズのバージョンやアップデート等の状況により、表示されない絵文字やフォントがあります。

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

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

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

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

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

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

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

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

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

日本語のフォント一覧

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

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

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

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

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

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

鉄板の背景画像素材

ダクト(吸排気口)の背景画像素材

その他の背景画像

私撰 COOL SITE 集

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

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

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

HPはトップの見た目 写真

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

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

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

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

 

▷ もどる ◁
Brand-new Generations
▷▶ HOME ◀◁
FC2 キャッシング 無料ホームページ ブログ blog