1read 100read
2011年11月2期Web制作22: Webサイト制作初心者用質問スレ part226 (887) TOP カテ一覧 スレ一覧 2ch元 削除依頼

Webサイト制作初心者用質問スレ part226


1 :11/10/06 〜 最終レス :11/11/25
初心者だろうが誰だろうが、
まず >>>■ 検索してから ■<<< 質問すること
ネタ・煽り・自演・荒らしは完全放置
【質問時の注意】
  1. 質問する前に >>2-4 にも目を通すこと
  2. メール欄に何も入れないことを推奨 (IDを出して騙りを防止するため)
  3. 質問者が返信する際は「最初に質問したレス番号」を名前欄に入れること
  4. 携帯サイトについては携帯専用スレで質問すること
  5. ブログについてはブログ板で質問すること
     ●ブログ板 http://pc11.2ch.net/blog/
  6. SEO、アドセンス、検索サイトに登録しても検索結果に引っかからないといったことは SEO関連スレで質問すること
     http://find.2ch.net/?STR=seo&TYPE=TITLE
  7. アクセス解析については該当スレで質問すること
     http://find.2ch.net/?STR=%A5%A2%A5%AF%A5%BB%A5%B9%B2%F2%C0%CF&TYPE=TITLE
  8. 製作ソフト(Dreamweaver DW、ホームページビルダー、等)を使用した場合の質問は該当スレで質問すること
  9. CGI、PHP, Perl, Ruby 等のプログラミング関連や CMS, Wiki は Webprog板、またはこの板の該当スレで質問すること
     ●WEBプログラミング板 http://pc11.2ch.net/php/
 10. JavaScript はこの板の該当スレで質問すること
 11. 画像作成ソフト(Photoshop 、Illustrator、等)については該当スレで質問すること
 12. Flash ついては Flash板で質問すること
     ●FLASH・動画板 http://pc11.2ch.net/swf/
 13. xHTML, CSS, CGI, 制作ソフトなどのどんな本を買えばいい?といったことは書籍についての質問スレで質問すること
     http://find.2ch.net/?STR=%CC%F2%A4%CB%CE%A9%A4%C4%BD%F1%C0%D2%A4%CF&TYPE=TITLE
 14. 質問内容を吟味して、正しい日本語で第三者が読んでも分かるように質問を書くこと
 15. 間違った回答をする人もいることに注意
【前スレ】
Webサイト制作初心者用質問スレ part225
http://hibari.2ch.net/test/read.cgi/hp/1308415898/

2 :
■HTML・CSSについて
・ごく簡単なHTMLの説明
  http://www.kanzaki.com/docs/htminfo
・PC Tips
  http://members.jcom.home.ne.jp/pctips/
・脱初心者をめざす人のためのホームページ作成講座
  http://az-store.nrym.org/archive/mynotes/lecture/
■文法チェッカー
・Another HTML-lint
  http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
・The W3C Markup Validation Service
  http://validator.w3.org/
・CSS検証サービス
  http://jigsaw.w3.org/css-validator/
※ このスレは Strict についての議論を対象としません

3 :
■散々既出な質問
Q1. アップロードしたファイルが表示されません
A1. ・ブラウザのキャッシュを削除してから再度確認すること
   ・ファイルがアップロードされているか、ファイルのパス(絶対パス?相対パス?)があっているか確認すること
   ・画像などのコンテンツなら、xHTMLソースで指定したファイル名と拡張子の大文字・小文字の一致を確認すること
   ・画像であれば「バイナリモード」で転送されたか確認し、そうでなければテキストモードに設定を変えること
Q2. ホームページを作成しようと思いソフトウェアの購入を検討しています。おすすめのソフトは何でしょうか?
A2. 体験版があればそれを使用することを勧めます
   個人で好みが違うので、一概に「これ」が良いと推奨することはできません
   あなたが購入を検討している物を天秤にかけ、自分がしたい事が実現できるような物を購入すれば OK です
Q3. 「http://www.〜.com/」で○○したときのような効果を出すには、どうしたらいいのでしょうか
A3. ソースを見て理解する努力を惜しまないことがあなたを救います
   初心者だからといってソースを理解する努力をおしめば、期待する効果を実現することは難しいでしょう
