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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

JavaScript

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

jQuery

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

Q&A

解決済

1回答

1109閲覧

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

c70

総合スコア7

HTML5

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/11/13 12:38

編集2017/11/13 19:17

下記サイトの 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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/11/13 12:45

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

2017/11/13 14:08

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

2017/11/13 14:29

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

回答1

0

ベストアンサー

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

  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

HTML

1<!-- こうなっている --> 2<ul> 3 <li><a href="">text</a></li> 4 <ul> 5 <li>text</li> 6 </ul> 7</ul> 8```↓HTMLの文法的にはこう。 9```HTML 10<ul> 11 <li> 12 <a href="">text</a> 13 <ul> 14 <li>text</li> 15 </ul> 16 </li> 17</ul>

投稿2017/11/13 15:26

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

c70

2017/11/13 17: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%にしてしまうとか。
kei344

2017/11/13 17:44

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

2017/11/13 19:30

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

2017/11/13 20:05

> <font size>としてたものを<size>に、<font color> そんなタグは無いので、CSSで指定します。そのあたりはHTML/CSSの本などを探してください。 【fontタグ使ってる人はもう使うのやめよう | delaymania】 http://delaymania.com/201209/web/blog_html_font/ > フォルダも上げてみましたが、これで見つかりますでしょうか。 上げただけではHTMLに反映されません。HTML内に呼び出す記述をする必要があります。これも入門書を探してください。 > 整理がつかなくなっていました。 「現状を修正する」ではなく、1から作り直したらよいのでは。 編集された質問も読みましたが、そのフォントは「Webフォント」という技術を使っているだけなので、メニューのファイルの中に入っていました。Webの情報は「体系立てた情報」で無いことが多いので、一度本屋で何冊か本を買って読むと言う方法をお勧めします。
c70

2017/11/14 07:09

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問