締切済み

テキストをHTML、CSSに変換しています。

2020/06/29 12:06

添付画像の[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 ******************************************************

blueletter12345
お礼率27% (26/94)

HTML
回答数1
ありがとう数0

回答全件

いくつかやり方はありますが、ひとつの例として。新しいファイルにそのま…

- JI-SUI
2020/06/29 16:22

みんなの回答 （1）
専門家の回答

みんなの回答

JI-SUI
ベストアンサー率40% (4/10)

2020/06/29 16:22 回答No.1

いくつかやり方はありますが、ひとつの例として。新しいファイルにそのままコピれば見られると思います。数値を変えたりプロパティを消してみたりしてどうなるか実験してみてください。 <!DOCTYPE html> <html lang="ja"> <head> <title>sample</title> <style> dd { overflow: hidden; /* ddからはみ出た罫線を見えなくする */ } dd span { position: relative; /* afterの基準とする要素はこれですよ */ display: inline-block; padding-right: 5px; /* 文字と罫線の間隔 */ } dd span::after { content: ''; position: absolute; top: 50%; /* 縦中央に */ left: 100%; /* spanの右端（左から言えば左に100％ずらした位置）からスタート */ width: 10000px; border-top: 1px dashed #f00; } </style> </head> <body> <dd><span>01 エクセルを起動・終了する</span></dd> </body> </html>

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

HTML＋フレーム構成のページを、HTML+CSSで書き換えるには？
HTML＋フレーム構成のページを、HTML+CSSで書き換えるには？コンテンツはそのままに、HTML＋フレーム構成のページを、HTML+CSSで書き換えることになりました。ヘッダー、フッター、上部に画像ロゴ、左にメニューを配置したいと思ってます。メインコンテンツ部分以外はSSIでインクルードしたいと思っています。案外簡単だと思ったのですが・・・すぐ配置が崩れて悩んでます。さらに、CromeとIEで確認をするたびに配置が違ってしまいます。 merginとpadsdingを0にしてから始めるらしいことまでは調べたのですが、そうするととても配置が変で面倒になります。現在はFFFTPと秀丸とブラウザで作業してます。ほかに、PhotoShop6とホームページビルダー14とMicrosoftExpressionweb3は手元にライセンスがあります。 HTMLは分かりますが、CSSは初めてです。多少がんばれば、javaScriptも使えるかもしれません。お薦めの本や、作り方、フリーウェアなどありましたらご指導ください。よろしくお願いいたします。
- ベストアンサー
- HTML
テキストをボーダーで囲むCSS
CSSを本を見ながらやっていますが、下記の例文でテキストをボーダーで囲むものをやってみました。この中で、 margin-left:100px; margin-right:100px; というころですが、これはブラウザに対しての両サイド空きを意味していると思うのですが、逆に囲んでいる幅のほうを指定するにはどうしたらよいのでしょうか。または、そのようなことはできないのでしょうか。 <STYLE TYPE="text/css"> </STYLE> *****HTML <P CLASS="text"> テーブルみたいになるテキスト</P>
- ベストアンサー
- HTML
cssのことでわからないことがあります。
こんにちわ。私はＦＣ２ブログを使って自作テンプレートを作っているのですが、テーブルで組んだ一つのコンテンツを真ん中に配置したいのですが、cssでmargin-raight:auto、margin-left:auto;にしても真ん中に配置されません。 margin-left:300px;と入力すれば左に300pxの余白を作ることはできるのですが・・・何故なんでしょう？後HTML上で<div align="center">～</div> で囲むと真ん中に配置されます。私としてはcssでレイアウト全てを管理したいのでお願い致します。
- ベストアンサー
- ブログ
どのようなHTML、CSSを書けばいいのか？
添付画像のように、表示したいのですがどのようなHTML、CSSを書けばいいのでしょうか？具体的には・「キーワード」と書かれた文字が中心に来るように線で囲む・検索フォーム・ボタンは通常のtextarea、buttonです・「キーワード」・「textarea」・「button」を横一列に表示です。宜しくお願い致します
- ベストアンサー
- CSS
ページヘッダー部分のHTML/CSS
独学で勉強中の学生です。どうしてもできなくて…よろしくお願いします！ページヘッダー部分1～5（グローバルナビより上）を画像でHTML入れました。 CSSで全体を inline 1をfloat: 2をmargin-left; 5をfloat: right; 3,4の高さを合わせることができません。添付画像のような配置にするにはどうしたらよいのでしょうか。使っているのはDreamweaverです。よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
同じＣＳＳファイルにつなげている、4つのＨＴＭＬファイルの1つが、fi
同じＣＳＳファイルにつなげている、4つのＨＴＭＬファイルの1つが、firefoxで文字化けします。他のＨＴＭＬファイルと、中身の内容文字こそ異なりますが、構成はまったく同じです。しかも、そのＨＴＭＬファイルのページは、ヘッドのタイトル文字やフッターの住所などの文字が、他のページとまったく同じ文字の部分であるにもかかわらず、位置がずれたり、文字幅が広くなって表示されてしまいます。 <br/>をくっつけたりとったり、<p>の場所を変えてみたり、いろいろしているのですが、まったく改善されません。ちなみに、すべてのＣＳＳページを、charset=utf-8にしています。もしかして、何らかのＪＳ使って、ブラウザーごとにＣＳＳを作る必要があるのでしょうか？その場合何を使って何を書いたらいいのでしょうか？誰か助けて～！ありがとうございます！
- 締切済み
- その他（プログラミング・開発）
ＣＳＳについて
CSSで下記のように記載すると高さ200pxのボーダ枠の中にaaaaaと記載されるのまでは、よいのですが、上詰めになってしまうのです。高さ200pxの中央に表示させるにはどうしたらよいのでしょうか。どうぞよろしくお願いいたします。 ▼CSSソース -------------------------- #contents{ border: solid 1px #ccc; margin: 0; padding: 0; width: 500px; height: 200px; text-align: center; } -------------------------- ▼HTMLソース <div id="contents">aaaaa</div> --------------------------
- 締切済み
- CSS
CSSで微妙にずれる
CSSで微妙にずれるこんにちは、最近HPを作成するようになった初心者です。あるフリーサイトのCSSを雛形としてHPを作成したのですが、（TOPとMENUとMAIN（コンテンツ）とFOOTERの４構成 MENUは左でMAINが右）ブラウザの枠の中にFOOTER部分が表示されると（上下に短いコンテンツ）微妙に左（多分３PXぐらい）に、ずれて表示されてしまいます。この様な、場合原因の部位を特定するには、どの様なアプローチを行えばよろしいのでしょうか？教えていただけるとありがたいです。ちなみに、FOOTERのHTMLは <div id="footer"> <address>Copyright © 2010 XXXXX All Rights Reserved.</address> </div> で、 CSSは div#footer { clear:both; margin:0 20px 0 20px; } です
- 締切済み
- HTML
HTML、ＣＳＳが、なかなかうまくいきません。
お世話になります。 HTMLを始めたばかりですので、ご教授いただけたら幸いです。以下の図のような感じに並べたいのですが、なかなかうまい具合にいきません。黄色は、全てボタンになります。赤は、ボタンについた吹き出し部分となります。上段の２つのボタンは、やや大きい感じのボタン。下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、ご教授いただけたら、幸いです。宜しくお願いします。
- 締切済み
- CSS
ＨＴＭＬ超初心者です。ＣＳＳでOverflowをautoにして ifr
ＨＴＭＬ超初心者です。ＣＳＳでOverflowをautoにして iframeのようにスクロール出来るようにしているのですが、スクロールバーのある右端ギリギリまで文字がいってるので、スクロールバーの左に文字との余白を作りたいです。出来なくて困っています。余白をつくることは可能でしょうか、アドバイスをお願い致します。
- ベストアンサー
- HTML