サポート掲示板

記事が属するツリーの記事を全て表示します 【12749】HPを作りたいのですが…… 鈴村 06/12/23(土) 7:42 質問
【12750】WEBサイトの作り方…。 小村大樹 06/12/23(土) 8:18
【12751】具体的な手順ですが、 小村大樹 06/12/23(土) 9:03
【12752】Re:具体的な手順ですが、 鈴村 06/12/23(土) 12:17 質問
【12753】WWW入門 wtz 06/12/23(土) 20:07
【12774】Re:HPを作りたいのですが…… 鈴村 07/1/6(土) 14:08 質問
【12775】CSSを利用します 小村大樹 07/1/6(土) 15:37
【12776】Re:CSSを利用します wtz 07/1/7(日) 10:49
【12777】訂正 wtz 07/1/7(日) 10:54
【12778】Re:訂正 wtz 07/1/7(日) 10:57

質問  鈴村  - 06/12/23(土) 7:42 -
パスワード
お使いの機器の機種:
お使いのOSの種類:Windows 2000
お使いのブラウザ :InternetExplorer 6.0
症状の起こっているソフトの名称とバージョン:
具体的な症状:

 はじめまして。鈴村と申します。
 私は、今自分のHPを作りたくて、忍者ツールでいろいろとしているのですが、登録したのはいいものの、どうやったらコンテンツ等が作れるのかさっぱりわかりません。
 タグというものを使うらしきことはわかったのですが、それもさっぱりです。
 私と同じように忍者ツールでHPを持っている方がいらっしゃいましたら、詳しく教えて欲しいです。
引用なし
 小村大樹 E-MAIL  - 06/12/23(土) 8:18 -
パスワード
忍者ツールズでは、WEBサイト作成用の
サービスは提供されていないようなので、
公開するWEBサイトを自分で作る必要があります。

※シナプスさんや、ジオシティーズなど、
 テンプレートを指定するなどして、
 簡単なWEBサイトを作れるサービスを
 提供しているところもあります。

まず、前提条件として、パソコンの
基本的な操作を行える必要があります。

○ファイルの操作法はマスターしていますか?
  ・新規ファイルの作成
  ・新規フォルダの作成
  ・拡張子
  ・ファイル名の変更
  ・相対パス・絶対パスの違い、指定法

○画像ファイルの操作はできますか?
  ・画像をPNG形式やJPEG形式で保存する方法
  ・PNG形式とJPEG形式の違い

WEBページは「HTML」という記述方式に沿って
記述する必要があります。
「HTML」では、文字などを「タグ」で囲って
装飾やレイアウト、リンクの設定などを行います。

初心者向けのサイトがありますので、ご覧下さい。
http://dir.yahoo.co.jp/Computers_and_Internet/Internet/World_Wide_Web/Page_Design_and_Layout/Beginner_s_Guide/

ホームページ・ビルダーなど、WEBサイト作成用の
ソフトも市販されていますので、そちらを利用するのも
よいかもしれません。
http://www-06.ibm.com/jp/software/internet/hpb/
引用なし
 小村大樹 E-MAIL  - 06/12/23(土) 9:03 -
パスワード
イメージをつかみやすいように、
ページを作る手順を簡単に説明してみます。

まず、メモ帳を開いて、次のように記述します。

<html>
<head>
 <title>テストページ</title>
</head>
<body>
 <p>テストです。</p>
 <p><img src="test.jpg"></p>
 <p><a href="http://www.synapse.jp/">シナプスさんのページにリンク</a></p>
</body>
</html>

入力し終わったら、「index.html」というファイル名で保存します。
(ファイルの種類に「すべてのファイル」を指定しないと、
 「index.html.txt」というファイルができてしまうので注意して下さい。)

同じフォルダに「test.jpg」という名前のJPEGファイルを準備すれば、
画像を表示させることも可能です。

<html>とか、<p>とかいうのが、「タグ」です。
ほとんどタグは対になっていて、入れ格子になります。
(<img>など、対になっていない「空タグ」と呼ばれるものもある。)
/が無いのが開始タグ、/があるのが終了タグです。

各要素の説明はおおよそ次の通りですが、
厳密な定義はWEBサイト等で確認して下さい。
<html>…HTML文書であることを示す。
<head>…文書に関するの情報(タイトルなど)を記述する場所
<title>…タイトル
<body>…本文
<p>…段落
<a>…リンク
他にも様々な要素が存在します。

開始タグには、「属性」が設定できるものがあります。
<img src="test.jpg">では「src=""」が、
<a href="http://www.synapse.jp/">シナプスさんのページにリンク</a>
では「href=""」が属性にあたります。

記述方法については詳しい決まりがあります。
<p><a>リンク</a></p>を記述するときに
<p><a>リンク</p></a>や<a><p>リンク</p></a>と記述するのは間違いです。
※詳しく書くと長くなるので、参考程度に。
 間違ってても、普通は問題なく表示されますし。