Q4. あるURLにアクセスしたとき、携帯とPCで表示するページを変えたいのですが
A4. 「携帯 振り分け」などのキーワードで検索してください
Q5. 正しく書いたつもりなのですが、うまく表示されません
A5. 油断は禁物です
   HTML の文法を専用サイトでチェックしてみましょう
   http://openlab.jp/k16/htmllint/htmllint.html

4 :
次スレは>>980よろ
テンプレここまで

5 :
おつ

6 :
文章と画像の位置をpixel固定するとFirefoxとInternetExplorerと
見え方が…表示位置が違うのですけど普通ですか?
Firefoxの方が表示位置指定より25pixelくらいずれてるんですけど
画像と文章ともに上から100pixelにしても位置揃わないです
よろしければ教えてください

7 :
普通です

8 :
ではFirefoxは指定通りに表示しない仕様となってるわけですね?

9 :
ドッチが正しい解釈なのかは知らない

10 :
普通揃うと思うが
CSS書きミスってるかなんかだと思うよ

11 :
BODY {background-image: url("画像");
background-repeat: no-repeat;
background-position: 10px 10px}
↑だとfoxでもIEでも画像位置は正常
<div style="position:absolute;top:25px;left:50px;">
<p>文章</p></div>
↑だとfoxでは文章位置ズレてIEだと正常なんですが

12 :
スクロールバーでてない?

13 :
p要素のブラウザ間のデフォルトスタイルの違いでは?p要素のmarginとpaddingに0を指定してみては

14 :
適当に文章打ってやって見たけどそのソースだと違いは出なかったよ
どこか他のところのmarginかpaddingかなんかじゃない?

15 :
出てないです…
IEは表示が指示通りですが
foxは文章と画像に文章一列分のズレがあります
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>タイトル</title>
</head>
<body>
<div style="position:absolute;top:25px;left:250px;">
<p>文章</p></div>
<div style="position:absolute;top:100px;left:500px;">
<p>文章</p><p>文章</p><p>文章</p><p>文章</p></div>
<style type="text/css">

16 :
<!--
BODY {background-image: url("画像");
background-repeat: no-repeat;
background-position: 100px 100px}
-->
</style>
</body>
</html>
この入力の時点でfoxだとIEに比べて文章のみ一列ズレます

17 :
そもそもこのケースって「画像」は別に関係ないよね
画像の位置はどっちも期待通りなんでしょ?
必要な情報を出さずいらん情報を入れてくる・・・
p要素にmargin:0;padding0;を指定すると結果はどうなの
style要素内に
p{margin:0;padding0}
を追加してみて

18 :
ごめん訂正
×p{margin:0;padding0}
○p{margin:0;padding:0}

19 :
とりあえずbodyの中にstyleは書けないから場所変えようか

20 :
そろいそうです。どうもありがとうございました。
最後にさっきは文章がFoxとIE共に全文章一列空きでしたが
今回ので一列空きが全て消えました
さっきの原因はfoxは一列目にも勝手に一列上に空きが入り
IEは一列目の上には一列空きが入らず二列目から文章の間に一列空きが入りました
こういうのがfoxやIEのブラウザ間の違いという現象でしょうか?
すごい初心者で申し訳ないです
アドバイス感謝します

21 :
一行目の上の空白は消えてほしいけど行と行の間はあいていてほしいなら
margin:0;をmargin-top:0;でいけると思う試してないけど

22 :
解決したのなら何より
marginとpaddingはレンダリングする要素なら全部関係あるから早めに覚えた方が良いよ

23 :
DW一本から打ち込みを勉強してます。
>>22
はい。覚えるようにします。

24 :
リストとマーカーの間隔を任意に変えるにはどうしたらいいですか?
marker-offsetってのがあるみたいですが、これは廃止されたようなので
別の方法でお願いします

25 :
スタイルシート

