- ベストアンサー
矢印マークとテキストの組合せは何タグで作りますか？
初歩的な質問で申し訳ないのですが いまだに自己流な気がして心配なので、書かせて頂きます。 サイトのフッターに置くコンテンツで、よく以下のようなものがありますが →会社案内 →お問い合せ →個人情報保護方針 →サイトマップ これらの、「→」（リストマーク）と、テキストは何タグで作りますか？ 私は自己流で <dl><dt><dd>をつかって <dt>をリストマークの画像にして <dd>をテキストにします。 細かいレイアウトのズレはCSSで調整しています。 ほかにもっと良いやり方がある気がして。。 ご存知の方いらっしゃいましたら、何卒ご教授よろしくお願いいたします。
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- 画像の横にテキスト表示
<dl> <dt>画像</dt> <dd>テキスト1</dd> <dd>テキスト2</dd> <dd>テキスト3</dd> </dl> 上記のhtmlで画像とテキストの表示をしたく思っております。画像を基準にテキストは全て 画像の右側に表示させたいのですがどのようなcssをかけば実現できるでしょうか？ ********** テキスト1 * * テキスト2 * 画像 * テキスト3 * * ********** のようなイメージを想定しております。 ddが1つであればfloatで問題ないのですがddが複数ありddのみは縦に続けたいのですが方法がわからず つまずいている状態です。詳しい方いらっしゃいましたら宜しくお願い致します。
- ベストアンサー
- HTML
- 定義リストのコーディングについて
定義リストのコーディングについて 添付画像のようなデザインを、css3だけで実現可能でしょうか。 ソース <dl> <dt>見出し(1)</dt> <dd>テキストテキストテキストテキスト</dd> <dt>見出し見出し見出し(2)</dt> <dd>テキストテキストテキスト</dd> <dt>見出し(3)</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> ポイント ・見出し（dt）とテキスト（dd）のフォントサイズ・スタイルは違う ・見出しとテキストの文字数＝高さは一定ではない ・リスト部分に背景色あり。一番高さのある項目に合わせて可変 素直にulでやれよという感じですが、リストの意味合い的に、できれば定義リストを使いたく… divやその他のタグの追加は、文書構造的におかしくなければある程度許容できます。 モダンブラウザで正しく見えればokです。 無理そうな気もしますが、もし方法があれば、どうぞご教授ください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- テキストをHTML、CSSに変換しています。
添付画像の[CONTENTS]、目次ページをHTMLとCSSで作成しなくてはならなくなりました。 文字の大きさ、色の調整、’line-height’、’marigin'などを使い凡そのレイアウトはうまくいきました。 （質問１） わからなかったのが、CONTENTSの右横にある赤の点線です。 これは<hr>を使って'dashed'などをかけてみたのですがうまくいきませんでした。 文字の横ではなく、文字の下側のラインに点線が出来てしまいます。 これは第１章の各項目でも同じことが言えます。文字の右横。文字の高さの中心と同じ高さに点線が作れません。 「 01 エクセルを起動・終了する ---------------------------------- 010」 うまく行く方法をご存知の方いらっしゃいましたら教えてください。 （質問２） リストの左揃えはタグ<dd>に’margin-left’をかけて揃えています。 リストのページ（数字）を右端で揃えるには同様に'margin-right'でうまくいきますか？点線の長さや、リストの文字数を勘案しても添付画像のようにキレイに右端で揃えるにはどうやったらよろしいでしょうか？ 慣れないHTML、CSSで苦労しています。 ご教授お願い致します。 ＊ちなみにこのリストは<dl><dt><dd>で作成しています。 ************************************************** CONTENST --------------------------------------------------------------------- 目次 【第一章】 これだけは知っておこう 01 エクセルを起動・終了する ---------------------------------- 010 02 ウィンドウの構成を知る ------------------------------------ 012 03 ワークシートの構成を知る ---------------------------------- 014 04 ファイル(ブック)を保存する -------------------------------- 016 05 保存した(ブック)を開く ------------------------------------- 018 06 Column 他のバージョンで開くには？------------------------- 020 ******************************************************
- 締切済み
- HTML
- CSSをいじらず、HTMLのテキストひとつ変えただけで崩れる
宜しくお願いします。 ホームページビルダーで、cssのサイトを開き、 テキスト文章の文字ひとつ削除するだけでレイアウトが崩れてしまいます。 cssのサイトは[Webレイアウト]という参考書の付録CDから入れた サンプルサイトです。 自由に書き換えできるサンプルなので、テキストの「あ」を「か」に変えるだけでも、プレビューで崩れてしまう理由が不思議でなりません。cssはまったくいじっていません。
- 締切済み
- HTML
- Dream Weaverを使ってCSSレイアウト
Dream Weaverを使ってCSSレイアウトをしようとしています。 これまでコンテンツをひとまとめにcontainerでdivにしていたのですが、今回、footer部分（エビアンのサイト（http://www.evian.co.jp/）でいうと、一番下のサイトマップが載ったピンクの部分）をこのように横広がりのベタ一色の背景にしようと思っています。 しかしその場合、footerの背景はcontainerの幅までしか設定できません。containerの幅よりも広く、ブラウザの際まで横に伸びる背景はどのように設定するのか分かりません。 分かる方、教えてください。 よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- タグ リストについての質問です。（超初心者です）
タグ リストについての質問です。（超初心者です） リストについてなのですが、複数のリストに複数のスタイルを設定したいのですができません。 何が悪いのか教えて下さい。また解決方法も教えて下さい。 ホームページ作成の初心者です。悪戦苦闘しながら作成しています。 タグについてyahoo知恵袋や教えて!gooなどたくさん調べたつもりなのですが、分かりません・・・ 教えて下さい。 複数のリストに各々スタイルを指定したいのですが、２つめのリストに反映されません。 スタイルシートで作成しているのですが・・・ どのようにしたら良いのでしょうか？ == HTMLは、下記のような形 == <div id="main"> ・ ・ ・ <div id="navigation"> <dl id="navi"> <dt>野菜の種類</dt> <dd><a href="#">キャベツ</a></dd> <dd><a href="#">にんじん</a></dd> </dl> <dl id="navi2"> <dt>車の種類</dt> <dd><a href="#">セダン</a></dd> <dd><a href="#">ワゴン</a></dd> </dl> </div> ・ ・ ・ </div> == CSSは、下記のような形 == #navigation dl#navi { background: #999999; } #navigation dl#navi dt { margin: 0 0 1px; } #navigation dl#navi dd { background: url(bg_01.png) no-repeat; } #navigation dl#navi dd.first { padding-top: 14px; background-position: 0 -1px; } #navigation dl#navi dd a { color: #000000; text-decoration: none } #navigation dl#navi dd a:hover { color: #A6FF28; } #navigation dl#navi2 { background: #FFFF66; } #navigation dl#navi2 dt { margin: 0 0 1px; } #navigation dl#navi2 dd { background: url(bg_01.png) no-repeat; } #navigation dl#navi2 dd.first { padding-top: 14px; background-position: 0 -1px; } #navigation dl#navi2 dd a { color: #000000; text-decoration: none } #navigation dl#navi2 dd a:hover { color: #CC0033; } 上記のような形で、<dl id="navi2">のスタイルが適用されません・・・ なぜでしょうか？ ちなみに<dl id="navi">はちゃんと反映します。 よろしくお願いします。
- ベストアンサー
- HTML
- どなたか知恵を貸していただけないでしょうか。
どなたか知恵を貸していただけないでしょうか。 定義タグを使って以下のような文書を作ってます。 (1)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (2)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (3)テキストテキストテキストテキストテキストテキストテキストテキストテキスト てきすとてきすとてきすとてきすと てきすとてきすとてきすと １.<dl><dt> ~ </dt></dl>で囲みました。 テキストが長すぎて、改行した時に↓次の行の先頭文字が(1)と同じところまできてしまうので困っています。 (1)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (2)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (3)テキストテキストテキストテキストテキストテキストテキストテキストテキスト てきすとてきすとてきすとてきす てきすとてきすとてきすと もともとの<dt>タグは改行した時、インデントが次の行にも効かないものでしょうか。 以前は効いていたページもあったのですが、スタイルシートが変わって <dt>タグにいろいろ設定してしまったので、もともとの設定が効かなくなったのでしょうか。 2.<dt><dd>の横並びという方法も考えました。 XHTML <dl class="list309"> <dt>（1）</dt><dd>テキストテキスト......</dd> <dt>（2）</dt><dd>テキストテキスト......</dd> <dt>（3）</dt><dd>テキストテキスト......</dd> </dl> dl.list309 dt { clear: left; float: left; margin: 0 0 0 1em; width: 1em; padding-left: 0px; } dl.list309 dd { margin-bottom: 1em; margin-left: 0.5em; } ところが、(3)の本文中↓で<dd>を使いたいので困っています。 「 てきすとてきすとてきすとてきす てきすとてきすとてきすと」 いったいどうすればよいでしょうか。
- ベストアンサー
- HTML
- ul、dlタグでリストを作成すると行間に余白が
とても基本的な質問なのですが、どなたか教えて頂けると助かります。 ul、dlタグを使い、画像を縦に並べようとしているのですが、IEではどうしても画像と画像の間に余白が入ってしまいます。 この余白を消したいのですが、どうすれば宜しいでしょうか？ ■htmlの記述 <ul> <li>画像１</li> <li>画像２</li> <li>画像３</li> </ul> <dl> <dt>画像1-1</dt> <dd>画像1-2</dd> <dt>画像2-1</dt> <dd>画像2-2</dd> <dt>画像3-1</dt> <dd>画像3-2</dd> </dl> ■CSSの記述 #ul{ margin:0; padding:0; line-height:0; list-style:none; } #ul li{ margin:0; padding:0; line-height:0; } #dl{ margin:0; padding:0; line-height:0; list-style:none; } アドバイスをどうぞ宜しくお願いします。
- 締切済み
- Mac
- <li>の画像およびテキストリンクのランダム複数表示
javascriptでランダム表示する方法を教えて下さい。 サイト内に商品の一覧を作成しようと考えており、それぞれの商品画像、テキストリンクをランダムで動かしたいと思っております。 商品数は10点くらいになる予定です。 <div id="sample"> <ul> <li> <dl> <dt>商品1</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> <li> <dl> <dt>商品2</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> </ul> </div> ソースはこんな感じで、10点程の掲載予定です。 <li>～～</li>リスト10点をランダム表示する javascriptを教えて下さい。 よろしくお願いいたします。
- 締切済み
- JavaScript
- CSSでどのように記述したらいいでしょうか？
ホームページ作成中ですが、CSSはあまり詳しくありません。 テンプレートを元に多少いじれる程度です。 下記の富士通トップページのフッター部分のサイトマップ？（個人のお客様、法人のお客様・・・と書いてある部分と、さらにその下の「このサイトについて・・・」という部分）のレイアウトがとても綺麗なので、同じようにレイアウトを組みたいのですが、CSSをどのように書けばいいでしょうか？ http://jp.fujitsu.com/
- ベストアンサー
- HTML
- 複合機mfc-j6583cdwのスターターインクがなくなってしまい、新しいインクを見つけることができません。
- パソコンやスマートフォンのOSは何でしょうか？接続方法は何ですか？関連するソフトやアプリはありますか？電話回線の種類は何でしょうか？これらの情報を教えていただけると、より具体的な解決策をお伝えすることができます。
- ブラザー製品に関する質問です。複合機mfc-j6583cdwのスターターインクが見当たらないため困っています。お使いの環境や接続方法、関連するソフトやアプリ、電話回線の種類について教えていただけると助かります。
お礼
なるほど、ありがとうございます！ そのほうが良いですね！