マーベル映画シリーズの伝説の始まり『アイアンマン』を紐解く! >>

htmlでホームページを作りたいのですが、最初から自分ですべて作り上げるのは無理だと思ったので、あるHPを参考に作ることにしました。
そこで、「そのHPのソースを表示する→それをコピーして貼り付ける→貼り付けたソースをいじって自分のHPにする。」
という手順で作ろうと思ったのですが、ソースからコピーしたものを自分のHP上で表示しても、そのHP通りになりません。
詳しく言うと、文字などはそれ通りになっているものの、枠や線などといったHPを形作っている部分が表示されないのです。
なぜでしょうか。解決方法をご存知の方がいらっしゃいましたら教えて下さい!

それと、上記のようなHPの作り方をして問題ないでしょうか。
内容や写真などは全く別のものにしますし、テンプレートとして使用するつもりもございません(あくまで参考にしたいだけなのですが…)。

このQ&Aに関連する最新のQ&A

A 回答 (7件)

使ったことが無いので出来るかわかりませんが、TeraPadで変換できるそうです。


設定箇所は下記のページを参考にShift-JISで保存するように設定してください。
http://www.mlab.im.dendai.ac.jp/~yamada/web/tool …
    • good
    • 1

mamegoma3です。


それは文字コードが違うからです。
下記に出ていますので参考にしてみてください。
http://oshiete1.goo.ne.jp/qa22367.html
    • good
    • 1
この回答へのお礼

確かにスタイルシートの方の文字コードが違うようです!
ですが「Shift-JISで再度読み取り」という動作をしても、文字コードはUTF-8(N)のままです。
なぜ変わってくれないのでしょう…。

お礼日時:2009/03/21 13:38

>提示してもらったHPで検査をしようとしたのですが、対象のHPのアドレスに漢字が入っていて、検査できないようでした・・・。


 URLに日本語は含められないです。
 ですので、その場合のURLは、実際にはURLエンコードされているはずですから、URL欄をクリックして選択状態にして、それを貼り付ければ、URLエンコードされたURLがでてくるはず。もしうまく行かなければ、ブラウザを変えてみてください。
    • good
    • 0
この回答へのお礼

ありがとうございます!
それでできました^^

お礼日時:2009/03/21 10:18

mamegoma3です。


そのソースのURLが、たとえばhttp://www/xxx.xx/xx.htmlならhttp://www/xxx.xx/style.cssをURLに打ち込めばソースが表示されると思います。これをコピーしてstyle.cssでファイルを保存してください。xx.htmlとstyle.cssを同じフォルダ(階層)に入れれば同じレイアウトで見られるとおもいます。
    • good
    • 0
この回答へのお礼

ありがとうございます!
その方法でソースがわかりました。

それから何度もすいません。
スタイルシートを一緒に保存したところ文字化けしてしまいます。
保存する場所が悪いのでしょうか。

お礼日時:2009/03/21 10:12

 原因はページのプレゼンテーションがスタイルシートで行われているためでしょう。


 サイト自体をファイルメニューから(完全)保存して見ないとだめですね。

 確かに優れたサイトを見て、その書き方を学ぶのはとても役立ちますが、あまり現実的でもありません。
・内容が異なるためそのまま流用できない
・文章・画像等が多い場合、それを書き換えるのが大変
・見栄えはよくても、正しいものではない。
 ---W3Cの勧告にあっていない、言い換えればWEB標準でないものが大多数

 そのためには、まず、そのサイトを下記検証システムでチェックしてみること