26 :
http://oshiete.goo.ne.jp/qa/7048607.html
↑のNo.3No.2にある様にフレームやテーブルは多くの人が見るサイトには
本当は良くないのでしょうか?一般には使わないのでしょうか?
知り合いのイラストレーターのサイトを作るのですが
少し画面が小さい人のことも考えて作るのが常識なのでしょうか?
画面はどれぐらいのサイズに向けて作れば…?
またその場合フレームやテーブルを使わないなら何を勉強すればいいですか?
こういったサイト作りの常識がわかりません…

27 :
>>25
わからんのならレスするなよ

28 :
>>26
テーブルじゃないものにテーブルを使うのが駄目
フレームはロケーションバーが機能しなくなるから不便

29 :
>>26
知り合いのお遊びサイト作るだけなら、好きすりゃいいよ

30 :
>>29
いえ、遊びとかではないです
ちゃんとした人のです
>>28
では一般のテーブル使ってるサイトの様なものなら使って良いのですね
どうもありがとうございました

31 :
>>30
>一般のテーブル使ってるサイトの様なもの
意味不明な解釈するなよ
CSSを学びなさい

32 :
>>27
わかるならちゃんとレスしろよ

33 :
>>24
paddingじゃダメなの?

34 :
テーブルレイアウトの是非については、もし可能ならCSSで
やったほうがいいという事でテーブルの方がやりやすいと
思えばテーブルでやればいい。
これ以上は変な人が「けしからん」みたいな事いい始めるので
深入りしない。

35 :
>>32
マーカーの位置調節のしかたはわからんよ
でもお前がわからないってことはわかるからそこにはちゃんとレスした

36 :
>>24
画像にしちゃえばいいじゃん

37 :
けしからん

38 :
table厨 vs div厨 vs section厨 vs 標準厨

39 :
別にどれでも構わんし
だがレイアウトにテーブル使っていいのか?って聞かれたら
オススメはしないよってだけだ

40 :
テーブルレイアウトの是非についてはこのスレではとりあげないって
以前にテンプレにあったような。

41 :
<input type="text" id="hoge" value="" onchange="alert('hoge');">
<input type="button" value="aaa" onclick="document.getElementById('hoge').value='zzz';">
aaaボタンをクリックしたときにalert('hoge');が
実行されるにはどうしたらいいでしょうか?

42 :
<input type="text" id="hoge" value="" onchange="alert('hoge');">
<input type="button" value="aaa" onclick="document.getElementById('hoge').value='zzz';document.getElementById('hoge').onchange()">

43 :
やはりテキストボックス側のイベントで取得は不可能ですか

44 :
礼もなく後出しの条件で「やはり」

45 :
いや、普通わかるだろ

46 :
テキスト側の別のイベントを見る方法(IE限定)や定期チェックする方法もたぶん
やはりその程度ですかフフン
と言われる

47 :
IE限定のイベント教えて!
あとポーリングはイラネ

48 :
さらに答えてくれる人が居てくれたんですね。
>>34
>>39
理解しました。どうもありがとうございます。
CSSでやってみます。
あとあと43は自分とは別の方です

49 :
パンくずリストについてききたいのですがHTMLの記述はこれです。
<ul class="topicpath">
<li><a href=" /index.html"><img src="../common/images/homeicon.gif" alt="ホーム" width="14" height="12" border="0" />HOME</a></li>
<li><img src="../common/images/arrow.gif" alt="アロー" width="9" height="12" border="0" /></li>
<li>商品情報</li>
</ul><!-- /topicpath -->
これに対してCSSでパンくずリストの形をつくりたいのですがCSSの記述を教えて下さい。(横並びさせてアイコン画像とテキストの大きさそろえるとか)
ちなみにDreamweaverCS3使ってやっています。
よろしくお願い致します。

50 :
<style>.topicpath li{display:inline}</style>
でいんじゃねすか

51 :
HTMLやCSSの内容の質問でなくて恐縮なのですが、一つ教えてください。
皆さんはサイトのソースファイルをどのように管理されていますか?
サーバー上のディレクトリと同じ構成のフォルダを作っておいていたのですが、
大規模に修正を行うときなどにかなり効率が悪いと感じました。
ローカルからサーバー上へ移動するときのリンクの修正などもかなり行いにくかったです。
定番の管理ソフトのようなものがあるのでしょうか?

