質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.99%

  • JavaScript

    13864questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5830questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    3396questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブメニューのサンプルをアレンジしたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 196

c70

score 1

下記サイトの Demo2 のメニューを自分のHPで使いたいのですが、
ダウンロードしたものを自作のものにまるまる追加して
フォントの指定を変更しようとしましたが、文字化けになりました。

https://tympanus.net/Development/ResponsiveMultiLevelMenu/index2.html

元のコード
<!DOCTYPE html>
<html lang="en" class="no-js">

試しに変更を試みた文字列の元
<a href="#">Fashion</a>
修正してみたコード
<!DOCTYPE html>
<html lang="ja" class="no-js">

試しに変更してみた文字列
<a href="#"><face= "MS Pゴシック">あいうえお</face></a>


変更作業を試みたものがこちらです:
http://kid0magic.web.fc2.com/teratailsample.html

メニューにある下部への矢印がわりの三角形のマークが
オリジナルのフォントに依存してるようなので、
日本語表示の指定と
テキストの部分だけのフォント変更で、と思ったのですが
それでは無理なのでしょうか。

よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/11/13 21:45

    書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)か、再現するURLを提示されたほうが回答を得やすいと思います。

    キャンセル

  • c70

    2017/11/13 22:14 編集

    ありがとうございます。 手元で作業中のものをアップしてみたところ、関連ファイルが不揃いなようで、パソコン上で見られるのとは違っていますが、失敗中のものはこちらです:http://kid0magic.web.fc2.com/teratailsample.htmlこれの元のサイトはこちらです:http://kid0magic.web.fc2.com/index.html

    キャンセル

  • kei344

    2017/11/13 23:08

    この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文を編集することをお勧めします。(質問は編集可能です)

    キャンセル

  • c70

    2017/11/13 23:29

    再びありがとうございます。助かります。

    キャンセル

回答 1

checkベストアンサー

+3