HTMLのチェック
The W3C Markup Validation Service ( http://validator.w3.org/ )
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
CSSのチェック
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/ )
 また、ブラウザがFirefox( http://mozilla.jp/firefox/ )なら、拡張機能(アドオン)のJSView ( https://addons.mozilla.jp/firefox/details/2076 ),Mozilla Japan - Firefox 用アドオン - Html Validator ( https://addons.mozilla.jp/firefox/details/249 )、Firebug ( https://addons.mozilla.jp/firefox/details/1843 )などでの評価も出来ます。

 すくなくとも、これらで好評かなものでないと、害にはなっても役には立たないでしょう。

 それよりも、ネット上に色々あるテンプレートを使うほうがよいでしょう。
たとえば
現実的な記述の為の XHTML1.1 入門 ― MAYAH.JP ( http://mayah.jp/article/2002/xhtmlintro )
 →HTML 文書作成例 ( http://mayah.jp/article/2002/strict )
  →完成品 ( http://mayah.jp/resources/2008/09/dhiblihtml.txt )
とか、
    • good
    • 0
この回答へのお礼

ご返答ありがとうございます!

提示してもらったHPで検査をしようとしたのですが、対象のHPのアドレスに漢字が入っていて、検査できないようでした・・・。
アドレスに日本語を入れることって問題ないのでしょうか…?

お礼日時:2009/03/20 12:30

文字が表示されて、レイアウトや文字の大きさなどが違うのでしたらスタイルシートが使われています。


ソースの上のほうに
<link href="common.css" rel="stylesheet" type="text/css">
みたいな表記があれば、http://www/xxx.xx/common.css の内容もコピーしてないと正しく表示されません。
<link href="css/common.css" rel="stylesheet" type="text/css">
のように別の階層にある場合には、cssというフォルダを別につくり、そこにcommon.cssというファイル名でソースを貼り付けてください。

まったく同じものをアップしないで、参考にして自分なりに変更してホームページを作るのは問題ないと思いますよ。
    • good
    • 0
この回答へのお礼

ご返答ありがとうございます!

ソースを見たら<head></head>間に
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
と使われていました。

この場合、私のパソコンにはスタイルシートのファイルが無いわけですから、参考にしたいHPのようには出来上がらないということですよね。
ということは、どうやら私が参考にしたかった部分というのはスタイルシートの部分だったようです。
例のソースからスタイルシートの部分の作り(?)は見ることができないのでしょうか?できないのであれば、それに似たスタイルシートのテンプレートを探せばいいわけですよね。

お礼日時:2009/03/20 12:18

スタイルシートを利用している可能性が有ります。


スタイルシートが外部ファイルの場合、単にコピーだけでは入手出来ません。

ホームページの制作に関しては、他の人ソースを参考にして制作するのは良いと思いますが、是非ともオリジナルのホームページに進化させてください。
    • good
    • 0
この回答へのお礼

ご返答ありがとうございます!
スタイルシートというものがあるんですね。
知識不足でした…。スタイルシートの方ももうちょっと勉強する必要がありそうです。
>他の人のソースを参考にして制作するのは良い
安心しました^^

お礼日時:2009/03/20 11:52

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHTMLのソースをワードパッドで開くと文字化けするのは?

Windowsの話ですが、HTMLのソースを見ようとするとまずメモ帳で開こうとし、大きすぎる場合はワードパッドで開きますか?というメッセージが出て、その様にすると必ず文字化けしています。タグの部分は大丈夫な様ですが、
原因の解説と対策をご教示願えないでしょうか?

Aベストアンサー

Webで使われているソースの日本語文字コードは主に“shift-jis”と“euc-jp”の2つがあります。一方、Windowsはシステムの文字コードはshift-jisしか使われていません。
もしもHTMLのソースがeuc-jpであった場合、メモ帳もワードパッドも文字コードの変換機能を持っていないので文字が化けます。
ちなみに、フリーソフトの中にも各種文字コードが使えるエディターがありますので、気に入ったものを見つけて、また、IEや、Windows自体がメモ帳以外のエディタをデフォルトに設定するフリーソフトもありますので、そちらも気に入ったものを使うように設定するとshift-jis以外の文字コードも扱えるようになって便利です。

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

QHTMLのソースをエクセルに貼り付ける方法

HTMLのソースを、そのまま(メモ帳表示データのまま)Excelに貼り付ける方法はありますか。

メモ帳でソースの表示をして、全て選択→コピー→Excelに型式を選択して貼り付け→テキスト
で貼り付けてみましたが、変なフォーマットで表示されます。
セルの書式を文字列にしても同じです。

目的はExcelの文字列操作で特定の文字だけ拾い出して加工しようと考えています。
OS:Win95、Excel2000です。

Aベストアンサー

再び登場です。
ソースを表示させたメモ帳をとりあえず一度名前を付けて保存して下さい。
そしてExcelのデータメニューから外部データの取り込み、テキストファイルのインポートをクリック。
後は必要に応じて取り込み方を選びます。
これでどうでしょうか?

QGoogle Chromeでソースコードを表示したい

こちらにGoogle Chromeでソースコードを見る方法が紹介されています。
https://support.google.com/consumersurveys/answer/6172725?hl=ja

でも、「1.ブラウザのツールバーにあるメニュー アイコン Chrome menu をクリックします。」をして表示されるプルダウンメニューには「ツール」がありません。

Ctrl+U(Windows)をすると、これはちゃんとソースコードが表示されます。

「1.ブラウザのツールバーにあるメニュー アイコン Chrome menu をクリックします。」で「ツール」を表示するにはどうすればいいでしょうか。

Aベストアンサー

ソース表示は、右クリック「ページのソース表示」
デベロッパーツールは、#1さんの方法か、F12キー(Windows)


シークレットモードでも表示されるけど、表示できない仕様のサイトもあると思う。
全てのサイトで表示できませんか?
この質問ページは表示されるよ。
︙ 点々マークから色々設定してみてください。

Q白い部分を透明にすることは可能ですか?

ペイントで白い部分を透明にすることは可能ですか?
やり方を教えてください。
ペイントじゃできないのかも教えてください。

Aベストアンサー

 残念ながらペイントでは、まわりが、白いままです。
 
 お使いのパソコンのOSが、一致するようでしたら
 
 無料のソフト「GIMP」(ギンプ)を使用することをおすすめします。

 ・Gimp2のダウンロードページ
 http://www.geocities.jp/gimproject2/download/gimp-download.html


 ・GIMP(ギンプ)の使い方
透過(透明な部分を作る技法)
 保存は、gifかpngの拡張子にして下さい

  http://www.geocities.jp/gimpmanual/manual.html

 ※jpgは、写真を構成するのが、目的な拡張子ですので
   まわりが、白くなり透明には、なりません。

Q

<div id="container">の使い方についてお尋ねします。

ページの上から下まで帯のようにしたいのですが、例えば以下のように書くとヘッダーのところまでしかcontainerが効いていません。


HTML
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</div>
</body>

CSS
#container {
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
margin: 0 auto;
}

ランディングページのようなものを作りたく、
ページの上からフッターの手前くらいまで<div id="container">を効かせるにはどのように記述すればよいでしょうか?

<div id="container">の使い方についてお尋ねします。

ページの上から下まで帯のようにしたいのですが、例えば以下のように書くとヘッダーのところまでしかcontainerが効いていません。


HTML
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</div>
</body>

CSS
#container {
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
marg...続きを読む

Aベストアンサー

>HTML5とCSS3に関するおすすめの本があったら教えていただけないでしょうか?
 これがとても難しい。理由は
・進歩の激しいこの世界、出版時には古くなっている
・すべて仕様書に書かれている。それで事足りる物を書き下す意味がない。
 仕様書には、「なぜそうするのか」の理由も含めて完璧に書かれている。
 それを読めば解決する物を、著者の色眼鏡を通して記述しても正確ではない
 しばしば、仕様書を読んだことがあるのか疑問のものがある。

 これについては、No.1でいくつか説明しました。

 よって、一番早くて、しかも正確な参考書は仕様書ということになります。私もHTMLやCSSは仕様書で学びました。
 最初は冗長に感じますが、それは正確性を追求するために致し方ないでしょう。
 まずはHTMLをしっかり学ばれることをお勧めします。いきなり膨大なHTML5ではなく、HTML4.01strict【strictですよ。】を身につけてから、HTML5に進まれるほうが楽でしょう。

1.2 仕様の記述法( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/about.html#h-1.2 )より
 本仕様書は、著者及び実装者という2種類の読者を想定している。著者である読者に対しては、本仕様書が、HTMLの実装詳細に必要以上に触れずに使える、効率的・魅力的でアクセス性のよい文書を著述する際に必要な道具となることを望む。けれども実装者である読者は、仕様に適合するユーザエージェントを作成する上で必要となるすべての情報を見つけることができるだろう。
 本仕様書は様々な方法で利用できるだろう。
・ 最初から最後まで通読する。
・ 必要な情報に直接アクセスする。

 最初は、全体を通して読んで全体像を把握して、いつでも必要な情報にたどり着けるようになること。
 私のブックマークでは
HTML4.01詳細目次( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html#toc )

 ついで、スタイルシートはやはりCSS2.1あたりがベストです。
CSS 2.1目次( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html#toc )
 特に
4 構文と基本データ型
5 セレクタ
6 プロパティ値とカスケーディング、継承の割り当て
 ここを読まれるだけで、あなたが理解しているCSSが如何に不完全か理解できると思います。

 そのうえで、
HTML4からの変更点( http://www.html5.jp/trans/w3c_differences.html )
 で、変更部分を身につけるのが最も最短で効率的でしょう。

★HTMLやCSSの学習は、数学や理科の勉強方法ととても良く似ています。基礎から順を追ってなぜなのかを理解しながら学ぶと、小学生でも数検2級とかが取れるように、簡単なものなのです。結果を急いでうわべだけ学ぼうとしても反って時間と労力を無駄にして、しかもきちんと身についていないから応用問題に果ても足も出ない・・・ということになる。

>HTML5とCSS3に関するおすすめの本があったら教えていただけないでしょうか?
 これがとても難しい。理由は
・進歩の激しいこの世界、出版時には古くなっている
・すべて仕様書に書かれている。それで事足りる物を書き下す意味がない。
 仕様書には、「なぜそうするのか」の理由も含めて完璧に書かれている。
 それを読めば解決する物を、著者の色眼鏡を通して記述しても正確ではない
 しばしば、仕様書を読んだことがあるのか疑問のものがある。

 これについては、No.1でいくつか説明しました。

 よっ...続きを読む

Qイラストレータの画像をJPG形式で保存したい

イラストレータの画像(ai形式)を一番画質を劣化させずにJPG形式に保存する方法を教えて下さい。

Aベストアンサー

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存」でjpg
4.「書き出し」でbmp保存後、Photoshopで「保存」でjpg
5.Photoshopに貼り付け後、「Web用に保存」でjpg
6.Photoshopに貼り付け後、「保存」からjpg

結論から言いますと、1.のIllustrator上での「Web用に保存」で最高で行った場合が、色やエッジ、文字等がきれいに感じられました。
3~6はやはりベクターからラスタ変換での劣化、jpg変換時の劣化と、2度の劣化が原因だと思います。


最初にも書いた条件の詳細が分からないので、役に立つか分かりませんが、参考までに・・・。

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存...続きを読む

Qホームページビルダーのようなフリーソフトってありますか?

たくさんフリーソフトがあるのでビルダーのような便利なソフトもあるのではないかと思いました。
ご存知でしたら教えてください。

Aベストアンサー

Nvu(エヌビュー)というオープンソースのフリーソフトがあります。
ホームページビルダーの様にワープロ形式に入力してそのまま出力することができます。
私は使ったことはないのですが、非常に完成度が高いと思います。
リンク先には日本語の解説サイトを載せておきます。

参考URL:http://nvu.cc/

Qエクセルで多数のシートをまとめる方法

エクセルで10以上あるシートを一発でひとつにまとめる方法はあるでしょうか?

コピー&ペーストを繰り返すしかないのでしょうか…

仕事で明日やらなければならないので、
お分かりになる方、是非教えてください!

Aベストアンサー

まぁ既出回答にもあるように,10数回程度コピー貼り付けすることで,どうという作業ではないとは思います。

さておき。
ご利用のエクセルのバージョンが不明ですが,ご利用のOfficeのバージョンによっては

1.ワードを起動する
2.挿入のファイルからエクセルブックを指定する
3.添付図のようなダイアログが表示されたらラッキー成功です,ブック全体を指定して挿入する
4.Ctrl+Aで全体を選び,コピーして,エクセルの新しいシートに貼り付ける

と一発でできます。
添付図のようにならなかったときは,出来ません。

Qソース表示でメモ帳の文字が文字化けしている

WEBサイトのページをソース表示したときに、メモ帳で日本語で表記された部分が文字化けしている場合、それを直す方法はありますか?
(サイト上での日本語は文字化けしていません。)
ちなみに自分の作ったページではなく、ネット上で見つけたものです。
HTMLタグを見たいだけなのですが、日本語の部分が化けていて見難いので解決方法を教えてください。
よろしくお願いします。

Aベストアンサー

メモ帳という事はシフトJISでなくては文字化けして読めないと思います。
ソースファイルがシフトJIS以外で書かれていたら文字化けしてしまいます。
Webブラウザはエンコードして正常に表示しています。

IEを使っているのであれば、[ファイル]→[名前を付けて保存]で、
保存する場所を必要であれば変更し、
ファイル名がタイトルになっていますので、必要であれば変更し、
ファイルの種類をWebページ HTMLのみ (*.html,*.htm)を選択し、
エンコードを日本語(シフトJIS)を選択して[保存]ボタンを押します。
出来上がったhtmlファイルはシフトJISでエンコードされていますので、メモ帳で正常に表示出来るはずです。
ご確認下さい。


人気Q&Aランキング

価格.com 格安SIM 料金比較