ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換！
更新通知を受け取って、最新情報をゲット！

教えて！ホームページ作成Q&Aコミュの初歩の初歩の初歩の質問　パート３

ログインして参加する

  • mixiチェック
  • このエントリーをはてなブックマークに追加

初歩の初歩の初歩の質問　パート３

mixiユーザー 2011年03月09日 11:54

パート２で1000件目の書き込みをしたので、パート３を立てます。

パート１はこちら
http://mixi.jp/view_bbs.pl?id=12150171&comm_id=951113
パート２はこちら
http://mixi.jp/view_bbs.pl?id=30664972&comm_id=951113

*******以下、パート２からのコピペです。************

　初心者さんが陥りやすい初歩のミスやつまづきを質問する場所です。
　ホムペ製作初心者さんの可能性もありますので、答える人はなるたけ暖かく迎えてあげてください＾−＾


※質問はなるたけ明確に、ある程度自分で調べてから質問しようね
※トピ性質上「それぐらいぐぐれ」は禁句

ホムペ作成の参考になりそうなリンク
とほほのｗｗｗ入門
http://www.tohoho-web.com/www.htm
ウィキペディア
http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8

コメント(129)

前

[91] mixiユーザー 07月05日 14:53

>>90
mokkyさん

すみません、とても単純なミスでした_(._.)_
ご指摘ありがとうございました。なんとか表示されるようになりました。

[92] mixiユーザー 07月09日 14:20

　まだ、初歩段階なのです。基本的なミス！ノートパソコンの液晶を掴んで壊れて・・・・。それまでのパナソニックのレッツノートから、acerのものに変わりました。そこから、データを移設してFFTPで更新ページをアップしました。グーグル画面では更新されているのに、IEの画面では全然更新されていません。
　何故でしょうか。教えていただけませんか？

[93] mixiユーザー 07月09日 14:26

書き忘れました。テラパッドを使って書いたものです。

[94] mixiユーザー 07月10日 13:24

やっと、更新されていました。込み合っていただけでしょうか。ご心配おかけしました。

[95] mixiユーザー 07月12日 00:25

投稿させてもらいます。

ホームページ作成、フレームをボタンで変化させる方法を知りたいです。
只今自分のmac(10.5.8)のテキストエディターを使いホームページを作っています。

とても簡単な構成の、三分割のフレームページ構成です。

左にボタンページ(menu)を作ったのですが、menu内にあるボタンを押して
右のフレーム内にprofileボタンだったらprofileの内容を表示するのに苦戦しています。

ボタンを押すと隣のフレームに指定したページを表示するボタンの作り方を
教えて下さい。


あともう一つ質問なのですが、このホームページが完成したとして、それを
ネットに公開するにはどのような方法がいいでしょうか？

fc2のサーバーを借りようと思っているのですが、一からページの指定を直したり
画像を載せていかなくてはいけないのでしょうか？



ホームページ初心者で申し訳ないです、質問自体も未熟ですが
回答お願いします。

[96] mixiユーザー 07月14日 07:30

>95 悠久アルファ-300さん
＞左にボタンページ(menu)を作ったのですが、menu内にあるボタンを押して
＞右のフレーム内にprofileボタンだったらprofileの内容を表示するのに苦戦しています。

右フレームにもNAMEがついていますよね？それが「profile」という名前だとします。
左フレームにあるボタンにリンクさせるとき、target="profile" というスクリプトを追加すれば、リンク先のページがprofileのフレームに表示されます。

フレーム構成の基本については
http://www.htmq.com/html/indexm.shtml#fra
の
＜FRAME＞と＜FRAMESET＞の説明を参照してください。

[97] mixiユーザー 07月14日 07:50

次のページを例にしてみます。
http://roundsquaretriangle.web.fc2.com/dtm/index.html

左のフレームにはボタンではなく文字がありますが要領は同じです。

たとえば「用意するもの」という文字をクリックすると右側のフレームの内容が切り替わります。

<a target="main" href="index_01.html#prepare">
用意するもの
</a>

このように「用意するもの」という文字にリンクがあり、その中に「target="フレーム名">」がありますね。


indexページには

<frameset rows="*" cols="220,*" frameborder=yes>
<frame src="menu.html" name=menu>
<frame src="index_01.html" name=main>
</frameset>

というコードがあり、右のフレームに「main」の名前をつけています。

