• ベストアンサー

HPのデザインでわからないとこがあります

えっと最近HPを作ろうとHTMLを勉強しています それでわからないとこがあるので教えてください それはここのHPのトップで カテゴリーとか検索とかかどが取れた黄色で囲んでありますよね？それはどうやってするのでしょうか？ あと http://www.biwa.ne.jp/~jansei/game/game/linabi.htm ここのHPの最初のアイテムについてとか武器とか ラインの中に文字がありますよね それはどうやってするのでしょうか？

  • CSS
  • 回答数6
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • kamoto
  • ベストアンサー率41% (26/62)
回答No.5

「カドが取れた黄色」は＃２でnorizowさんが 説明しておられるのでできると思います。 でなければ、翔泳社の『HTMLデザイン辞典』の 「角が丸いテキストコンテナを作る」を参照してください。 「武器」のところについては、data.cssを見ると a:hover{background-color:white;} というところで指定されています。 これは「アンカー（リンク）されているところに マウスが乗ったら、背景色を白にしてね」ってことです。 <LINK REL="STYLESHEET" HREF="../../data.css" Type="text/css"> は、スタイルシートをhtmlに指定するためのタグで、 スタイルシート自体のファイルはdata.cssです。 http://www.biwa.ne.jp/~jansei/ の中にファイルは全部収めてありますから、 たいていはこの後ろに目的のファイル名を入力すれば 見たいところが見られます。それで http://www.biwa.ne.jp/~jansei/data.css となるんですね。 「開くアプリケーションを指定してください」は、 ファイルが何の形式で保存されてるかわからないときなどに聞かれますが、 テキストならテキストが開けそうなアプリケーション、 画像であれば画像が開けそうなものを選びます。 スタイルシートの場合はテキストなので、 メモ帳やsimple textなどで開けます。 いずれにしろ、上のほうで出した本や、 みなさんが紹介されているURLを読みあさって 覚えると、だんだんわかってくると思います。

ryuusennsisho
質問者

お礼

なるほど～！！すごくわかりやすいです！！ アプリはメモ張だったんですねIEで開こうとしてました （^^ゞ えっとお勧めの本さっそく購入してみようと思います どうもありがとうございました！

その他の回答 (5)

  • norizow
  • ベストアンサー率26% (32/120)
回答No.6

ＮＯ．２です。何度もしつこくすみません(;￣ー￣A 直接の質問とは異なるかもしれませんが、アドバイスを… 色んなＨＰのテクを真似してみたい気持ちは、とてもよくわかります。 だけれど、スタイルシートに関しては、 ＨＴＭＬをほぼ完全に理解できるようになってからでないと 使いこなすのは難しいと思います。 私も、つい最近まで、作成ソフトに頼りっきりで、 スタイルシートの役割はおろか、どのタグがどういった意味なのかすら 理解することができませんでした。 仕事でどうしても必要なので、本を何度も何度も読んで覚えたのです。 文章で伝えるのには限りがあります。 回答して貰っても、根本的な意味がわからないことには、 尚更混乱してしまいますよね・・・？ 本や、詳しく解説しているＨＰは幾らでもあります。 そういったところで、いちから勉強される事を、是非おすすめしたいです。 さしでがましい事を承知で書きました。ご容赦くださいませ。

ryuusennsisho
質問者

お礼

自分なりに本やらHPでいろいろ勉強しているんですが まだまだ未熟で・・・汗 やっぱりHTMLを完全マスターが先ですね～ またよろしくお願いします！ どうもありがとうございました！

  • novaakira
  • ベストアンサー率36% (60/164)
回答No.4

ＯＫＷｅｂですか。 ためしに保存してみてみればわかります。 あれは画像です。自分で作るしかないでしょう。 ＞スタイルシート・・・ まずサイトへアクセスしましょう。 ソースを表示すると、<head>内に、 <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><META http-equiv="Content-Style-Type" content="text/css"><Title>About items</Title><LINK REL="STYLESHEET" HREF="../../data.css" Type="text/css"> と書かれています。 このdata.cssがスタイルシートです。 そこで、さきほど書いた http://www.biwa.ne.jp/~jansei/data.css へアクセスすると、ＤＬになるかront pageで勝手に開きます。 data.cssの中身は・・・ body{color:#000000;background-color:#dde;・・・・ と続いてます。 ＞<h3><a name="w">武器</a></h3>・・・ これは名前をつけてます。 これは、少し前の <a href="#w">武器</a> と書くことでここをクリックすると、a name　で指定した ところへジャンプしてくれるタグです。 スタイルシートは・・・・ <span class="cc2">name</span> <span class="cc2">名前</span> ここです。クラス指定しているところです。 data.cssの中に .cc2{background-color:#ffb8d5;width:125pt} と書いてあります。このdata.css内で定義したとおりに ページで表示されているわけです。 スタイルシートについてくわしく知りたいのなら・・・ とほほのＷＷＷ入門 http://tohoho.wakusei.ne.jp/www.htm へどうぞ。

ryuusennsisho
質問者

補足

えっと私がアホなせいかもしれませんけど かなり混乱しております<LINK REL="STYLESHEET" HREF="../../data.css" Type="text/css"> ～ これ全体じゃなくて data.css だったんですね でもどこにも色を指定するとこもなく？？？？です 本やとほほもここで質問する前にみたのですが わかりませんでした～（アホです[壁]-T) ダー） http://www.biwa.ne.jp/~jansei/data.css のURLはどこからでたのですか？URLが出てくること自体ちんぷんかんぷんです ブラウザにこぴぺでクリックしても開くアプリケーションを指定してくださいとでます なにを選べばいいのでしょうか？ いろいろ質問ぜめでほんとすいません～

  • norizow
  • ベストアンサー率26% (32/120)