52 :
>>51
リンクは相対アドレスで書けばいいんでない?
あと表示確認のためにApache入れとくといいよ
サーバ側と極力環境を合わせてやれば、無駄な修正は減らせるから

53 :
>>52
リンクの相対パスは
<base href="http://〜〜〜">
のタグを使ってて、ローカルではhttpではなくfileで作ってるから
アップロード時に修正漏れが何度も発生してるんですよ・・・
僕が確認し忘れるせいなのですが。
Apachを入れるとこのようなことも防げるのですか?

54 :
↑を見て、15年前の自分を思い出した。
何事につけても初心忘れるべからず、だな…

55 :
本とか読んで勉強しないタイプだな
いきあたりばったり
だから基本がなってない。

56 :
>>55
htmlのタグやスタイルシートについてと最初の開設までについては本で勉強したのですが、
ソース管理のお勧めの方法が記載されてる本が見つかりませんでした。
どの本も開設するところまでで、
サイトを継続して更新していく方法を記した本がなくて。

57 :
>>53
そんな化石みたいな要素なんか使うのやめようや
だから進歩がないんだよ

58 :
ローカルでも相対リンクでbase使わないでやれば良いだけじゃ

59 :
HTMLタグ 絶対パスと相対パス
http://masaboo.cside.com/new_html1/ht_67.htm

60 :
ホームページの内容はそっくりそのままコピーされているサイトを発見したのですが
こんな時ってどのように対処したらいいのでしょうか?
とりあえず
googleへの通報
https://www.google.com/webmasters/tools/spamreportform?hl=ja
相手のサイトはwikiでしたので、IPドメインSEARCHで調べたら
Referral URL: http://www.onamae.comと表示されたので
お名前.comだと思うのでそこにも通報しようと思っています
他に何かやっておくことはありますでしょうか?

61 :
>>60
著作権云々のトコロに訴えれば?
グーグルへ通報しようが管理している所へ通報しようが関係ないでしょ
特にグーグルに通報したって何もしてくれないよ

62 :
googleに言うのは当たり前だろw
検索から削除してくれるし、ブラックリスト登録だろうから全体がアボン

63 :
>>62
でも根本的な解決にはなってないだろ
八分の影響は凄いと思うけど

64 :
すごいなんてもんじゃないと思うぞ
検索サイトに載らないなんて、よっぽどの大手でも終わるだろうし
人がこなければ潰すしかないわけで、しかも金払ってドメイン使ってるんだから
やめるしかない

65 :
googleに検索されないサイトは存在しないのと同じだよなぁ

66 :
>>60
魚拓は取った方がいい
あとはhttp://www.aguse.jp/で調べるべきだな

67 :
Dreamweaverでテンプレート機能使ってる人ってどれくらいいんの?
使ってない人は一括更新とかどうやってんの?

68 :
普通はSSIとかサーバーサイドスクリプトとかでやるもんじゃね
フレームワーク使うとか

69 :
縦書きの、横スクロールのブログを作りたいんだけど、どうやったらできますか?

70 :
CSSのWriting Modesモジュール使えば良いけど、まだ草案だからお預けね

71 :
>>67
XML か YAML

72 :
web製作コースのある職業訓練校にいこうと思うのですが、何を基準に選べばいいのでしょうか?

73 :
ビルダー習ってどうすんのよ

74 :
自分が昔作ったサイトって、アクセスもなかったらほうっておいても検索からはずれますか?サイトを消したいのですが、制作ソフトをアンインストールしてしまってサイトのアドレスもわかりません。教えて下さい。よろしくお願いします。

75 :
検索できるようになるから誰かがアクセスするわけで
アクセスがないから検索はずすって順番がおかしいだろう
数年前に更新途絶えたようなサイトがいまだに引っかかることも普通にあるし
サイトが存在する以上はずっと残ってんじゃないの

76 :
>>71
すまん詳しく教えてくれ
ググったがゆくわからん

77 :
>>76
わからん人のためにあるのが Dreamweaver ってことだろ