上記の「用意するもの」という文字のかわりにボタンの画像をつかっても同じです。
リンク先を読み込むとき、それを「どこに表示させるか」をnameで指定すればよいということです。

[98] mixiユーザー 07月14日 13:18

>97らうんどさん
ありがとうございました。
助かります。

[99] mixiユーザー 07月18日 00:01

失礼します
続けて質問すみません。

参考に写真を載せたので、それで説明したいと思います。

ホームページ全体の構成は、ヘッダーと、メニューボタンのページと、それを
表示させる内容画面です。

自分の作品を載せるサイトにしようと思っているのですが、フレームの作り方がわからなく
なったので質問します。

画像で、Aのボタンを押すと隣の画面に作品を紹介する画面を作りたいのですが
下の赤いボタン群は小さい窓になってスクロール出来る仕組みになっているので
すが、そのボタンを押すと上のスペースにそのボタンの作品が表示されるといっ
た様にしたいのですが、はたしてどのようにして構造を作ったらいいのかよくわ
かりません。


フレームセットを使ってあらかじめ作品が表示されるスペースを作った方がいいのか‥


初心者の為、このような問題につまずいております、回答よろしくお願いします。

[100] mixiユーザー 07月18日 16:03

＞悠久アルファ-300さん

フレームを作成する際には
複数のhtmlファイルを作成する必要があります

今回の場合は
・ヘッダ
・左　（メニュー）
・右　（内容を表示させる画面）


と３種類のファイルを作成します


以下サンプルソース
=======================

<html>
<head>
<title>サンプル</title>
</head>
<frameset rows="20%, 80%">
<frame src="header.html">
<frameset cols="30%, 70%">
<frame src="menu.html">
<frame src="contents.html">
</frameset>
</frameset>
</html>

=======================


