テキストサイトのための“最低限”HTML

　by 阿檀

"支店"ページ、営業中ｗ。

このサイトについて

　HTMLを勉強する為のサイトはたくさんあります。非常に充実したところも多いです。ただ…、充実した老舗であればあるほど、情報量が多すぎるの(笑)。どっから手をつけたらいいのか、くらくらしてしまう方も多いはず。

　だから、このサイトは、「文章を載せるサイトを作りたい方が」「テンプレートに文章をはめこんで」「タグを３つ覚えたらサイトが始められる」という最小限の内容を目標にすることにしました…。あくまで目標＆未達成ｗ

“工夫”しないとどうなる?
行間と余白をあけただけで…
文字エリア幅を固定する/(解説記事)
【おまけ】フォントサイズ一覧(ブラウザの表示→文字のサイズを変えて表示がどう変わるか見てみてください)

HTMLサイトを作る３つのステップ

◎ HPスペースを確保する
◎ HTMLファイルを作る。
◎ アップロードする。
ができれば、とりあえずサイトは作ることができます。アクセスアップがどうのとか、掲示板管理の問題とかは、あえて頭から追い出してますｗ
このサイトがお手伝いするのは、「HTMLファイルを作る」部分です。

HTMLファイルをつくる

文章ページのテンプレート

どのファイルも、テンプレートとしてはいささか無愛想に見えますけれども、ソースを見るとちょっとは解説が書いてあります。…ちょっとですが。

トップページのテンプレート

固定タイプの壁紙を使用する際に、数字をちょっと入れ替えれば、(比較的)簡単に形の整うテンプレート。画像への合わせ方の解説が不足ですが、「この画像にあわせたい」というのが先に決まっていれば、BBSでご相談にのります。

トップページのテンプレートは、いろいろなサイトさんで配布されていますので探してみてはいかがでしょう。

画像について

　このページおよび見本ページで使用している画像(除・ロゴ文字w)は、素材提供サイト様からお借りしたものです。ぜったいにこのサイトからはダウンロードせず、素材サイト様から直接、お借りください。それに、素材サイトさんへ行って探せば、あなたの用途に「もっと」合う画像があるかもしれません。
※　このページの画像は『clement-records』様の作品です。

どうしても必要な３つのタグ

　下記の３つのタグが判れば、とりあえず、テンプレートを使うことができると思います。あとで紹介するサイトさんで、この３つのタグの解説だけ読んでみてください。………というは、あんまりなので、そのうち解説ページを作ります(笑)

<br>＝改行です。
<img src="[画像ファイル]">＝imageの略。画像を挿入します。
<a href="[リンク先URL]">[リンク文字列]</a>＝anchorの略。リンクを示します。
<a href="[リンク先URL]"><img src="[画像ファイル]" border="0"></a>　とすれば、画像にリンクが貼れます。普通はborder="0"で囲み線がつかないようにします。もっとも、このページの一番上の「BLOG」「BBS」では、わざと線を残していますｗ

モニターサイズを考える

が、あなたのモニターサイズ。（ひと昔前と違い、横1024×縦768がほとんどだとと思う…）
けれど、横800×縦600タイプのノートパソコンにくらいは、対応しておきたいもの。
↓をクリックすると、Windowのサイズが横800×縦600になります。ご確認の一助に。
800×600

厳選リンク集

別窓で開きます。

HPスペースを確保する　

「内職！お小遣い稼ぎ.com」より無料HPスペースを手に入れるなら、こんなところを探してみる。簡単なFTPツールが付属しているところも多い。
NIFTYも、プロバイダーにNIFTYを使ってる方だったら、悪くないっすよ。まず第一に、広告が入らないのが、メリット。カウンター・チャット・BBS(掲示板)も無料レンタルしてくれます。

サイトづくりの基本　