直接の回答では有りませんがいくつか指摘だけします。

  1. fontタグは廃止されているので使わないようにしましょう。(リンク先参照
  2. 開始タグと終了タグの対応が取れていない箇所がたくさん有ります。
  3. li の中にあるはずの ul がタグの外に有るため、 構文がおかしくなっています。(後述)
  4. <HTML> <BODY> がページ内に2回ずつありますが、文法違反です。(大文字のほうを消しましょう)
  5. 提示されたメニューライブラリを構成するファイルが1つも含まれていません。
  6. メニュー構造のHTMLがライブラリが望む形になっていません。

【font 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/font

<!-- こうなっている -->
<ul>
  <li><a href="">text</a></li>
    <ul>
      <li>text</li>
    </ul>
</ul>

↓HTMLの文法的にはこう。

<ul>
  <li>
    <a href="">text</a>
    <ul>
      <li>text</li>
    </ul>
  </li>
</ul>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/14 02:35

    詳細なご指摘をありがとうございました。10年近く前に手作りしたっきりのものを手直ししようと思い立ったもので、ルール変更にも追いついていませんでした。
    1)フォントの種類を指定するときは”face"で、サイズについては”font size"でななく、”size”のみ、ということでしょうか?
    スタイルシートに
    h2{font:12pt/2 san-serif;}
    h3{font:lighter 11pt/2 san-serif;}
    h4{font:lighter 10pt san-serif;}
    h5{font:lighter 8pt san-serif;}
    という記載がありましたが、”font"でまとめることはできなくなったということでしょうか?
    2)まだ全部拾いきれていないかもしれませんが…いくつか修正してみました。
    3)誤解していたようです。修正してみました。
    4)ありがとうございます。その他の要素を一緒に記載があるものは、別物かと勘違いしていました。
    5)「ライブラリ」とは「スタイルシート」のようなものでしょうか?この用語が指すものがわかりません。
    6)質問の内容を考えながら、自分の当初意図していたものが混乱して質問が正しくできていなかったことが発覚しました。申し訳ありません。おかげで思い出しました。PCの大きい画面では右にアコーデオンメニューを、小さい画面では上にグローバルメニューを、と思っていたのでした。グローバルメニューは、あとから縮めたら出てくるのではなく、広い画面でも常設でもよいかな、と考えていました。幅を100%にしてしまうとか。

    キャンセル

  • 2017/11/14 02:44

    1)スタイルシードでは無くHTMLタグについてです。多用されている<font>ことについて言っています。
    5)下記サイトのメニュー部分を実装したいのであれば、決まったHTML構造とCSS/JavaScriptのコードが必要です。それらのコードがとりあえず見つかりませんでした。
    https://tympanus.net/Development/ResponsiveMultiLevelMenu/index2.html
    6)やりたいことをふんわり書くのではなく、やって試して調べてどうしてもわからないという段階で質問されたほうが良いです。ただたんに誰かに作って欲しいのであれば外注されることをお勧めします。

    キャンセル

  • 2017/11/14 04:30

    いろいろ試しすぎて、質問の的が絞れなくなっていましたことお詫び致します。整理して、今回はオリジナルのメニューで日本語を表示させることのみを目的にして、質問を編集させていただきました。
    1)質問の編集に伴い、やってみたサンプルの内容も変更しましたが、アドバイスいただいた内容に従って<font size>としてたものを<size>に、<font color>としていたものを<color>に修正して、表示は変わらずに保てたことを確認できました。ご教授ありがとうございました。
    5)ダウンロードした素材にあった js 、css、 font のフォルダも上げてみましたが、これで見つかりますでしょうか。
    6)希望通りに再現できないので、アレンジのやり方を変えてみたりしているうちに、アプローチの仕方によって問題点が異なり、整理がつかなくなっていました。できれば自分で理解して作成し管理したいので、気付けていない不備をご指摘いただきつつ、お知恵をお借りできればと思っております。

    キャンセル

  • 2017/11/14 05:05

    > <font size>としてたものを<size>に、<font color>
    そんなタグは無いので、CSSで指定します。そのあたりはHTML/CSSの本などを探してください。

    【fontタグ使ってる人はもう使うのやめよう | delaymania】
    http://delaymania.com/201209/web/blog_html_font/

    > フォルダも上げてみましたが、これで見つかりますでしょうか。
    上げただけではHTMLに反映されません。HTML内に呼び出す記述をする必要があります。これも入門書を探してください。

    > 整理がつかなくなっていました。
    「現状を修正する」ではなく、1から作り直したらよいのでは。

    編集された質問も読みましたが、そのフォントは「Webフォント」という技術を使っているだけなので、メニューのファイルの中に入っていました。Webの情報は「体系立てた情報」で無いことが多いので、一度本屋で何冊か本を買って読むと言う方法をお勧めします。

    キャンセル

  • 2017/11/14 16:09

    HTMLなどに詳しいわけでもなく手作りして数年そのままで、いきなりレスポンシブの材料だけ取り入れようというのが無謀だと気付かされました。自分のウラシマ度を反省し、「Webの情報は「体系立てた情報」で無いことが多いので」とのお言葉に至極納得しましたので、本を参考に勉強してから取り組み直そうと思います!メニューのデザインばかりに気をとられて、Webデザインの本は購入していたのですが、基本情報の整理が先でした。修正点が、勉強!と判明しましたので、これは解決済みとします。不勉強者にご辛抱強くおつきあいくださり、本当にどうもありがとうございました。感謝です。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    Bootstrapのcollapseが閉じない

    BootflatというBootstrap3のテンプレを使ってサイトを構築しているのですが、 スマホ表示した時のいわゆる「ハンバーガーアイコン」の挙動がうまくいきません。 開く時

  • 解決済

    色が反映されないです

    前提・実現したいこと ここにブートストラップを導入して学校の課題サイトを作ろうと考えています。 スタイルがどうしても反映されないので質問をしにきました。 本当は黒になるはずです!!

  • 解決済

    html 同じものを複数表示させたい

    前提・実現したいこと 同じものを複数表示させたいのですができません。単純に同じコードを複数貼り付けても表示されるのは一つになってしまいます。複数表示させるにはどうすれば良いのでしょ

  • 解決済

    jQueryのカレンダーにて日付選択時の動きについて

    jQueryのカレンダーにて日付を選択した際、自動的に次のinputタグへ フォーカスが当たるようにしたいです。 $(function() { $(".Calendar").

  • 解決済

    helloを変えてworldはそのまま残したい

    <a href="#">Hello<span>Wrold!</span></a> でtextをすると、helloworldがアラートできます $("a").text("good n

  • 解決済

    クイズサイトの制限時間

    前提・実現したいこと ここに質問したいことを詳細に書いてください クイズサイトを作っているのですが、制限時間の表示を数字だけではなく、時間経過とともにバーが減少していくという形にし

  • 解決済

    どのように中央寄せになっているのかおしえてくださいtransformで中央寄せの仕組みがわからない

    前提・実現したいこと html、css始めたてです。 ドットインストールなどで勉強しました。 transformとabsoluteで中央寄せできると聞きましたが、原理がわかりません

  • 受付中

    Bootstrapでのスライドについて

    前提・実現したいこと スライドするための<と>のボタンを表示 発生している問題・エラーメッセージ (ブラウザはFirefoxです) Bootstrapで画像のスライドを実装さ

同じタグがついた質問を見る

  • JavaScript

    13864questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5830questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    3396questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。