シナプスさんのQ&Aも参考にして下さい。
http://synapse.ne.jp/cgi/support/faq/c-board.cgi?cmd=one;no=2;id=faq

こんな感じのファイルができあがったら、
FTPソフトというのを使いまして、完成したWEBサイトを、
ネット上に公開できるようにします。
http://www.ninja.co.jp/help/hp/use.html

以上ですが、だいたい雰囲気はつかめましたでしょうか?
分からないことがありましたらお気軽にご質問下さい。
引用なし
質問  鈴村  - 06/12/23(土) 12:17 -
パスワード
質問、というか本題のみですが。

文章を黒だけではなく、他の色にする方法などありますか?(例えば赤とか青とか)
文字の大きさなども変化させることは出来るのでしょうか?
あと、<BR>とは何のことなのか教えて下さい。
引用なし
 wtz E-MAIL  - 06/12/23(土) 20:07 -
パスワード
html の入門的サイトがありまして「とほほのWWW入門」
http://www.tohoho-web.com/www.htm
がまずは勉強になります。

>文章を黒だけではなく、他の色にする方法などありますか?(例えば赤とか青とか)
赤い文字にしたければ例えば

<font color="red">赤い色の文字</font>

で出来ますが、スタイルシートのほうが好ましいんだけど

<span style="color:red">赤い文字</span>

初心者にはとっつきにくいかな?
http://www.tohoho-web.com/how2/color.htm#fontColor も参考にしてください。

>文字の大きさなども変化させることは出来るのでしょうか?

http://www.tohoho-web.com/html/font.htm
これも font タグで出来ます。上記を参考にしてください。

>あと、<BR>とは何のことなのか教えて下さい。
これは BREAK の略で、これがあると自動的に改行されます。
(ないと改行されない場合もあるもので)
引用なし
質問  鈴村  - 07/1/6(土) 14:08 -
パスワード
またまたすみません。
HPで小説を連載する予定なのですが、背景の固定の仕方などがわかる方はいらっしゃいませんでしょうか?
友人に話を聞いたところ、背景画像の固定が出来ると聞いたのですが、やりかたがさっぱりわかりません。
それと、小説を載せたいと思っているので、文章を読みやすく、両脇をあけたいのですが、文章を読みやすくしたりする方法はないでしょうか?(説明がヘタクソですみません)

よろしければ、お返事の方お願いします
引用なし
 小村大樹 E-MAIL  - 07/1/6(土) 15:37 -
パスワード
wtzさんが紹介されている
「スタイルシート(CSS)」を利用することで、
背景の表示方法を詳しく設定することができます。

テキストを中央に表示させるのも、
同様にCSSで可能です。
(こちらはTABLE要素やCENTER要素を利用して
HTMLだけでも実現可能ですが、
CSSを利用する方が好ましいです。)

CSSを利用すれば、文字サイズや行間、
装飾等も一括で設定&変更できますので、
WEBサイトを本格的に制作する場合には
是非ともマスターしておきたいものです。

wtzさんが紹介されている「とほほのWWW入門」に
詳しい説明がありますが、一例を示しますと、こんな感じです。

※文字を中央によせて表示させ、背景を右下に固定して表示する場合
※背景画像はback.gifとする
<!--html要素やhead要素等は省略します-->
<body style="background: url(back.gif) no-repeat fixed right bottom; margin: 20px 30%;">
<div style="background-color: #ccccff;">
<p> ここに本文が入ります。</p>
<p> 青空文庫から例文を入れてみます。「<a href="http://www.aozora.gr.jp/cards/000148/files/790.html">吾輩ハ猫デアル</a>」夏目漱石</p>
<p> 吾輩は猫である。名前はまだ無い。</p>
<p> どこで生まれたか頓と見當がつかぬ。何ても暗薄いじめじめした所でニャー/\泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間で一番獰惡な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別…(以後省略)</p>
</div>
</body>
引用なし
 wtz E-MAILWEB  - 07/1/7(日) 10:49 -
パスワード
小村大樹さんが紹介しているのではちょっと冗長な気がするもんで。
(小村さんすみません。)

背景の固定だけなら

><body style="background: url(back.gif) no-repeat fixed right bottom; margin: 20px 30%;">

の fixed が背景固定を指示しています。
no repeat が画像をスクロールしないように指定しています。

解説は
http://www.tohoho-web.com/css/reference.htm#background
あたりかな?

本屋に行けば、html,css,Javascript などをまとめた本が
2000円程度で売っているのでそれらを買うのも手です。
引用なし
 wtz E-MAILWEB  - 07/1/7(日) 10:54 -
パスワード
>no repeat が画像をスクロールしないように指定しています。

大嘘こきました。画像が繰り返し表示されないように指定しています。
まあ、いろいろやってみてください。
引用なし
 wtz E-MAILWEB  - 07/1/7(日) 10:57 -
パスワード
さらに訂正
>>no repeat が画像をスクロールしないように指定しています。

no repeat ではなく no-repeat ですね。
引用なし
ページ:  ┃  記事番号:   
(SS)C-BOARD v3.5.4 is Free.