10press：W3C的に正しく、かつ初心者の目線に配慮したチュートリアルサイト。「HTMLの基本構造」をコピーするところから始めれば、ページの基礎工事はできたようなもの。
1と2の間辺りからはじめるホームページ講座：←を勧めるべきなのだろう。管理人阿檀が、同じ作者の「1ページで騙（かた）るホームページ作成」のファンなのは秘密。
1時間で作るホームページ　[ WEBデザインの素 ]：上に書いたとおり、テンプレートもあるが、本来は、チュートリアルサイト。非常に基本的なところから書いてあります。
HTMLクイックリファレンス；タグの実行見本が判りやすく見やすい、リファレンスサイト。
TAG<index> ；タグリファンレスサイト。掲示板が活発。
とほほのWWW入門；「超」がつく老舗サイト。

W3Cについては、別ページで。

アクセシビリティについても考えてみよう

訪問者に優しいウェブサイト作り；音読ソフトを使っている視覚障害者、色覚障害者、そういう方の視点で、自分のサイトの「見え方」を検証してみたことは？　目が見えなければ本はなかなか読めないけれど、WEB作品なら音読ソフトが読んでくれる、そういう感想も聞いたことがあります。せっかくウェブで作品を公開するなら、そういう方にも楽しんでもらえるWEB構成を考えてみては？

テンプレート　

テンプレートを利用して、HTMLファイルを作ろうという場合は、TOPページのテンプレートを中心に、いろいろなところで配布されています。ここでは、「テンプレート配布サイトのリンク集」を挙げておきます。

10プレート : テンプレート配布サイトのリンク集
絵空cotton : ショートストーリーのサイトに、サイト主・絵空ひろさんが吟味なさった素材・テンプレート集が、併設されています。レベル高し。
文月夕さんの小説HTMLの小人さん：テキストを入力すれば、HTMLを出力してくれるという、すぐれもののツールが設置されています。

フリー素材リンク

フリー素材のサイトはとてもたくさんありますので、ここではフリー素材サイトをみつけるためのリンクサイトを紹介しておきます。

sozai-R/ 素材の森

色、いろいろ　

WEB COLOR 216；サイト主がいままで見たなかで、もっとも使いやすい色見本サイト。216色から96色を選んで並べたWEB COLOR 96は、同系色の色でサイトをデザインしたい、と思う人には必携。ColorNameは、アルファベット順に並べた色見本サイトも多いなか、きれいにグラデーションされていて、Web Colorと比較できるのもウレシイ。現在、サイト主のイチオシです。
visibone；上を発見する前に愛用していたのが、 ColorLab。英語わかんなくても、見本の色をとりあえずクリック!でOK!(笑)。ColorCode のコンパクトさは、現在も価値あり。ダウンロードして愛用してます。
色のみじんぎり／ Mariのいろえんぴつは、色コードを調べるだけでなく、配色に関しても参考になります。

ファイルをHPスペースへアップロードするソフト　

ffftp 「ブラウザアップ」ができないところでは、つくったWEBサイトをネット上にアップロードするのに、別のソフトが必要（ftpソフトとかいいます）。WINDOWS用としては、これが有名。
MACのことは、このあたりで探してみてください。

解凍ソフトウェア

LHASALZH,ZIPといった圧縮ファイルを元に戻す"解凍ツール"。

検索避け

検索避け覚書

CGI

Kent WebCGIの老舗。サイト主はCGI設置や改造について、他の方に教えるほどのスキルはありませんが、自分の備忘がわりにここにリンクを置いておきます。現在使用している掲示板も、こちらでお借りしました。

管理人について

このサイトは、もともと、「しんがりねずみ」名義で2002年ごろ作成した「りあまうすはうす」というサイトの、リメイクです(笑)　
なんせ、前のサイトは、<frame>＋<table>ばりばり・おまけにハーボットもいるという、アクセシビリティ的にたいそう行儀の悪い代物でして、……作り直しました。

ついでに、ハンドル名も、某所で使っていた「阿檀」に。「しんがりねずみ」も一部の方にウケてたんですが、 3年の間に、歳もとりましたし(妖笑)。

←バナーはこちら。バナー直リンク可です。

BBSに足跡いただけると、管理人は喜びます^^　

メールフォームも、ございます

-2005年09月　作成-
-2008年11月小改定-