78 :
webサイトを作成しています。
私のサイトの掲示板に書き込みを行ったときにfacebookで書き込んだユーザのウォールに
同じ内容を書き込みを行いたいのですが、簡単に実装できるプラグインはないでしょうか?
Twitterのツィートと同じようなことです。

79 :
掲示板システムなんて自作含めたら無数にあるのに
どんなシステムでも使えるプラグインなんて存在するわけがない

80 :
>>79
説明足らずですいません。
Twitterの"素材"のツィートするボタンのような物が欲しかったです。
http://developers.facebook.com/docs/reference/plugins/like-box/
でプラグイン見てみましたけど、該当しそうなのは無かったです。

81 :
オッス、質問です!
iPadやiPhoneにWebサイト上のmp3ファイルを再生させたい場合のスマートな記述方法は何なんでしょうか?
現状では自作のFlash製のmp3プレイヤーと、
JavaScriptやFlash非対応の場合には単なるファイルのリンクを出力してるので
一応どんな端末でも再生は出来るんですが、
そろそろiPadとiPhone向けにイカしたのを作りたいです!(><)

82 :
メモ帳に手打ちが一番。

83 :
質問ですがidやclassの前につける
div,spanなどにはどのような違いがあるのですか?

84 :
>>83
その二つに限定するならコンテンツモデルが違う

85 :
大きい表をテーブルで作ってしまい、画面におさまりきらず閲覧者の方が見にくい場合があるので
なんとか画面内に収めたいんですが、閲覧者の画面の大きさに合わせて表が可変するような
そういうスタイルダグはないものでしょうか…?

86 :
自己解決しました

87 :
http://www.higashihonganji.or.jp/special/#/about/life
こういうのをフラッシュじゃなく、HTMLで作りたいんだけど、どうしたらいいですか?
とりあえず縦書きHTMLってのがあるのはわかったのですが、横スクロールのレイアウトとかって
どうやったらできるんでしょう?
できればそういうテンプレートを提供してくれるサイトがあればうれしいですが

88 :
>>87
別に横書きでいいだろ。

89 :
アクセス解析スレで聞いたのですが、解答がなかったのでここで聞かせてください
Google Analyticsで外部リンクへのクリック数をカウントする方法がわからなく困っています。
■トラックコード
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-********-*']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-ytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
で、リンクに記述しているのが
<a href="http://aiueo.com/" onClick="javascript:_gaq.push('/link/aiueo');">
あいうえお</a>
<a href="http://12345.com/" onClick="_gaq.push(['_trackPageview','/link/12345');">
<img src="12345.jpg" alt="12345" border="0"></a>
<a href="http://test.com/" onClick="javascript: pageTracker._trackPageview('/link/test.com');">
<img src="http://test.jpg" alt="テスト" border="0"></a>
などあらゆる方法を試してみたのですが、どれもカウントしません。クリックは間違いなくされています。
何が原因なのでしょうか?宜しくお願いします。

90 :
>>88
黙れksぶちすぞ
>>87誰か教えてください、いろんなとこで聞いて、ここでだめならどうしようもありません

91 :
>>90
二重人格乙w

92 :
>>90
横書きにしとけ

93 :
縦書きにしたいから聞いてんだろうが
頭大丈夫か?

94 :
恐い恐い

95 :
Googleサイト関連スレってないですかね?(またはそれに近いスレ)
Apps Scriptとかそういうのを使い方
基本JSなんですが微妙に違っていて、CSSも使えなかったりと
GoogleサイトでWebを作っている人が集まっている人がいるスレがあるならと

96 :
画像とCSSで良いのかな…
 素人意見だから正否はしらん。

97 :
ホームページビルダーに付属されてた、ウェブアートデザイナーのような無料のソフトってある?
あったら教えてクレクレ

98 :
>>89
誘導しようと思ったらマルチのカスだった
>>95
Google の API なんてバカでもわかるように親切な解説が公式にあるだろ
あれでわからなきゃ諦めとけ

99 :
>>93
既出>>69-70

100read 1read
1read 100read
TOP カテ一覧 スレ一覧 2ch元 削除依頼