回答No.3

ＮＯ．２の者です。 <TD><IMG src="左下のカド用画像"></TD> <TD><IMG src="右下のカド用画像"></TD> の、間にも <TD bgcolor="画像と同じ色"></TD> が、入りますね。失礼しました(;￣ー￣A

  • norizow
  • ベストアンサー率26% (32/120)
回答No.2

「教えてgoo！」の中でそれっぽいのは見つけきれませんでしたが もしかして「カドが丸いテーブル（表）を作りたい」のでしょうか？ それでしたら… 「丸いカド」は、いちょう型の「画像」です。 ４つのカド用画像を用意して、 ３列３行の、枠の無いテーブルの中の、カドに当たる部分に、画像を配置し、 セルの間隔（cellspacing）＝０。余白（cellpadding）＝０。と設定します。 <TABLE cellpadding="0" cellspacing="0" border="0"> <TBODY><TR><TD> <IMG src="左上のカド用画像"></TD> <TD bgcolor="画像と同じ色"></TD> <TD><IMG src="右上のカド用画像"></TD> </TR> <TR> <TD bgcolor="画像と同じ色"></TD> <TD>ここに文字が入りますね</TD> <TD bgcolor="画像と同じ色"></TD> </TR> <TR> <TD><IMG src="左下のカド用画像"></TD> <TD><IMG src="右下のカド用画像"></TD> </TR> </TBODY> </TABLE>

ryuusennsisho
質問者

お礼

なるほど～！！ 角のないのはタグじゃなくて画像だったんですね 要するにテーブルに画像をつけるということですね！ ご回答ありがとうございました～！！ これからもよろしくお願いします！

ryuusennsisho
質問者

補足

あっすいません～そのサイトというのはOK.WEBのほうです～ えっとURLはhttp://www.okweb.ne.jp/index.php3 ここですね ここのトップページに角が取れた四角で囲んでありました

  • novaakira
  • ベストアンサー率36% (60/164)
回答No.1

＞カテゴリーとか検索とかかどが取れた黄色 ってなんですか？ ＞ラインの中に文字・・・ もしかして文字の後ろに色がついているってことでしょうか？ 質問にかかれているＵＲＬでは、 スタイルシートを使って文字の後ろに背景色をつけているようです。 http://www.biwa.ne.jp/~jansei/data.css でスタイルシートを定義しています。 ＤＬしてみてはいかがでしょう？ (これでryuusennsishoさんがＩＥを使っているってことも分かりました） ただじここで使われれているスタイルシートはＩＥでのみ 通用するものですのでＮＮでは(たしか)何もかわらなかったと思います。 ttp://tohoho.wakusei.ne.jp/www.htm でくわしい説明があるので一度いかれては？

ryuusennsisho
質問者

補足

えっとですねソースを見たんですけどどこが スタイルシートなのかちょっと分かりません～汗 武器のところは <h3><a name="w">武器</a></h3> となっていますが？？？です

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ＨＰ内で検索するには？

    HTMLで自分のＨＰを作っています。 そのトップページに検索欄を作って、簡単にそこへ導くようにしたいのですが、どのようなタグをどのように記述すればよいのかという解説が、中々見つかりません。 何方か教えていただけないでしょうか。

  • 色々なＨＰのメモ帳を見ると・・・

    こんばんは。 まだまだ初心者な私ですが、 自分のＨＰを作って見ようと思い基礎的な事（ＨＴＭＬ等）の勉強をしています。 いろいろな方のＨＰを見て参考にしようと思い、 ＨＰを開いた状態で右クリック→ソースの表示で、そのＨＰのメモ帳が開きＨＴＭＬの文章が見れますよね？ ただ、どういう訳かそのＨＴＭＬの文章のカタカナの部分が一部のＨＰでは文字化けを起こしてしまうんです（ヤフーのトップページ等）。 これは、どうしてなんでしょうか？

  • このようなデザインにするには・・・？

    度々、すみません。 http://home1.netpalace.jp/9/top.cgi このようなデザインのＨＰを作るにあたって、いくつか質問にお答えいただけるとうれしいです。 １．このサイトの枠（？）はテーブルで作ってあるのでしょうか？ ２．左にあるカーソルをボタンに合わすと色が変わるのはどうすればいいのでしょうか？ ３．タイトルが画像の上に文字を打ってある形になっているのですがこれはどのようにすればいいのでしょう？ よろしくお願いいたします。

  • Ｎｅｗという文字をヤフーみたいな色つきにしたいのですが

    パソコン初心者です ＨＴＭＬでページをつくる練習をしてるのですが Ｎｅｗという文字を単なる赤文字にしたり太文字にすることは できるのですが、ヤフーのトップページみたいに 外側に黄色がかかったような感じにするにはどうしたらよいでしょうか？

  • ＨＰを作っていますが、特定のファイルが転送できません、アクセス権限がないとでます。

    最近、ＨＰを作成している、初心者です。「index.htm」や「top.htm」「me.htm」「interia～」などのファイルは転送できましたが、「favarite～」「garden～」など転送できません。「アクセス権限がありません」と出ます。半数文字のみでスペースも入れておらず何故出るのかわかりません。文字数が多いのかとも思いましたが、転送できないファイルより文字の多いものも転送できました。ちなみにトップページを「index」でなく「top」にしてしまいましたが、関係ありますか？ ご存知の方、お時間があれば教えてくださいm(__)m。前に進まず困っています。 windows　XP、ビルダーは7.0を使用しております。よろしくお願いしますm(__)m

  • HP移転後について

    皆様よろしくお願いいたします。 旧HPを無料サーバーで運営していました。 新HPを作成し、独自ドメイン、有料サーバーで運営を開始しました。 旧HPサーバーでは301リダイレクトなどが使用できないため、SEO的な評価引継ぎは ほぼ諦めましたが一応、旧HP全ページにcanonical、refresh、移転表示と新HPへのリンクは 実施しております。 新HPのgoogleインデックス、yahooカテゴリ登録も完了しています。 ここからなのですが、現在、googleにて検索すると下記のようになります。 (1)店舗名で検索すると・・・新HPのTOP、旧HPの2ページ目、旧HPのTOPの順で表示。 (2)地域、業種で検索すると・・・旧HPの2ページのみ表示。 検索結果最終ページの「最も的確な表示をするため、上185件に似たページは除外。 全て表示するにはここから」となっています。 そこで全て表示をクリックすると、旧HPの2ページ、旧HPのTOP、新HPのTOPの順で表示。 （旧HPのTOPより2ページ目が先頭表示もおかしいですが・・・） 新HPの評価がないため検索結果の下位になるのはしょうがないのですが、 問題は新HPのTOPが旧HPの2ページ目と似たページととして除外されることです。 これは新、旧のタイトルがほぼ同じなのがダメなのでしょうか？ どのような対応が一番よいでしょうか？ 長文ですいませんが、よろしくご指導お願いいたします。

    • 締切済み
    • SEO
  • ヤフー画面のデザインについて

    ＩＥを起動した時にヤフー画面にしてるのですが、その画面で ＹＡＨＯＯ！Ｊａｐａｎの文字が検察文字を入れる横に表示されています。 これを検索文字を入力する上に持っていきたいのですが、それは可能でしょうか？ 後、TOP画面にあるカテゴリー一覧のリンクが消えてしまったんですが、何故でしょうか？ よろしくお願いします

  • ＨＰ製作中です　幾つか解からないとことが有り困っています

    yahooのジオシティーズで今ＨＰ製作中です 出来ないところが幾つか有り、質問させて頂きます まず　リンクする文字にカーソルを合わせると、（色　反転）　するようにしたいのですが出来ません いろいろ調べたのですが、解かりません それと、レイヤーを重ねて作った　文字（題名）を１つのロゴにしたいのですが どうするのか解かりません メモ帳では出来るのできるのですが・・・・？ 解かりません ＨＴＭＬが違うのでしょうか ヨロシクお願いします

  • すみません初心者ですが、HPの枠？ってどう作るんですか？

    HPのトップページによく四角い枠内に 「2月22日更新！」 とかスクロールする枠を設定しているのはどうやるんですか？ 背景は大体、みなさん白で、見る人がそこにカーソルをおいて文字を消したり、文字を打ちこむのも可能です。（そうする意味はないですが。） または右の矢印を押すと過去の記事もスクロールして見る事も出来ます。 よくヤフオクの出品テンプレートを貸し出してくれるHPにも 「HTML言語」 をその中に書き込んで、こちらをコピーや編集してお使いください。などと貸し出しています。 いろいろ調べてはいるのですが、そもそもその枠の事をなんていうのかもわからず検索しても見つからず、1週間が経過してしまったので質問させて下さい。 ちなみにホームページビルダー6．0を使用してます。

  • 「free～」と付くタイトルのHPを探しています。

    「free～」と付くタイトルのHPを探しています。 毎日、面白いHPをいくつか紹介してくれるサイトです。URLのあとに 一言管理者のコメントがありました。 過去には、あるHP（真っ白に三つの点）を何秒かみてると キリスト様が現れたりなどなど。。。。 トップページが黄色で、今このHPを見ている人の数も表示されます。 なんか広島の人がやってたのか、広島というキーワードを覚えています。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する