★　<frameset rows="20%, 80%">
この部分で上下の分割を行なっています。　
今回は%単位で分割を行なっていますがpixel単位で行うことも可能です。
(20%のほうが上の部分、80%が下の部分です）

★　<frameset cols="30%, 70%">
ここで左右の分割を行なっています
30%が左のメニュー部分
70%が右のコンテンツ部分です。

rowsで上下分割、 colsで左右分割です




>下の赤いボタン群は小さい窓になってスクロール出来る仕組みになっているので
すが、そのボタンを押すと上のスペースにそのボタンの作品が表示されるといっ
た様にしたいのですが、はたしてどのようにして構造を作ったらいいのかよくわ
かりません。

この件につきましては以下のリンク先を参照してください。
（ソースをそのままはると長くなってしまうため）

ttp://www.oct.zaq.ne.jp/pshp-studio/kowaza_02_thum1.html
(最初に h　付け足してくださいねm(__)m）

（言語としてはHTML言語ではなくJavascriptという言語を使用しています）


アルファーさんはスクロールできる仕組みを希望とのことでしたが
むやみにスクロールを使うと見づらくなってしまう事が多いので
このサイトのようにスクロール機能なしで、小さい画像を貼るほうが見栄えがよくなります。



そして最後に今回はフレームでの作成ということでしたが
もしホームページ作成に慣れたらCSSという言語を学ぶと
レイアウトがより綺麗に作成することが可能になります



（説明下手で申し訳ありませんげっそり）
頑張ってくださいわーい（嬉しい顔）

[101] mixiユーザー 07月18日 23:29

>>99
インラインフレームは？

[102] mixiユーザー 07月19日 01:28

>れのあさん

とてもわかりやすく書いてくれてありがとうございます。
れのあさんが貼ってくれましたサイトをヒントにうまく行きそうです。
javaってhtmlに組み込んでも大丈夫なんですね！

あと一つ
また質問があるのですが
写真を表示させる事は出来たのですが、その写真を解説する文字もその都度
加えたいと思うのですが、文字情報を写真の切り替え毎に変化させる事は可
能なのでしょうか？

[103] mixiユーザー 07月19日 10:37

>アルファーさん

良かったですわーい（嬉しい顔）

ちなみに「java」と「Javascript」は違う言語なので注意してください衝撃


今回の質問に関してはこちらのサイトを参照してください
ttp://weboook.blog22.fc2.com/blog-entry-6.html
（また最初にhを）

こちらのサイトでは小さい画像ではなくボタンクリック時に
画像が切り替わり説明文も切り替わるというソースがあります。

このソースを参考に　ボタンではなく小さい画像クリック時に説明文を切り替え
というのを作ってみてくださいぴかぴか（新しい）

（時間がなかったのであまり詳しく見ていないのでこの方法で出来なかったらスイマセンげっそり）

これからちょっと出かけなければなので
夜時間があれば僕の方でも作ってみますので
もし難しくて出来なかった場合はまた　書き込んでくださいるんるん

[104] mixiユーザー 07月19日 22:58

>アルファーさん


帰宅遅くなってしまいすいませんm(__)m
もう作り終わっちゃったかもしれませんが一応
最低限の要望の物を作ってみました

以下ソース

==============================

<SCRIPT type="text/javascript">
<!--
function showimg1(){
document.imgLink.src = "1.jpg";
document.getElementById("message").innerHTML = "表示する文章1";
}

function showimg2(){
document.imgLink.src = "2.jpg";
document.getElementById("message").innerHTML = "表示する文章2";
}

function showimg3(){
document.imgLink.src = "3.jpg";
document.getElementById("message").innerHTML = "表示する文章3";
}
-->
</SCRIPT>

<img src="1.jpg" name="imgLink">
</a>
<div id="message">最初に表示する文章</div>


<table>
<td align="center"><a href="javascript:showimg1()"><img src="1.jpg" width="115" border="0"></a></td>
<td align="center"><a href="javascript:showimg2()"><img src="2.jpg" width="115" border="0"></a></td>
<td align="center"><a href="javascript:showimg3()"><img src="3.jpg" width="115" border="0"></a></td>
</table>

==============================

これを元にレイアウトなどを考えてみてくださいわーい（嬉しい顔）

もし今回のソースで解らないところ等あれば
また言ってください

でゎダッシュ（走り出す様）

[105] mixiユーザー 07月20日 17:35

通りすがりですが……

フレームは検索エンジンと相性が悪いですし、HTML5から廃止になる要素ですので最近は余程特別な事情がない限りもうほとんど使われていません。ということも少し頭の片隅に入れておくといいかもしれません。

[106] mixiユーザー 07月20日 21:02

>>れのあさん
さっそく試してみたらうまくいきました
非常にわかりやすい解説ありがとうございます！
助かります！（＾＾


>>にゃんこ@さん
そうなんですね、初めて知りました
折角覚えたのになんだか切ない（笑”

[107] mixiユーザー 07月20日 23:10

＞悠久アルファ-300さん

この世界の流行り廃りの速さったらもう、ほんとに泣けてきます(；´Д｀)
フレームにはフレームの良さがあるので、全否定はしませんけど
最近の流行りのサイト構造ではないのは確かです〜。
XHTML+CSSでの制作が主流になり始めた頃からフレームも廃れてしまったので
もうかれこれ10年くらいになりますか。。。

とはいえフレーム構成で作られたWebサイトが表示できなくなるわけではないので
その辺はあまり気にしなくてもいいかもです（笑）

[110] mixiユーザー 07月22日 13:54

xmlの外部ＥＮＴＩＴＹについて教えてください。

http://www6.airnet.ne.jp/manyo/xml/classics/step12.html
上記ウェブサイトからのリンクで

外部エンティティ参照のサンプル: ext_sample.xml

というのがあり、本来であれば外部エンティティも表示されるはずなのですが
私のＰＣでは、画像のように、外部エンティティは表示されません。

様々なサンプルを見ても外部エンティティが参照されないので
私のＰＣ設定に足りないものがあると思うのですが、それが何かわかりません。
どうかよろしくおねがいします。

[111] mixiユーザー 07月22日 18:33

＞あばらさん

xmlのことはわかりませんが、上記参考サイトの外部Entityサンプルは、IE6〜8しか表示できません。Safari、Chrome、FireFoxいずれも表示不可。ついでにIE9でも表示不可です。
PC設定がどうこうというより、ブラウザ依存の問題なのではないでしょうか？

[112] mixiユーザー 07月22日 23:35

>にゃんこ@さん

ありがとうございます。　ブラウザ依存ではしかたありませんね（汗

[113] mixiユーザー 11月08日 12:12

はじめまして。質問お願いします。ホームページの商品名や内容量などの部分にもっと詳しく詳細を載せたいのですが、修正するやり方を教えて下さい。宜しくお願いします。

[115] mixiユーザー 12月20日 22:03

日本語でおｋ

>>113
HTMLを編集する

>>114
Devasなどの置換ソフトを使う

[116] mixiユーザー 12月20日 22:10

＞１１４

InDesignのようなパブリッシングソフトで、マスターページを作り、そこにindexへ戻るボタンを１つ用意すれば、同じマスターページを使ったページすべてにそのボタンが現れます。

パブリッシングソフトは、本来、印刷物としての書物のレイアウトをするものですが、最近はインタラクティブコンテンツの作成にも対応しており、大変重宝します。

[119] mixiユーザー 12月23日 04:03

＞118 ひまじんさん

Word からPDFに書き出しできませんか？
　PDFのままアップすればそれで公開できます。

[120] mixiユーザー 12月23日 09:24

突然の質問失礼します。かなり古いソフトのですが、ホームページビルダー15というソフトでホームページを作成しているのですが、スマホで私のページにアクセスするとページがＰＣ用に作成したので文字が小さく見にくい状態にあります。　スマホでヤフーなんかにアクセスすると自動的にスマホ専用ページになりますが、そんな感じでＰＣでアクセスする通常の作成したＨＰとして表示され、スマホや携帯でアクセスすると自動的にそのページに切り替わる・・・そんなことはホームページビルダー15ではできるのでしょうか？

[122] mixiユーザー 12月25日 07:43

＞ひまじんさん
＞ホームページビルダー１５の新規白紙画面に、WORDのテキスト・画像を一気に＜すべて選択ーコピー＞し、ホームページビルダー１５の新規白紙画面に＜ペースト＞しました。
プレヴュー画面でチェックすると、きちんと、画像も載っていたのですが、サーバーに転送すると、まったく画像が出てきません。

　私は「ホームページビルダー」というソフトを使ったことがないのですが、最初にWORDから画像ごと全選択＞コピー＆ペーストした結果生成されるソースで画像部分はどうなっていますか？

　通常、HTMLで画像を表示するということは、画像のあるURLを参照して、そこから読み込むのですが、ということは、サーバーに転送したとき、HTMLだけでなく、画像そのものもフォルダごとアップされている必要があります。画像はサーバーにアップしたのでしょうか？

[123] mixiユーザー 12月25日 08:20

＞ひまじんさん

　ホームページビルダーがどういうソフトなのか知りませんが、自分の Dreamweaverで簡単な実験をしてみました。

１、Word で画像入りテキストを作る。
２、それを全選択して、Dreamweaverのプレビューにペースト。
３、結果として生成されたソースを HTML で書き出す。

<html>
<head>
<title>TEST</title>
</head>

<body>
<p><img src="test_clip_image001.gif" alt="test" width="303" height="78"></p>
<p>test</p>
</body>
</html>


添付画像の左部分がソースで、右部分がプレビューです。

こうしてできた HTMLファイルをローカル（自分のコンピュータ上）でダブルクリックするとブラウザが立ち上がり、プレビュー通りの結果が表示されます。

しかし、そのHTMLをそのままサーバにアップし、そのURLにアクセスしても画像は当然のことながら表示されません。なぜなら上のソースで「画像がある場所」として自動的に指定されたURLがサーバ上には存在しないからです。

HTMLをアップしたのと同じフォルダに「test_clip_image001.gif」という画像ファイルもアップしないと表示されません。

　このあたり、確認されていますか？
　Wordからコピー＆ペーストした結果、「ホームページビルダ」が生成したHTMLソースで、画像部分はどうなっているのでしょうか？

[124] mixiユーザー 12月25日 09:01

>>[120]

ビルダーでどうこうって訳じゃありません。　.htaccess　と言うものでパソコンからサイトを見ているのか携帯から見ているのかスマートフォンからなのかって言うのを判断できる方法があります。
ビルダーはあくまでもHTMLがわからなくてもホームページが作れるソフトですので、お間違い無く。そしてこれを利用するにはサーバーの関係もあるのでお調べ下さい。

[125] mixiユーザー 12月27日 12:59

真修羅様、
アドバイスありがとうございます。.htaccessについていろいろ調べました。私の使用しているサーバーのロリポップでは使用できるようです。　ただ気になっているのは.htaccessを使用して私のサイトを見た場合、デザイン的にはどのような形になるのか興味があります。ビルダー上で少しＨＴＭＬをいじる程度で.htaccessを使用できるような感じもしますがデザインは自動的にＰＣで見ようなデザインを継承した感じでスマホでも見やすく表示されるのでしょうか？

[126] mixiユーザー 12月28日 15:32

>>[125]
.htaccessとデザインは関係ありませんね。
デザインはこまめに確認しながら修正していくしかないんじゃないかなぁと思います。ガラケーとスマホでデザインは苦労すると思いますが、頑張って下さい。

[128] mixiユーザー 02月13日 00:17

　はじめまして、先ほどコミュに参加したばかりのWakkenともうします。よろしくお願いします。
　いきなりですが、質問させて下さい。なお、同種の質問を他のサイトでもしていますが、ご了承願います。私の場合、ＨＰ作成用のソフトは使わず、すべてhtmlとjavascriptで記述しています。

【質問１】
　ある団体のＨＰ係を仰せつかりました。独学で勉強しながらパソコン用のＨＰを作っています。ようやく７割方完成したのですが、スマホではない携帯でも見られるようにしてくれと要求されています。
　ＨＰは三つのフレームから構成されており、画面の上に横長のフレーム１、下の広い部分の左端に、縦長のフレーム２、残りの右下の広い部分がフレーム３です。フレーム２に１０個程度の選択ボタンがあり、選択されたページがフレーム３に表示されるようになっています。それぞれのページは、かなりコンテンツが多く、パソコンでないと表示は困難です（ＢＢＳだけは携帯専用のＣＧＩもありますが）。
　ですので、このままですと、普通の携帯では非常にいびつな表示になってしまいます。
　そこで、最初のページの左上に「携帯入口」というボタンを設け、それを押したら携帯用のページに移動するようにしました。携帯用のページには、ＢＢＳを含めて四つのボタンがあり、そのボタンを押すとＢＢＳとパソコン用のページ三つのみが表示できるようにしました。もちろん、選ばれた三つは、比較的表示量が少なく、かつまた参照頻度の高いページです。
　しかし、ＢＢＳ以外は、もともとパソコン用に作られているので、横方向の表示幅が圧倒的に不足しています。テキストデータだけの場合はまだ良いですが、テーブルを使ったページなどでは悲惨な状態です。
　そこで、携帯用のページからボタンを押して表示する場合だけ、表示のタテとヨコを入れ替えるなんてことができないでしょうか？

【質問２】
　上記の「携帯入口」というボタンを押したとき、パソコン上では、フレームを飛び出し、全画面の新たなページが表示されます（リンクに「target="_blank"」と書いてあるので）。
　ところが、携帯でそれをやると、別画面、あるいは新画面が開かず、それまでの小さいフレーム１の中だけで表示されるのです。これでは、質問１以前に、さらに表示面積が狭くなり、まったくページが見られないほどになってしまいます。
　どうしてこうなるのでしょうか？　また、どうすれば、携帯の場合でも、全画面に表示されるように出来るのでしょうか？

　よろしくお願いします。

[129] mixiユーザー 06月16日 21:44

【イラストデザイン募集】

はじめまして！
koukiと申します♪

自分は音楽アーティストやっておりまして、ブログ、ホームページやフライヤーのデザインを手作りでやっております。

ですが、最近手作りに限界を感じており
やはりこういうものは好きな方、専門の方にお願いしたいと思い、コメントさせて頂きました。

デザイナーやイラストレーター、趣味の方でもやって頂ける方を探しております。

現在、自主製作ですが、Mr.Childrenの小林武史氏と同期プロデューサー安岡孝章氏と
GLAYのドラムス永井利光氏の一番弟子、市川氏と楽曲製作中〜
そちらのCDジャケットの方も考えおります。

ご興味持たれた方は気軽にメッセ待ってま〜す (^-^)/

ブログ　http://ameblo.jp/gooll/

ログインすると、残り97件のコメントが見れるよ

前

mixiユーザー
ログインしてコメントしよう！

教えて！ホームページ作成Q&A 更新情報

教えて！ホームページ作成Q&Aのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

教えて！ホームページ作成Q&A

人気コミュニティランキング

困ったときには

関連ワード

mixiで趣味の話をしよう
新規登録（無料）

このページの上部へ